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


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 {

    // 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:

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

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?

Source: Angular Questions

Categorized as angular, angular-slickgrid, ngfor, tabs Tagged , , ,


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

After installing ng-bootstrap according to the instructions

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"
<div [ngbNavOutlet]="nav" class="mt-2"></div>

Thanks Raphael and Ghislain for your comments!

Mr. Lemuel Morar

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us