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

```