Angular Routing with templating

Question

Imagine this scenario, you have a angular app (version 11) where the app.component call a feature module

app.component.html

<div class="content" fxFlex>
  <router-outlet></router-outlet>
</div>

Inside my feature module I've a page split vertically into two (with a sideBar).

Component A Module X

| sideBar Z  | content A |

Component B Module X

| sideBar Z | content B|

The ideia is to change only the content when i navigate from A to B but without have to define the the sideBar Z into the components.

I think that I need to define some templating inside the routing. How can I achieve this behavior (I'm not finding this on documentation)?

Thanks in advance

Answer 1

try wrapping your routes that require sidebar in navigation route

routes = [
...
{path: 'no-navigation-route', component: DComponent},
{
  path: '',
  component: NavigationComponent,
  children: [
     {path: 'path-a', component: ContentAComponent},
     {path: 'path-b', component: ContentBComponent}
  ],
}
]

here, you can put navigation inside of NavigationComponent and it should work exactly as described