0

I have a number of tabs, representing different services. I wish to have a final 'tab' tagged on the end of the list used to add a new service. Denoted by a simple '+'. This will open a simple dialogue.

I was hoping I could put my own ng-click behaviour on this single tab and prevent default but this doesn't work.

Is there any way I can 'catch' the tab click event BEFORE the tab body switch takes place and prevent it from happening?

umpljazz
  • 1,182
  • 4
  • 11
  • 21
  • 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:58

2 Answers2

1

It seems that it is not possible at the moment (see e.g. https://groups.google.com/forum/#!topic/ngmaterial/rNWMk3S9uDI) - at least using official api.

If you are ok with a solution which hacks into the directive internals then you can do following:

angular.module('MyApp').directive('tabWatcher', function() {
return {
    require: ['mdTabs'],
    restrict: 'A',
    link: function(scope, el, attrs, controllers) {
        var mdTabsCtrl = controllers[0];
        var origSelectFn = mdTabsCtrl.select;

        // overwrite original function with our own
        mdTabsCtrl.select = function(index, canSkipClick) {
            if (...) {
                origSelectFn(index, canSkipClick);
            }
        }
    }
};

I've placed a demo here http://codepen.io/jarek-jpa/pen/wGxqOq . Try to click some tabs. The select() call will be intercepted and depending on a condition let pass or not.

Disclaimer: Again, it hacks into the md-tabs directive internals, so may stop working any time (tested with angular-material 1.0.7)

jarek.jpa
  • 565
  • 1
  • 5
  • 18
-2

You can set pointer-events to none to prevent the md-tab from responding to clicks.

Example:

<style>
md-tabs.readonly {
  pointer-events: none;
  user-select: none;
}
</style>

<md-tabs class="readonly">
  <md-tab label="can't touch this"></md-tab>
</md-tabs>

This is tested to work with Angular Material 1.0.1

joe_young
  • 4,107
  • 2
  • 27
  • 38
Corey
  • 1