mat-tab as a link click on label and just open link

Issue

I have such a problem i have: inside 4 mat-tabs i want to add one more..and it will just a label when we click on it it opens provided link..i m trying to do simply like that but it doesnt work <mat-tab label="Statistika1" (click)="avaJaak()" tooltip="opens new link"><div (click)="avaJaak()"></div></mat-tab> and tooltip doesnt work as well...how to achiev that on click it will go to avaJaak() method..and why it doesnt work

<mat-tab-group dynamicHeight [ngSwitch]="esileheTuup">
<!-- Kohtunik -->
<ng-container *ngSwitchCase="ESILEHE_TUUPID.Kohtunik">
  <mat-tab label="Teavitused" *ngIf="naitaTeavitusi">
    <div class="container-fluid fill">
      <div class="esileht__tab">
        <div class="row">
          <div class="col col-12">
            <app-teavitused></app-teavitused>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>
  <mat-tab label="Kiirlingid ja statistika" *ngIf="naitaKiirlinke || naitaStatistikat" class="esileht__tab">
    <div class="container-fluid fill">
      <div class="esileht__tab">
        <div class="row">
          <div class="col col-6" *ngIf="naitaKiirlinke">
            <kiirlingid></kiirlingid>
          </div>
          <div class="col col-6" *ngIf="naitaStatistikat">
            <statistika></statistika>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>
  <mat-tab label="Kalender">
    <div class="container-fluid fill">
      <div class="esileht__tab">
        <div class="row mb-3">
          <div class="col col-12">
            <app-kalender></app-kalender>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col col-6" *ngIf="naitaValvekord">
            <valvekorrad></valvekorrad>
          </div>
          <div class="col col-6" *ngIf="naitaAraolekud">
            <araolekud></araolekud>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>
  <mat-tab [label]="mulleAntudLabel$ | async" *ngIf="naitaMulleAntudToovooge">
    <div class="fill">
      <app-mulle-antud></app-mulle-antud>
    </div>
  </mat-tab>
  <mat-tab label="Statistika1"
           (click)="avaJaak()"
           tooltip="Siia vajutades suunatakse teid Justiitssüsteemi andme- ja analüüsikeskkonda (JAAK)">
           <div (click)="avaJaak()">
            <!-- Content of the tab goes here -->
          </div>
  </mat-tab>
</ng-container>

Solution

We could use the selectedTabChange output property of the mat-tab-group to get a MatTabChangeEvent whenever a tab has been clicked. The MatTabChangeEvent class has a property named tab for the currently-selected tab. From there we can check the textLabel of the selectedTab (MatTab class) to see if it matches the tab that we want to route from.

Sample of working code here:

@Component({
  selector: 'tab-group-basic-example',
  template: `
  <mat-tab-group (selectedTabChange)="tabChange($event)">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Stats"> </mat-tab>
</mat-tab-group>
  `,
  standalone: true,
  imports: [MatTabsModule],
})
export default class TabGroupBasicExample {
  router = inject(Router);

  tabChange(tabEvent: MatTabChangeEvent): void {
    // textLabel should match exactly with label defined in mat-tab
    if (tabEvent.tab.textLabel === 'Stats') {
      this.router.navigateByUrl('/stats');
    }
  }
}

Here is a link to working stackblitz as well: https://stackblitz.com/edit/ighn35?file=src%2Fexample%2Ftab-group-basic-example.ts

Here is a link to angular material docs on MatTabGroup selectedTabChange: https://material.angular.io/components/tabs/api#MatTabGroup

Answered By - JR Strayhorn