[Proposal] Tab content hidden option

[RicardoVaranda]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Tab content hiding instead of ngIf removing them from DOM

What is the current behavior?

Temporarily Removed from DOM and inserted again once ngIf is active

What is the use-case or motivation for changing an existing behavior?

Switching between tabs seems to be a lot faster for me after adopting the content hiding instead of ngIf, along with that I'm creating a socket connection within each content which is being reset every time I load a new tab.

Which versions of Angular, Material, OS, browsers are affected?

All

Is there anything else we should know?

If allowed I'd like to post a pull request which would adapt both methods of doing this leaving the ngIf as default and only using hidden if a certain flag is used.

[aminebizid]

Personnaly I prefer ngIf because I need content to reload when changing tabs.
Suppose I have two tabs
Tab1: managing roles and functionalities
Tab2: Managing user roles

If I add a new role in tab1 I need it to be shown on tab2 after switching tabs.

[aminebizid]

And I believe tab group is using portal host (no ngIf)

[jelbourn]

@robertmesserle we should look into the performance implications of this

[no-more]

Hi,

I think both case are very useful and depends on usage. It would be great to be able to choose which mode to use. Another great feature could be to load content only when the tab was selected once and then keep the content even when changing tabs.

Thanks.

[RicardoVaranda]

@jelbourn For me the performance is amazing, switching between all of the tabs is a lot faster since I don´t have to keep reconnecting.

@Zigzag95 I know it's *ngIf as I've analysed the source code:
L23

What I did to make it work was quite simple, since [hidden] can't be used in a template, I had to surround it with a div and place the directive there.

Let me know if you want me to post a PR so you can test the performance.

[robertmesserle]

@jelbourn @RicardoVaranda I think I agree that we should support both options. When dealing with a small number of tabs, hiding the inactive tabs will typically be faster; however, when dealing with a large number of tabs, this can cause performance issues.

The ideal solution would be something like what we tried in Material 1 with disconnectScope, but I'm not sure if there's a good bug-free way to do that.

[no-more]

I can see one other major bonus of hiding instead of removing the element from the dom, it's when the content of the tab is editable and unsaved. When switching tabs the changes are lost.
But once again both options should be supported as they both have their own use cases.

[RajeeNedunchezhian]

Yes i agree that we should have both options, as @no-more mentioned, i have similar use case where i group the grid , now after switching tabs the grouping/filtering doesnt stay. The data bound to grid in different tabs are not the same , so putting the datamodel outside wont work in this case . @RicardoVaranda can you provide your solution if possible. Thanks

[RicardoVaranda]

I will create a pull request with the solution for this in the morning.

[RajeeNedunchezhian]

Thanks @RicardoVaranda