[feature] Add disabled property to md-tab

[RoxKilly]

A common UX situation requires us to disable certain areas of the view (buttons, dropdowns etc...). My use case is that certain tabs should not be accessible to the user based on a model value. A clean solution would be to have a disabled property on the tab, to be used like:

<md-tab-group>
  <md-tab [disabled]="isDisabled">
    <template md-tab-label>One</template>
    <template md-tab-content>
      <h1>Some tab content</h1>
      <p>...</p>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <h1>Some more tab content</h1>
      <p>...</p>
    </template>
  </md-tab>
</md-tab-group>

The best alternative I could think about is very clumsy: to watch the selectedIndex property with a setInterval or click handler, and if that becomes the index of a tab that should not be accessible, to reset it to the previous index value.

If the tab group emitted a selected event with the index of the newly selected tab, I could bind to that instead but even that wouldn't be as clean as a disabled property that could be data-bound.

PS: I realize that *ngIf could be used to remove a tab from the DOM but this doesn't serve the same purpose: sometimes you need the user to be aware of the UI element that she cannot activate (just as you would disable rather than hide a form submit button)

[sinisarudan]

Further
in Angular 1 Material it existed:
https://material.angularjs.org/latest/demo/tabs
#880

[SvenBudak]

+1 i am looking to for a solution to disable this tabs.

For everyone who is looking for a way to make the tabs not clickable:

.mat-tab-labels {
  user-select: none;
  position: relative;
  &:after {
    width: 100%;
    height: 100%;
    content: "";
    top: 0;
    left: 0;
    position: absolute;
  }
}

[simeyla]

Here's how to do it for mat-tab (without css). Not sure why this property is not shown in the mat-tab api?

<mat-tab [disabled]="!dogsEnabled">
        <ng-template mat-tab-label>
            <span>Dogs</span>
        </ng-template>
        <div>
            My dogs page
        </div>
    </mat-tab>

When disabled it cannot be clicked, and it also applies the class mat-tab-disabled so if you did want to do further css stuff you could.

However please note if you perform an action that means that the currently selected tab should no longer be enabled you'll have to manually set selectedIndex to switch away from it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}