CODEWITHSUNDEEP
javascriptangularangular-routingrouter-outlet
TMOTTM
TMOTTM

Reputation: 3381

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.

Upvotes: 0

Views: 45

Answers (2)

Kim Kern
Kim Kern

Reputation: 60357

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.

Upvotes: 1

jack
jack

Reputation: 609

You need to create child route for that. Check this edit

https://stackblitz.com/edit/angular-oupmd9

specially app-routing.module.ts

Upvotes: 0

Related Questions