Load angular component when clicks on a column

Gantt
#1

Hi support,
I want to load angular component when clicks on Gantt column. can you pls send sample snippet how to do this.

Thanks.
Rasagb

#2

Hello,
If I understand, you want to click on the grid of the Gantt and load your angular component. One of the options is to use ViewContainerRef and ComponentFactoryResolver classes to get a container instance of the component and generate this component dynamically. As an example, I will use Angular Material UI component library. There are related articles:
Angular ;
Angular ;
https://material.angular.io/ ;
You need to create a custom inline editor:
Inline Editing in Grid Gantt Docs ;
And you can load your angular component with a function, referencing the container context. It can look like this:

function context_with_component() {

      this.viewContainerRef.clear();
      const factory = this.resolver.resolveComponentFactory(InputComponent);
      let custom_component = this.container.createComponent(factory);
      let component_instance = <InputComponent>custom_component.instance;
      let component_html = component_instance.elementRef.nativeElement;

      return component_html;

    }
    let boundfunc = context_with_component.bind(this);

Please check the demo below:
https://files.dhtmlx.com/30d/aa41a6a6a4bbc85b8356bc9d89160fe1/angular+angular_component_material_ui.zip ;
This is not a complete solution, but I hope it’ll show you a right direction.