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

score 1 · Answer 1 · answered Feb 11 '20 at 14:13

1

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"

answered Feb 11 '20 at 14:13

Ronald Korze

734
5
16

I don't want to disable a tab, I just want to remaining in tab 1, and if user click on tab 2 or 3 show a popup – frint Feb 11 '20 at 14:21

G. Tranter · Accepted Answer · 2020-02-11T14:37:56.607

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.

edited Feb 11 '20 at 14:37

answered Feb 11 '20 at 14:30

G. Tranter

16,766
1
48
68

is working but if I click on second tab, is displayed the tab 2 and quickly pass to the tab 1, is possible to stop this quick move ? – frint Feb 11 '20 at 14:43
Maybe - but it would be tricks to hide/show content - maybe something like `
Content 1
`. I updated my stackblitz. – G. Tranter Feb 11 '20 at 14:51

score 0 · Answer 3 · answered Feb 11 '20 at 14:23

0

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.

answered Feb 11 '20 at 14:23

Mariana Molina

26
3

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

3 Answers3