Angular - Apply style to element depending on sibling RouterLinkActive?

Question

I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this just using routerLinkActive?

menu.html

<menu>
  <a routerLink="page1" routerLinkActive="active">
      option1
  </a>
  <a routerLink="page2" routerLinkActive="active">
      option2
  </a>
</menu>

This menu works great. But what I'm asking is how can I take advantage of routerLinkActive property placed in other HTML Tag. like:

main.html

<main>
    <span class="title" routerLinkActive="active">My sub child part</span>
</main>

Goodsized

Answer 1

You could bind the state of the routerLinkActive directive to whether or not a class is applied to an element as follows:

<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>

.active-span {
 background-color: red;
}

#rla is a template variable You can find more info about this use case of the RouterLinkActive directive in the docs

Franny

thanks! could you explain a litle bit more about what is #rla? and if this can be accesible for other totally different component? – Goodsized

Edited my answer. You could pass the value of rla.isActive to other components inside of the tempate with one way binding – Franny

Used this method in a parent element and it works perfectly. Thank you :) – Godderd

@AngelaAmarapala glad to hear – Franny

@RicardoGonzales did this solved your issue? In that case, please consider to mark this as an answer – Franny

Answer 2

you can apply the RouterLinkActive directive to an ancestor of a RouterLink.

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

More details here.

Hope this helps!!

Visitation

first time I take a look at the routerLink directive docs, really helpful! – Franny

@MadhuRanjan what if I want to paint my div that belongs to other component not like a parent like your example. – Goodsized

You can create your own directive which can take route and css class as an parameter, and checks if route matches can apply the css class provided, Cheers!! – Visitation

@MadhuRanjan very good light in the dark! thanks, I've changed the direction of this implementation and now is working! – Goodsized

@napstercake, glad I could help, Cheers!! – Visitation

Answer 3

You can call [class.active]="router.isActive('/parentUrlFragment',false)" on Parent Selector to have active class on the parent.

On your TS file :

import { Router, ActivatedRoute } from '@angular/router';
constructor(public router: Router){}

Now you can access the isActive method of Router in your html;

So if you have a Nested Menu Like :

Product
> Category 1
> Category 2

Selecting any of the Category Link will have active class on Product selector with [class.active]="router.isActive('/product',false)"

Reclaim

Answer 4

Found that easiest/fastest approach for me uses [ngClass] with multiple expressions (with ternary operator) listed in an array like this:

<a [ngClass]="[
  router.isActive('/about-me', true) ? 'active-class' : '',
  router.isActive('/hobbies', true) ? 'active-class' : '',
  router.isActive('/photo-gallery', true) ? 'active-class' : '']"
  (click)="showsSubmenu = !showsSubmenu">
  Parent Menu
</a>
<div *ngIf="showsSubmenu" class="submenu>
  <a routerLink="about-me" routerLinkActive="active-class">About Me</a>
  <a routerLink="hobbies" routerLinkActive="active-class">Hobbies</a>
  <a routerLink="photo-gallery" routerLinkActive="active-class">Photo Gallery</a>
</div>

and in TS

import { Router } from '@angular/router';

export class NavbarComponent implements OnInit {
  constructor(
    public router: Router
  ) {}
}

Note: I use a class called 'active-class' to style both the parent menu anchor and the children anchors in this example; but you could use separate classes/styles.

Sonata

Truly it's the easiest way to change the CSS property of any dom depending on the route. – Selfannihilation

Answer 5

If you're main navigation item merely serves as a open/close mechanism for the submenu, but you still want to use the routerLinkActive mechanism built in to Angular, you can 'dupe' the parent item to thinking it's actually a routerLink. Like this:

<nav class="main-nav">
  <a routerLink="/someroute"
     routerLinkActive="active">somelink to a route</a>
  <a (click)="openSubMenu('some-sub-menu')"
     routerLinkActive="active"><span          
     routerLink="/parentlink"
      [hidden]="true">hidden</span>Some Sub Route</a>
</nav>
<nav class="sub-nav">
  <a *ngIf="activeSubMenu ==='some-sub-menu'"
     routerLinkActive="active"
     routerLink="/parentlink/youractualsubroute">Some Sub-route</a>
</nav>

The trick is in the 'hidden' < span > element with the parent link. This will make sure the parent link is also highlighted with the routerLinkActive property on the parent element.

Snood

Answer 6

with sub menu

<ul>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a routerLink="/">home</a>
  </li>
  <li routerLinkActive="active">
    <a routerLink="/about">about</a>
  </li>
  <li routerLinkActive="active">
    <a href="javascript:void(0)" data-toggle="dropdown">service</a>
    <ul class="dropdown-menu">
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a href="/service">service list</a>
      </li>
      <li routerLinkActive="active">
        <a href="/service/details">service Details</a>
      </li>
    </ul>
  </li>
</ul>

Unabridged