Search code examples
javascriptangularangular-routingrouter-outlet

Angular 2: How to propagate HTML elements with router?

There's a basic DOM:

main
- child A        :goBack()
  -- subChild A  :*
- child B        :goBack()

From the app.component.html I propagate a footer element to all DOM children. What I wonder is, why does the Back button not appear on the subchild A page?

See stackblitz.

Solution

  • You have to create subchild as an actual child route. Otherwise it will be handled as any other route and completely replace the <router-outlet> tag, in this case the ChildComponent.

    const routes: Routes = [
  { path: '', component: MainComponent },
  {
    path: ':child', component: ChildComponent, children: [
      { path: 'subChildA', component: SubChildComponent }
    ]
  },
];

    Also, you need a second <router-outlet> tag within the template of your ChildComponent where the subroutes (subchildren) are supposed to be rendered.

    Have a look at the modified stackblitz.