CODEWITHSUNDEEP
angularangular-material
John Miller
John Miller

Reputation: 33

Angular 4 how do I disable tab navigation in an angular material tab group?

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

I have a tab-group but I don't want the user to be able to change to the next form without filling the required controls first. Instead, I would like the user to only be able to navigate using a next and back buttons that I will enable disable based on validation.

Upvotes: 3

Views: 4074

Answers (1)

yurzui
yurzui

Reputation: 214007

I would do it by using the following css

::ng-deep .mat-tab-label {
   pointer-events: none;
}

Plunker Example

Upvotes: 4

Related Questions