Angular2+ Using NgFor to create mat-tab with the same content

Question

I am using ngFor to create some tabs according to a list with the mat-tab material.

However, I would like to only have a unique content. Indeed, the content is a graph and only the data changed. Therefore, when I click on one of the tabs, it calls the function onTabChanged() and the variable data is updated in the < nvd3 >.

This does not work properly. Because it creates three times nvd3.

In fact, I would like the tabs acting like a button. Because I tried some buttons but I prefer the design of the tabs.

<mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)">
  <mat-tab label={{tab.type}} *ngFor="let tab of datasetList; let index = index">
    <div>
      <nvd3 #nvd3 [options]="chart" [data]="data"></nvd3>
    </div>
  </mat-tab>
</mat-tab-group>

Inside the 3 tabs, you only want one content field ? Is my understanding correct ? — Abdu Manas C A
Yes exactly I want 3 tabs (or more) and only one div <nvd3> not three. — PierBJX

nimeresam nimeresam · Accepted Answer · 2018-12-06T09:37:16

0

votes

I think you should use mat-tab-nav-bar instead of mat-tab-group.

Angular2+ Using NgFor to create mat-tab with the same content

1 Answers