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

Question

<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.

Answer 1

I would do it by using the following css

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

Plunker Example