Prevent tab change event in angular material md-tab

Question

Is it possible to prevent tab change in angular-material's md-tabs or md-tab directive? I use the md-on-select directive to execute a function once a tab is clicked and set the md-active value to false for a specific tab. But the tab switch still happens and I seem not to be able to prevent it:

<md-content>
        <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="Tab1" md-active="ctrl.selectTab1" md-on-select="ctrl.tabClicked('Tab1')">
                <md-content>
                    myContent
                </md-content>
            </md-tab>
            <md-tab label="Tab2" md-active="ctrl.selectTab2" md-on-select="ctrl.tabClicked('Tab2')">
                <md-content>
                    mycontent
                </md-content>
            </md-tab>
        </md-tabs>
</md-content>

In the controller function I have

function tabClicked(tab) {
        switch (tab) {
            case 'Tab1':
                vm.selectTab1 = true;
                vm.selectTab2 = false;
                break;
            case 'Tab2':
                vm.selectTab1 = false;
                vm.selectTab2 = true;
                break;
        }
}

I do not understand your question. Do you want to 'disable' a certain tab? — Founded1898, Oct 12 '17 at 14:54
if you want to make same tabs disabled you can use ng-disabled tag instead of md-active = "false" — hame-dhib, Oct 12 '17 at 15:03
No, I want to prevent the tab change. Example: initially I am on the first tab page, and I click on the second tab, I do not want to change to the second tab but stay on the first one. — YourReflection, Oct 12 '17 at 15:05
So, if you want to prevent the click handler on the tab i think you should use 'ng-disabled'. Why not? — Founded1898, Oct 12 '17 at 15:11
Well, I don't want to disable the tab. I just don't want to change to that tab when it is clicked. The scenario is, that in the first tab I might have unsaved changes. When the user clicks on the second tab, I display a confirm message. And if the user clicks on "cancel" I do not want to change to the second tab but stay on the first one. Otherwise, the unsaved changed would get lost. — YourReflection, Oct 12 '17 at 15:14
https://stackoverflow.com/questions/56607394/angular-material-tab-prevent-tab-change-of-mat-tab-group-if-the-form-in-curren/56607398#56607398 — jophab, Jun 15 '19 at 04:57

score 2 · Accepted Answer · answered Oct 12 '17 at 15:37

This is an exemple but im not sure if this what you want

Exemple

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <md-content>
      <md-tabs md-dynamic-height md-border-bottom md-selected="selected"    >
          <md-tab label="Tab1" ng-click="tabClicked('Tab1')">
              <md-content>
                  myContent 1
              </md-content>
          </md-tab>
          <md-tab label="Tab2" ng-click="tabClicked('Tab2')">
              <md-content>
                  mycontent 2
              </md-content>
          </md-tab>
      </md-tabs>
   </md-content>
</div>

angular.module("myApp",['ngMaterial']).controller("MyCtrl", function($scope) {

  $scope.selected = 0

  $scope.tabClicked = function(tab) {
    switch (tab) {
        case 'Tab1':
             $scope.selected = 0
            break;
        case 'Tab2':
            $scope.selected = 0
            break;
    }
  }

});

I hope that help you

This is not preventing the md-tab to move to the next tab. It actually moves and then get back to previous. I wonder if there is a way to actually prevent the md-tab from moving. That would be helpu for, lets say, verify the data before moving. — alexandergs, Jan 17 '18 at 21:07

Prevent tab change event in angular material md-tab

1 Answers1