Angular Nested Child Routing

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

>Solution :

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.