Lars Gyrup Brink Nielsen
Nov 5 · 1 min read

The router is your friend for this use case. It’s important to have the route and URL reflect the client state. The client state tells us which tab is active. The active tab would be in an auxiliary router outlet.

The router will also help you solve the lazy-loading use case you describe. Use dynamic imports and put the tab components in lazy-loaded modules. Yes, we can have nested lazy-loaded modules. One lazy-loaded feature can load lazy-loaded sub-features.

For sharing the configuration between the tabs and the main view (the left component), you can either use a shared service, a state container (such as NgRx Store) or event and property bindings flowing up to/down from the page component (the foo component).

    Lars Gyrup Brink Nielsen

    Written by

    Left Medium. Follow me on INDEPTH: https://indepth.dev/author/layzee/. Comments will not be read, articles will not be updated.