1

I want to set a class on a div when one of the routes inside that div is active. This works all fine with the routerLinkActive directive when I put links with a routerLink directive directly inside the div:

<div class="menu" routerLinkActive="active-group">
  <a ngFor="let link of links" [routerLink]="link">{{ link }}</a>
</div>

However, when I refactor the links to a separate component, the 'active-group' class is not set anymore:

<div class="menu" routerLinkActive="active-group">
  <app-link *ngFor="let link of links" [link]="link"></app-link>
</div>

I have created a StackBlitz to demonstrate the issue here: https://stackblitz.com/edit/routerlinkactive?file=src/app/app.component.ts

Any help would be appreciated!

Waterstraal
  • 399
  • 4
  • 16

1 Answers1

-1

Try this:

  <app-link
    *ngFor="let link of links"
    [link]="link"
    [routerLink]="link"
    routerLinkActive="active"
  ></app-link>
Naeem_VE
  • 94
  • 3
  • Thanks, but I specifically don't want to put the routerlink directive on the component like that because that defeats a lot of the purpose to extract it in a separate component. Also; this is a simple example, but in reality I it is more complex and for example also uses routerLinkActiveOptions – Waterstraal Jun 04 '21 at 12:31