How to have nested routerLink in Angular

Question

I have a project in angular 7

I have router links with tag, and I have nested tags that both have routerLink p

Answer 1

In your stackblitz add the following function to your component class. It receives the event as parameter and calls the stopPropagation function on it.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  stop(event: Event) {
    event.stopPropagation();
  }
}

In your template do

<router-outlet></router-outlet>
<a routerLink="/comp1">
  Comp1
  <a routerLink="/comp2" (click)="stop($event)">
    Navigate to comp2 (Nested)
  </a>
</a>

See my stackblitz fork.