Material: feat(tabs): add support for ng-show and hide/show layout directives

[Chidan]

Hi there,

hide attribute and ng-show doesnt work on , below is what I am trying to do.

OR

both dont hide the tab, is there any way to conditional show a tab?

Regards,
Chidan

[paulflo150]

Can use ng-if:

<md-tab data-ng-if="ctrl.showTab" label="Tab2">Tab2 content</md-tab>

http://codepen.io/anon/pen/RWNZyM

[Chidan]

@paulflo150 thanks for example, yes ng-if works but ng-show, and hide attributes are not working, is this a bug or by design?

[opadillaintegrify]

+1 Using ng-if together with $mdMedia to simulate hide attribute as a workaround

[jangidgirish]

when ng-if use in <md-tab> then <md-tabs> md-selected not working, is it bug or work another way?

[mustela]

Having the same issue, ng-show/hide won't be supported?

[matt-neill]

+1

[yevkbb]

+1

[ganeshghalame]

+1

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[Skriptach]

The issue is still present. And ng-if doesn't suit my case. I have ng-controllers inside tabs content and have to init them just once.

[Beny-Muler]

+1 the issue is still present.

[smithscripts]

This worked for me. You have to modify the source...

In the MdTab directive at appox. line: 34434
Add "hide: '=?ngHide'" to the isolated scope

scope:    {
      active:   '=?mdActive',
      disabled: '=?ngDisabled',
      hide:     '=?ngHide',
      select:   '&?mdOnSelect',
      deselect: '&?mdOnDeselect'
}

then in the MdTabItem directive at appox. line 34496

Add this watch

function MdTabItem () {
  return {
    require: '^?mdTabs',
    link:    function link (scope, element, attr, ctrl) {
      if (!ctrl) return;
      ctrl.attachRipple(scope, element);

      scope.$watch('tab.scope.hide', function (value) {
          if (value)
              element.css('display', 'none');
          else
              element.css('display', 'block');
      });
    }
  };
}

[Avishaidev]

@smithscripts wroks perfect !!! Thanks

[xzessmedia]

its so annoying, so many controls are just unperfect and broken in some ways... people should think before using this library in serious projects

[tkegan]

Just ran into a related bug where controls on an md-tab with the ng-if directive and no default value are not bound properly. Tested Angular 1.5.7 (don't ask...) and 1.7.2. My solution was to use the ng-disabled directive and a bit of css:

.md-tab.md-disabled { display:none; }

Not helpful if you use ng-disabled as intended of course.

[Splaktar]

I have re-opened this issue to indicate that we would welcome a community contribution to add this functionality to the tabs component.

[BaldemarJanrain]

@Splaktar there's already a contribution to this, @smithscripts did it https://github.com/angular/material/issues/4456#issuecomment-296236790

[Splaktar]

@BaldemarJanrain right, I see that, but we need a PR for it, not just a comment. Also instead of using a watch in all cases, we would use a MutationObserver for improved performance (example here).

If you would like to submit a PR, I would be happy to help you with it.