Deactivating Mat-Tab When Button is Clicked

The first solution to disable non-selected tabs in Angular 4 Material is to convert the list of items in this.tabGroup._tabs into an array or access the _results property inside the Query list. Alternatively, you can use the default property as stated in the reference provided by As a newcomer to Angular and Material, the user is facing a challenge in disabling non-selected tabs and has shared the given code.


On clicking a button, my aim was to deactivate both the chosen


and its associated components.


        {{ }}


@ViewChild('tabGroup',{static:false}) tabGroup: MatTabGroup;
this.tabGroup._tabs[this.tabGroup.selectedIndex].disabled = true;

Attempted the utilization of the attribute


within the context of.

The controls were not disabled, but instead of the chosen one, all


were disabled.

How can i achieve this?

Solution 1:

To avoid duplication, you can either transform this.tabGroup._tabs from a list to an array, or access the _results property within the Query list.

this.tabGroup._tabs.toArray()[0].disabled = true;


this.tabGroup._tab['_results'][0].disabled = true;


Solution 2:

The default property of

mat-tab isActive

can be utilized.

    {{ }}

Check out the API for the tabs component on the Angular Material website.

Frequently Asked Questions