Can I change angular router manner for tab-based app?

Question

We are working on an angular project, a big ERP system and we want to combine angular router with tabbed design (mat-tab):

When user clicks on a routerLink (from navbar or inner links) we want to create a new tab and dynamically load the component associated with that route, in the content of newly created tab (in the current routerOutlet-based app, lazy loading is used for big modules). We want to preserve previous opened tabs state and on tab changes the url must change based on the content of active tab... Examples of tab-based apps and dynamically loading components, are available but not with routing!

Dynamic Tab based app

Any tips are helpful... Thanks.

Answer 1

Try using angular routes and child-routes. Using Angular child-routes can fulfill your requirement.