CODEWITHSUNDEEP
htmlangulartypescript
JackTheRealPi
JackTheRealPi

Reputation: 65

Routerlink in a routerling - Angular

Is it possible to have a routerLink in a div that contains another div with a routerLink?

 <div [routerLink]="xy">
    <span [routerLink]="yx">clickable Link</span>
 </div>

The problem is, that it first redirects you to the first routerLink in the div and then to the routerLink in the span, if you click the text in the span. It should only redirect to the span's link. I already tried to add to the span, but without success:

(click)="stop($event)"

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

Upvotes: 0

Views: 338

Answers (1)

Subham Bhattacharya
Subham Bhattacharya

Reputation: 114

You must have some content/width/height in order to make the div & span clickable

<div routerLink="/one">
   one
   <span routerLink="/two" (click)="stop($event)">two</span>
</div>

In the component.ts file

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

Upvotes: 1

Related Questions