Wsrtjtyk

I am using mat-tabs from Angular Material and I need to create the tabs dynamically depending on some conditions.

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">

    <mat-tab id="tab0" label="First tab">

        // Tab content

    </mat-tab>

    <mat-tab id="tab1" label="Second tab">

        // Tab content

    </mat-tab>

    <mat-tab id="tab2" label="Third tab">

        // Tab content

    </mat-tab>

<mat-tab-group>

Depending on some condition, I need to be able to generate the tabs like this for example:

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">

    <mat-tab id="tab1" label="Second tab">

        // Tab content

    </mat-tab>

    <mat-tab id="tab0" label="First tab">

        // Tab content

    </mat-tab>

    <mat-tab id="tab2" label="Third tab">

        // Tab content

    </mat-tab>

<mat-tab-group>

Is there a setting on the MatTabs API or some trick I can do from JavaScript to achieve this? Thanks!

You could try using an *ngFor to keep the tabs dynamic

html

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">

    <mat-tab *ngFor="let tab in tabList" id="{{tab.tabId}}" label="tab.label">

        <div [innerHtml]="tab.innerHtml"></div>

    </mat-tab>

<mat-tab-group>

ts

tabList = [{

  label: 'First Tab',

  innerHtml: `<div>hello, World!</div>`,

  tabId: 'tab1'

}, {

  label: 'Second Tab',

  innerHtml: `<div>I am a different Tab</div>`,

  tabId: 'tab2'

}];

Then from there you can you can sort the this.tabList object however you want with your conditions

EDIT:

After a question in comments about *ngIf on the <mat-tab>'s, here is a revised answer with *ngIf statements

html

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">

    <ng-template ngFor let-tab [ngForOf]="tabList">

        <mat-tab *ngIf="tab.showTab || someHideFunction(tab)" id="{{tab.tabId}}" label="tab.label">

            <div [innerHtml]="tab.innerHtml"></div>

        </mat-tab>

    </ng-template>

<mat-tab-group>

ts

tabList = [{

  label: 'First Tab',

  innerHtml: `<div>hello, World!</div>`,

  tabId: 'tab1',

  showTab: true

}, {

  label: 'Second Tab',

  innerHtml: `<div>I am a different Tab</div>`,

  tabId: 'tab2',

  showTab: false

},  {

  label: 'Third Tab',

  innerHtml: `<app-custom-component [input]="tempVariable"></app-custom-component>`,

  tabId: 'tab3',

  showTab: true

}];

You can use ng-template for this like following.

<ng-template #content1>

  <div>Content 1</div>

</ng-template>



<ng-template #content2>

  <div>Content 2!</div>

</ng-template>

Then use in your tabs accordingly.

<mat-tab id="tab0" [label]="yourFirstLabel">

    <div *ngIf="yourFlag; then content1 else content2"> </div>

</mat-tab>

<mat-tab id="tab1" [label]="yourSecondLabel">

    <div *ngIf="yourFlag; then content2 else content1"> </div>  

</mat-tab>

Note that you need to update your labels (yourFirstLabel and yourSecondLabel) too