angular slickgrid not loading after page routing in Angular 7

Question

I have a common slickgrid component in my app. This slickgrid component is added inside others component. So when my app is loading for the First time,Slickgrid working properly, but when I route to another component or came back to the first component, it's displaying blank. If I reload the page, it's working properly.Below is my code snippet:

grid.component.ts:

columnDefinitions: Column[];
gridOptions1: GridOption;
dataset1: any[];

ngOnInit(): void {
this.columnDefinitions = [
  {id: 'title', name: 'Title', field: 'title', sortable: true},
  {id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true},
  {id: '%', name: '% Complete', field: 'percentComplete', sortable: true},
  {id: 'start', name: 'Start', field: 'start'},
  {id: 'finish', name: 'Finish', field: 'finish'},
  {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true}
];
this.gridOptions1 = {
  enableAutoResize: true,
  enableSorting: true
};

this.mockData();
}

mockData() {
  // mock a dataset
  const mockDataset = [];
  for (let i = 0; i < 20; i++) {
   const randomYear = 2000 + Math.floor(Math.random() * 10);
   const randomMonth = Math.floor(Math.random() * 11);
   const randomDay = Math.floor((Math.random() * 29));
   const randomPercent = Math.round(Math.random() * 100);

  mockDataset[i] = {
    id: i,
    title: 'Task ' + i,
    duration: Math.round(Math.random() * 100) + '',
    percentComplete: randomPercent,
    start: `${randomMonth}/${randomDay}/${randomYear}`,
    finish: `${randomMonth}/${randomDay}/${randomYear}`,
    effortDriven: (i % 5 === 0)
  };
}

this.dataset1 = mockDataset;
}

grid.component.html:

<angular-slickgrid gridId="grid1"
               [columnDefinitions]="columnDefinitions"
               [gridOptions]="gridOptions1"
               [dataset]="dataset1"
               gridHeight="300"
               gridWidth="800">
</angular-slickgrid>

test1.component.html:

<app-grid #commonGrid >

</app-grid>

test2.component.html:

 <app-grid #commonGrid >

</app-grid>

app.component.html:

   <a routerLink="test">Test</a>
   <a routerLink="test1">Test1</a>
   <router-outlet></router-outlet>

After every page routing,the grid goes blank.How to solve this problem

Answer 1

You have to use different ids as gridId property for each component.

As one solution you can pass these ids from the test.components to your home component as input.

E.g.

home.component.html: adpat gridId <angular-slickgrid gridId="{{gridId}}" ...

home.component.ts: add input @Input() gridId: string;

test.component.ts: add gridId property gridId = "gridId1"

test1.component.ts: add gridId property gridId = "gridId2"

testX.component.html: adapt html bindings <app-home [gridId]="gridId"></app-home>

Edit: I uploaded the changes to a git repo