I am attempting to display a div underneath each link in a navbar when the page is active. I am looping through each link using *ngFor.
What I am trying to achieve looks like this:
https://i.sstatic.net/PpY66.png
However, what I am currently getting is this: https://i.sstatic.net/wzpzI.png
Below is 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';
}