routerLinkActive on parent element not working when routerLink is not directly inside parent, but in seperate component

Question

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!

Answer 1

Try this:

  <app-link
    *ngFor="let link of links"
    [link]="link"
    [routerLink]="link"
    routerLinkActive="active"
  ></app-link>