How to disable click in navlinks in mat-tab-nav-bar in Angular?

Question

html:

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
              <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.route" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{ link.label | translate }}</a>
            </nav>

ts file :

public navLinks: { label: string, route: string }[] = this.activatedRoute.snapshot.data['tabs'];

Answer 1

Approach 1

use [disabled]="true" attribute in html

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.route" routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive" [disabled]="true">{{ link.label | translate }}</a>
</nav>

Approach 2

Specify the function which triggers in on click event like (click)="onTabClick(routerLink1) and then in component.ts follow it up with tabLink.preventDefault();

In html :

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
                  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.route" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" #routerLink1 (click)="onTabClick(routerLink1)">{{ link.label | translate }}</a>
                </nav>

In your component.ts :

onTabClick(tabLink: any): void {
    
    tabLink.preventDefault(); // Prevent the default click behavior

    console.log('Tab clicked but not navigating.');
  }

Answer 2

use disabled attribute like below

In navlinks array set a property disabled to true!

docs

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.disabled ? null : link.route" routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive" [disabled]="link.disabled">{{ link.label | translate }}</a>
</nav>