Ability to Hide Tabs

[RicardoVaranda]

This PR was made for people to give people the ability to hide tab contents instead of the traditional *ngIf which removes it and adds it to the DOM.

This will allow us to use the tabs just like before but by passing hideTabs input of true it will hide the tab contents instead of removing and adding them to the DOM, there are some setbacks to this and it should be used with moderation, i.e you shouldn't hide the contents if you have a large number of tabs e.g 10+

[yobud]

Please accept this PR! Without this, md-tabs are inusable.

[ksom]

+1
Hi, thanks @RicardoVaranda.
I'm waiting for this fix too.
Is there something missing ? Or it's possible to merged it?

Thanks

[RicardoVaranda]

@ksom I'm using this in a project for about a month now and it is working fine considering you don't have 10+ tabs opened at which point you should/will start to notice a decrease in performance.

[andrewseguin]

Tab contents are now loaded all at once when the tab group is initialized due to change #1645. Switching between tabs will not re-initialize/destroy the content but rather just perform some portal logic to attach the tab contents. The hideTabs input should not be necessary anymore.

Ricardo, it would be great if you can verify that the current behavior in master satisfies what you needed in your app without this PR.

[tomwanzek]

@andrewseguin are the changes in #1645 addressing the use case described in issue #1445?

I.e. the intent is to have sidenav which contains a tab-group where:

• one tab contains a named secondary-router outlet with a route-specific context menu
• other tabs contain components, which are persisted across routes (i.e. not router-outlets)

Thanks in advance for a brief reply, as the "hide" option was the fall-back now that #524 (Tabs + Routing) is closed.

[andrewseguin]

@tomwanzek I believe this scenario will work just fine. I tested the scenario of a tab group containing one tab with a router outlet and the other tab with an md-button. The tab with the router outlet displayed the router outlet content correctly when navigating between links (even when the tab was not active). The second tab created the md button once and did not recreate each time the tab was displayed.

Does this satisfy your requirements? I know that you suggested another scenario of having the router outlet itself containing the md-tab template but the md-tab-group currently will not update itself when tabs appear/disappear dynamically.

[tomwanzek]

@andrewseguin Thanks for your response. I think the main reason I initially leaned towards having the secondary router-outlet containing a tab (option 1 in issue #1445) was the idea of conditionality.

I.e. if there is a route which does not utilize the secondary router-outlet e.g. a "home" route without an additional context-related tab, then there would be no spurious tab at all.

So as you point out, if the md-tab-group does not currently dynamically update, if tabs appear/disapear (e.g. also ngIf ), it seems there is not really an way of addressing it.

But at least it is possible to mix-and-match "regular" tabs and tabs containing a refreshing (secondary) router outlet. So thanks for the progress made 👍

[andrewseguin]

For sure, and it sounds like your situation might be worked around with using CSS to hide the context-related tab's label. I'd like to look further into the possibility of dynamically added/removed tabs as well.

[anupvarma]

Can somebody let me know if my issue #5239 is related to this issue.
plunker: http://plnkr.co/edit/DADYadzGOFI5GqkkITkA?p=preview

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}