Angular 2 - add custom class to top item for submenu item chosen

Question

I use a third part library with visual components. The menu is build as flat ul/li/a:

<ul class="abs-nav abc-left">
    <li><a [routerLink]="['Dashboard']">Dashboard</a></li>
    <li><a [routerLink]="['SystemInformation']">System information</a></li>
    <li><a [routerLink]="['Health']">Health</a></li>
    <li><a href="#" data-dropdown="#tasks-menu" dropdown-position='right'>Tasks</a></li>
</ul>

and submenu are added as separate lists and then they are glued in JS.

<ul id="tasks-menu" class="abc-dropdown">
    <li><a [routerLink]="['TasksUpdate']">Update</a></li>
    <li><a [routerLink]="['TasksDeployment']">Deployment</a></li>
</ul>

I've added css which marks chosen item from top level menu (adding background color to .abc-nav li a.router-link-active.

I need to add router-link-active class to Tasks menu when one of its subitems is chosen.

I've found those SOs: In Angular 2 how do I assign a custom class to an active router link? , Changing the default name of "router-link-active" class by writing a custom directive that adds new class

Answer 1

Have a look at this question: angular2-how-to-use-an-or-statement.

Basically what you need is:

<li>
    <a href="#" data-dropdown="#tasks-menu" dropdown-position='right'
       [class.router-link-active]="currentPath.indexOf('Tasks') !== -1">
        Tasks
    </a>
</li>

Current path can be retrieved from location e.g.:

class MyController {
    currentPath: string;

    constructor(private location: Location, private router: Router) {
        this.router.subscribe((val) => {
            this.currentPath = location.path();
        });
    }
}