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 j

Answer 1

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