Prevent user from navigating to other tab using mat-tab-group, without VIewChild

Question

I have this mat-tab-group :

mat-tab-group
    class="brand-tabs"
    [disableRipple]="true"
    *ngSwitchCase="types.project"
    (selectedTabChange)="changeProjectTab($event)"
    [selectedIndex]="selectedProjectIndex"
>
.........

The function in ts :

changeProjectTab(event) {
    if (event.index > 0) {
        this.selectedProjectIndex = 0;
        this.modalService.contentModal(
            this.upgradeRef,
            this.translateService.instant('message')
        );
    }
}

In this mat-tab-group I have 3 tabs, and I want to stop navigation to tab with index = 1,2, remaining always at tab with index = 0. I tried like this, but not working. Can you give me some ideas please ? Thx

Answer 1

You need to enable two way binding on selectedIndex:

<mat-tab-group
    ...
    (selectedTabChange)="changeProjectTab($event)"
    [(selectedIndex)]="selectedProjectIndex"
>

Stackblitz example: https://stackblitz.com/edit/angular-lkhtgt.