[Fixed] Angular Routing with templating


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


<div class="content" fxFlex>

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


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

Leave a Reply

(*) Required, Your email will not be published