[Angular + Gantt] Issue with Multiple Gantt Instance

Gantt
#1

Hi Team,

We have recently bought Gantt License and we were integrating it.
We have a dropdown and on change in the value in Dropdown Gantt needs to re-rendered.
First time it’s loading fine, but 2nd time i.e. when we change value from Dropdown, Gantt Chart is not rendering.
On changing value in Dropdown, Data to be displayed in the Gantt Chart changes so we are taking destructuring approach.

Following is the Code.

renderGanttChart() {
  if(this.ganttInst) {
        this.ganttInst.destructor(); 
        this.ganttInst = null;
   }
   if(this.data.length > 0) {
      this.ganttInst = Gantt.getGanttInstance();
      this.setGanttData();  // Setting Gantt Data
      this.setDefaultGanttConfig(); // Setting Gantt Config's
      this.ganttInst.init(this.ganttContainer.nativeElement);
      this.ganttInst.parse(this.ganttData);
  }  }

Can you please help me out here if I am doing wrong?
Also please suggest me if this is the suggested approach.

Thanks,
Bhavesh Kumar.

#2

Hello Bhavesh,
It is hard to suggest what might be wrong as I don’t see your full code.
In Angular, there is a common approach for creating a new Gantt instance when opening a page/tab with Gantt and destroying it when switching to another page/tab.
I have the following Angular demo with that approach:
https://files.dhtmlx.com/30d/f71045d1f3b551868dbf709440c3feba/angular9+different_instances_7.0.5_trial.zip

If you can reproduce the issue there, please send me the updated Angular demo so that I can reproduce the issue locally and check what might be wrong.

#3

Hi Ramil,

Thank you for the update.
I figured out the problem and the issue was with my Angular component.

Thank you,
Bhavesh Kumar.