Angular 2 - Bootstrap active link

tl;dr

.navbar-default .navbar-nav > li > a.router-link-active {
  color: #555;
  background-color: #e7e7e7;
}

I primarily use bootstrap to style stuff I am working on (mostly because of my complete lack of any aesthetic ability). I am interested in using the Angular teams material design stuff but its not ready for A2 yet.

Anyways if you like me use the bootstap navbars you might want set which link is currently active.

Bootstrap normally does this via an '.active' class on the li of the link that is active.

Angular 2 sets a class '.router-link-active' on the 'a' element itself.

To get these to work together:

.navbar-default .navbar-nav > li > a.router-link-active {
  color: #555;
  background-color: #e7e7e7;
}

This will work with bootstraps styling for the navbar.

If alternatively you MUST set the active class on that li element you can do this

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">  
   <a [routerLink]="['/Home']">Home</a>
</li>