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

Answer 3

By Default Selected Tab Will Display You Can........

 <button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button> <mat-tab-group [(selectedIndex)]="demo1TabIndex"> <mat-tab label="Tab 1">Content 1</mat-tab> <mat-tab label="Tab 2">Content 2</mat-tab> <mat-tab label="Tab 3">Conte`enter code here`nt 3</mat-tab> </mat-tab-group>