show div *ngIf router active navbar - css

Question

I try to show a div under each link in a navbar as long as we are in that active page. I'm iterating every link with * ngFor
What I need is something like this:
But what I get is this:
Here my code:
component.html
<li class="nav-item mx-1" *ngFor="let link of links">
<a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
{{link.nombre}}
</a>
<div *ngIf="getRouteActive()" class="bg-primary" style="height: 4px;"></div>
</li>
component.ts
getRouteActive() {
return this.router.url === '/item1';
}

Answer 1

You can pass the url as a parameter to your function.
getRouteActive(url) {
// I assume your url has a forward slash already
return this.router.url === url;
}
Then in your template
<li class="nav-item mx-1" *ngFor="let link of links">
<a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
{{link.nombre}}
</a>
<div *ngIf="getRouteActive(link.url)" class="bg-primary" style="height: 4px;"></div>
</li>
That should give you the desired result.

Answer 2

Alternatively, using CSS:
.nav-item {
div {
display: none;
}
.active + div{
display: block;
}
}