Как сделать всю функцию вкладки mat как тег привязки

Question

Здесь я столкнулся с проблемой с вкладкой мат.для перехода к новому маршруту мне нужно щелкнуть ярлык, а не вкладку, но мне нужно переходить на новый маршрут всякий раз, когда я нажимаю на вкладку мат.

мой код выглядит следующим образом

<div class="form-wizard-page">

    <div class="container always"> 
    
    <div class="card alternative">
        
    
    <mat-tab-group class="form-wizard" [(selectedIndex)]="selectedIndex">
            
    <mat-tab *ngFor="let name of names; let i = index" >
    
            <ng-template mat-tab-label>

            <a class="routes" (click)="route(routes[i])">{{ name }}</a>

            </ng-template>
            
     </mat-tab>

    
    
    </mat-tab-group> 
    
    <div  >
    
    <router-outlet></router-outlet>
    
    </div>
    
    </div>
    
    </div>
    
    </div>
    

Answer 1

    <mat-tab-group class="form-wizard" [(selectedIndex)]="selectedIndex" (selectChange)="route(routes[selectedIndex])">
            
            <mat-tab *ngFor="let name of names; let i = index">
                    <ng-template mat-tab-label>
                        <a class="routes">{{ name }}</a>
                    </ng-template>  
                </mat-tab>
    
    
    </mat-tab-group> 
    

Answer 2

Переместить событие click в элемент mat-tab следующим образом:

<mat-tab *ngFor="let name of names; let i = index" (click)="route(routes[i])">
    <ng-template mat-tab-label>
        <a class="routes">{{ name }}</a>
    </ng-template>  
</mat-tab>