Material Tabs with lazy loading are reinstantiated on tab clicks

[FritzHerbers]

What is the expected behavior?

After lazy loading a tab, the tab content should persist and not getting reinstantiated on tab changes.

What is the current behavior?

A tab change instantiates the new tab content and destroys the previous tab content.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-imxxnk

Click on the tabs and observe the console for ngOnInit and NgOnDestroy messages.

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

Angular 7.2.15
Material 7.3.7

Is there anything else we should know?

Using matTabContent: lazy loading

[jelbourn]

This is working as intended; the unrendered tabs are completely destroyed and removed from the DOM when switching between them.

[FritzHerbers]

@jelbourn
thx for your reply.

Would be worth to have it documented.

We have a dashboard with with some heavy components within the tabs, which make each of them some 20 backend calls for options. At minimum the lazy loading takes care it doesn't load all tabs at the same time.

However, we also have interactive/editable components under those tabs, the idea was the user can switch between them and save when they are ready. This won't work as they loose their edits.

It would be nice to have it configurable to NOT destroy the content when switching tabs. Can you please add this as a feature request?

[jelbourn]

@FritzHerbers it seems like you would want to cache that state in a way that's not tied to rendering rather than having the content of each tab eagerly fetch its own data

[FritzHerbers]

@jelbourn
It is not only the state of options or model data. We are in the process of developing a "forms" framework on top of ngx-formly. During interacting (also with the backend) the form fields can be enabled/disabled/etc, portions of "included" forms can be exchanged. This state is volatile.
Just wanted to have the lazy-loading with matTabContent and the keeping-alive when not using matTabContent.
Will implement lazy loading using a div and an *ngIf to load (and unload when needed) the tab content.

[sonphnt]

Yes, Is it possible to have a setting to not reload Mat tab content when switching around tabs?

[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.}