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>

Answer 1

我认为您应该使用mat-tab-nav-bar而不是mat-tab-group 。