Make router link active on two different routes

Question

In angular how can I make routerlink active on two different routes. i.e.

<li routerLinkActive="active"><a routerLink="dashboard">Dashboard</a></li>

will have the style active when "dashboard" is the route. Is there a way to have the same link be styled active when at a different url e.g. "home" as well?

Answer 1

So I found a solution for anyone who wants to do the same thing. I can't guarantee it's the most efficient solution. I check the url path using a Router like so:

isDashboard: boolean;
ngOnInit() {
    this.router.events.filter(event => event instanceof NavigationEnd)
        .subscribe((event: NavigationEnd) => {
            if(event.url.includes('home')) {
                this.isDashboard = true;
            }
            else this.isDashboard = false;
        });
}

then on the link I add [class.active]="isDashboard" and just leaving the properties like they were on the link in my question (you could add any links you like here). Gets the job done but I was looking for a less intense solution, preferably that could be implemented only in the DOM.