navigation.html

<header>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="/" class="navbar-brand">Boilerplate</a>
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <ul class="nav navbar-nav">
                <li *ng-for="#item of items.get()"
                    [ng-class]="isActive(item) ? 'active' : 'not-active'"
                >
                    <a [router-link]="[item.link]">{{item.title}}</a>
                </li>
            </ul>
        </div>
    </div>
</header>

navigation.ts

import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
import {ROUTER_DIRECTIVES, Router, Location} from 'angular2/router';
import {NavigationItems} from './services/navigation_items';

@Component({
  selector: 'navigation',
  templateUrl: './components/navigation/navigation.html',
  directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  providers: [NavigationItems]
})

export class NavigationCmp {
  constructor(
    public items: NavigationItems,
    private _router: Router,
    private _location: Location
  ) {}

  isActive(item) {
    let instruction = this._router.generate([item.link]);

    return this._router.isRouteActive(instruction);
  }
  
  isActive2(item) {
    return this._location.path().toLocaleLowerCase() === item.link.toLocaleLowerCase();
  }
}

navigation_items.ts

export class NavigationItems {
  items = [
    {
      link: '/About',
      title: 'About',
      access: 'anon'
    },
    {
      link: '/Examples',
      title: 'Examples',
      access: 'user'
    },
    {
      link: '/Admin',
      title: 'Admin',
      access: 'admin'
    }
  ];

  get(): Object[] {
    return this.items;
  }
}