Changing the order of Angular mat-tabs

Question

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!

Answer 1

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

Answer 2

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
}];