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 https://material.angular.io/components/tabs/api. As a newcomer to Angular and Material, the user is facing a challenge in disabling non-selected tabs and has shared the given code.


Question:

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

mat-tab


and its associated components.

//HTML

 
      
        {{ subject.name }}
            
              
                 {{ans}}
              
            
      
    
    

//typescript

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

Attempted the utilization of the attribute

[disabled]


within the context of.

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

Tabs

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;

Or

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

Example


Solution 2:


The default property of

mat-tab isActive


can be utilized.


  
    {{ mytab.name }}
  

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

Frequently Asked Questions