Dynamically create tabs with Angular slickgrid and ngfor in Angular Slickgrid Example 24

Question

I need a page with tabs similar to Example 24 in Angular Slickgrid, where the content of each tab is a grid. The number of tabs can vary, so I need to make it dynamic.

Hence, I used the example as a basis to find out what to do. First I modified ngOnInit:

ngOnInit(): void {
  this.defineGrid1();
  this.defineGrid2();

  // mock some data (different in each dataset)
  this.dataset1 = this.mockData();

  // load data with Http-Client
 this.http.get((URL_CUSTOMERS)).subscribe((data: any[]) => this.dataset2 = data);

 this.gridOptions3 = this.gridOptions1;
 this.columnDefinitions3 = this.columnDefinitions1;
 this.dataset3 = this.mockData();

  this.paras = [
       {tab:"tab1x", grName:"grid1", cD: this.columnDefinitions1, gO: this.gridOptions1, dS: this.dataset1},
       {tab:"tab2x", grName:"grid2", cD: this.columnDefinitions2, gO: this.gridOptions2, dS: this.dataset2},
       {tab:"tab3x", grName:"grid3", cD: this.columnDefinitions3, gO: this.gridOptions3, dS: this.dataset3}
  ];
}

In the template I used the object with *ngFor:

<tabset>
  <div *ngFor="let obj of paras; let i = index">
    <tab [heading]="obj.grName" [id]="obj.tab">
      <h4>Grid {{ i + 1 }} - Load Local Data</h4>
      <angular-slickgrid
        [gridId]="obj.grName"
        [columnDefinitions]="obj.cD"
        [gridOptions]="obj.gO"
        [dataset]="obj.dS"
      >
      </angular-slickgrid>
    </tab>
  </div>
</tabset>

Instead of getting 3 tabs, each tab containing a single grid, I get 3 tabs with identical content, each tab contains all 3 grids.

Where is the mistake? Thanks

Answer 1

As proposed by Raphael I replaced tabset with the Nav directives.

After installing ng-bootstrap according to the instructions https://ng-bootstrap.github.io/#/getting-started#installation

the following ng-bootstrap-example based code in the template did the job

<ul ngbNav #nav="ngbNav" class="nav-tabs">
    <ng-container ngbNavItem *ngFor="let obj of paras; let i = index">
        <a ngbNavLink>{{obj.grName}}</a>
        <ng-template ngbNavContent>
        <angular-slickgrid [gridId]="obj.grName"
            [columnDefinitions]="obj.cD"
            [gridOptions]="obj.gO"
            [dataset]="obj.dS">
        </angular-slickgrid>
        {{obj.grName}}
      </ng-template>
    </ng-container>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>

Thanks Raphael and Ghislain for your comments!