Angular 2+ tabs with routing in application

Question

im wondering how to do some kind of "internal tabs" in my application.

I want to have multiple tabs with multiple nested components (managed by router) and want to keep data alive when im moving between tabs (like keep data in forms etc.), but want to change URL in URL bar in browser.

Im talking about some kind of internal tabs in application, not multiple tabs in browser!

Do you have any tips how to achieve that? Did anybody made some kind of feature?

Thx

Answer 1

I do same functional in big project with multiple big components (CRM)

1. Each main component must have data service (in service u store only values from varibales)
2. All changes in component must work with data from data service
3. Each main component listen NavigationEnd and when it happens save data from data service to tab
4. When you return to this component from another at first u must set data from current active tab to your data service