Angular Nested Child Routing

Question

I am learning use of multiple router-outlet.

While using navigateBy function of router, i am not able to view my child route and getting error. But if i access it via routerLink in html i get the desired output.

So in below code, navigation to songs is working , but navigation to films is not.

const routes = [
  {
    path: 'bollywood',
    component: BollywoodComponent,
    children: [
      {
        path: 'films',
        component: FilmsComponent,
      },
      {
        path: 'songs',
        component: SongsComponent,
      },
    ],
  },
  {
    path: 'hollywood',
    component: HollywoodComponent,
  },
  {
    path: 'tollywood',
    component: TollywoodComponent
  },
];

App Component html

<button class="f-margin-16" (click)="navigateToBollywoodSection()"> Bollywood </button>
<button class="f-margin-16"  (click)="navigateToHollywoodSection()"> Hollywood </button>
<button class="f-margin-16" [routerLink]="['tollywood']" > Tollywood </button>

<br>
Router outlet starts now

<router-outlet> </router-outlet>

Bollywood Component html

<button (click)="navigateToFilms()"> Films </button>
<button [routerLink]="['songs']"> Songs </button>

<router-outlet> </router-outlet>

  navigateToFilms() {
    this.router.navigate(['/films']);
  }

StackBitz Link https://stackblitz.com/edit/angular-ivy-1nzkus?file=src/app/bollywood/bollywood.component.html

KAMLESH KUMAR · Accepted Answer · 2022-09-28 09:07:53Z

1

In router.navigate, you can pass relativeTo as the second param.

navigateToFilms() {
    this.router.navigate(['films'], {relativeTo: this.activatedRoute} );
}

This way navigation will happen relative to the current route. In the constructor you can add the ActivatedRoute dependency.

constructor(private activatedRoute: ActivatedRoute) {}

If you use <button [routerLink]="['songs']"> Songs </button>, the navigation by default happens relative to the current route.

edited Sep 28, 2022 at 9:07

answered Sep 28, 2022 at 8:51

KAMLESH KUMAR

1307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user13258211 Over a year ago

This works, but you need to use this.router.navigate(['films'] instead of this.router.navigate(['/films']

Achal Utkarsh Over a year ago

Okay I was not aware about relativeTo thanks.

KAMLESH KUMAR Over a year ago

Yes it was a mistake. Thanks @MikeS. I have updated the answer

Sharanya · Accepted Answer · 2022-09-28 08:49:49Z

0

Use it like this

this.router.navigate(['bollywood/films']);

answered Sep 28, 2022 at 8:49

Sharanya

915 bronze badges

2 Comments

user13258211 Over a year ago

It would be helpful if you explained why you need to pass the full path from the root url, while passing only the segment to the routerLink inside of the template works.

Sharanya Over a year ago

The navigate() method requires a starting point (i.e., the relativeTo parameter). If none is provided, the navigation is absolute: You can refer to a detailed explanation in this post stackoverflow.com/questions/38634237/…

Harun Malek · Accepted Answer · 2022-09-28 11:08:24Z

0

If you want to use a navigation route then you can use this code. because without a specific parent route you can't access child routing.

this.router.navigate(['/bollywood/films']);

edited Sep 28, 2022 at 11:08

answered Sep 28, 2022 at 11:05

Harun Malek

11 bronze badge

Collectives™ on Stack Overflow

Angular Nested Child Routing

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related