Description
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)