How to make entire mat-tab function like anchor tag

Question

Here I am facing the problem with the mat tab. for navigating to the new route I need to click on a label instead of the tab but what I need is I need to navigate to new route whenever I click on the mat-tab.

my code looks like follows

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

score 0 · Answer 1 · answered Jun 05 '18 at 10:47

0

Move click event to mat-tab element as follows:

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

answered Jun 05 '18 at 10:47

Bunyamin Coskuner

8,719
1
28
48

score 0 · Answer 2 · answered Jun 06 '18 at 06:39

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

How to make entire mat-tab function like anchor tag

2 Answers2