Dynamic Tabs with content : Angular Material

Question

There is two tabs present in my application,I have achieved the same using ngFor. The code for the same is,

 <mat-tab-group >
  <mat-tab (click)="testMethod2GetTitle(tabtitle)" *ngFor="let tabtitle of selelectedTabs; let index = index" [label]="tabtitle"  class="tab-title"> 
        <mat-selection-list >
          <mat-list-option  *ngFor="let list of tabsData" >

                 {{list}}
                </mat-list-option>
            </mat-selection-list>

  </mat-tab>
  </mat-tab-group>

Then for each tab I need to show different data. For example the tab with title as Asia, will be showing India, Pakistan, China and tab with title "America" will be showing the list of South america, New york, Brazil etc.,.

The logic which I tried to get passing list of values to tabsData , by taking the tabstitle when the user clicks the same. But it has the following shortcoming:

1. I'm not able to get the title of the tab in backend, while I click the title.The method itself is not called.
2. All the tabs populate the values of last selected tab.

Answer 1

You can try this way to load tabs dynamically

 <mat-tab-group>
  <mat-tab *ngFor="let tabtitle of selelectedTabs; let index = index" class="tab-title">
    <ng-template mat-tab-label>{{tabtitle}}</ng-template>
    <mat-selection-list >
      <mat-list-option  *ngFor="let list of tabsData" >
             {{list}}
            </mat-list-option>
        </mat-selection-list>
  </mat-tab>
</mat-tab-group>