How to add a conditional style using angular-cli

Question

So I have built a single page app. It grabs its data from an api, sorts this data into categories and builds a menu structure based on these categories. When a user clicks a menu item, the various categories are shown.

This is the menu code:

     <div>
        <ul class="nav navbar-nav">
          <li><a href="javascript:void(0);" (click)="showGames('all')">All Games</a></li>
          <li *ngFor="let category of categories"><a href="javascript:void(0);" (click)="showGames(category)">{{category}}</a></li>
        </ul>
      </div>

My problem is this. When a user is on a particular page, I want to add an active style to the LI element so that the user knows which tab he is currently looking at.

Normally I would do this using a router and it would look something like this:

<li><a [routerLinkActive]="['active']" routerLink="/route-name">Route Name</a></li>

In this case, I essentially have a single page doing all the work. In PHP I would likely have done something along these lines:

<li <?=($current_route == $route) ? 'class="active"' : ''?>

But of course NG2 does things a little differently and I am not sure how to go about this.

Answer 1

[ngClass]="{'active':isCurrentRoute()}"

In the method isCurrentRoute() you should check if the current route is the active route