CODEWITHSUNDEEP
cssangularbootstrap-4
Paco Zevallos
Paco Zevallos

Reputation: 2275

show div *ngIf router active navbar

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:

enter image description here

But what I get is this: enter image description here

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';
}

Upvotes: 0

Views: 1079

Answers (2)

mmath
mmath

Reputation: 1

Alternatively, using CSS:

.nav-item {
    div {
       display: none;
    }

   .active + div{
       display: block;
   }
}

Upvotes: 0

crazychukz
crazychukz

Reputation: 676

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.

Upvotes: 1

Related Questions