CODEWITHSUNDEEP
angulartypescriptangular-materialangular7angular8
frint
frint

Reputation: 881

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

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

Upvotes: 1

Views: 5801

Answers (3)

G. Tranter
G. Tranter

Reputation: 17958

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.

Upvotes: 1

Mariana Molina
Mariana Molina

Reputation: 26

Did you try adding [disabled]='true' to the mat-tab you want to disable? Maybe you can even add a condition: [disabled]='isFirstTab' or something like that.

Upvotes: 0

Ronald Korze
Ronald Korze

Reputation: 828

Just disable the components/tabs that should not be allowed to navigate?

https://material.angular.io/components/tabs/examples - "Basic use of the tab nav bar" - "disabled link"

Upvotes: 1

Related Questions