Angular - Apply style to element depending on sibling RouterLinkActive?

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 variableYou can find more info about this use case of the RouterLinkActive directive in the docs

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!!

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)"