How to make click mat-tab click?-CodePudding

I have a mat tabs:

 <mat-tab *ngFor="let template of templateTypes" (click)="toggleSelectedTab(template.type)"></mat-tab>

It does not emit click event. I have tried to use embadded span:

 <mat-tab *ngFor="let template of templateTypes" (click)="toggleSelectedTab(template.type)">
            <ng-template mat-tab-label>
                <span (click)="toggleSelectedTab(template.type)"> {{ template.name }} ({{ template?.count }})</span>
            </ng-template>
</mat-tab>

But span element has no fulll tab clickable area, it works as inline element.

CodePudding user response：

Use div instead of span and adjust it to fill the container using css

CodePudding user response：

It starts from index 0 to the number of tabs you create.

In your html

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
     <mat-tab *ngFor="let template of templateTypes" 
              (click)="toggleSelectedTab(template.type)"></mat-tab>
</mat-tab-group>

In component use this code

tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
    console.log('tabChangeEvent => ', tabChangeEvent); 
    console.log('index => ', tabChangeEvent.index); 
}