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

Published

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

Source: Angular Questions

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

Answers

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!


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
faq