How to disable all tabs except selected tab in angular4 material

Question

I'm very new to angular and material and having a hard problem of disabling the non-selected tabs in angular 4 material and I have only this code below.

    <md-tab-group class="flex-stretch tab-button-arrows">

      <md-tab *ngFor="let subject of subjects" label="subject.name" ></md-tab>

    </md-tab-group>

Note: The subjects is a dynamic array.

Answer 1

All you need to do is use default property of mat-tab isActive : ReadMore

<mat-tab-group>
  <mat-tab #tab [disabled]='!tab.isActive' *ngFor="let subject of subjects" [label]="subject.name">
    {{ subject.name }}
  </mat-tab>
</mat-tab-group>

WORKING DEMO

Answer 2

You can add a [disabled] tag to your mat-tab, with a function linked to it. And have a index for each tab. Something like this:

<md-tab-group class="flex-stretch tab-button-arrows" [selectedIndex]="selectedIndex">

      <md-tab [disabled]="isSelected(i)" *ngFor="let subject of subjects; let i = index" label="subject.name" ></md-tab>

    </md-tab-group>

Then you declare the function on your component to disable if true:

isSelected(index: number) {
        if (this.selectedIndex == index) {
            return false;
        } else {
            return true;
        }
    }