How to set Bootstrap navbar “active” class in Angular 2?

Question

How can I set Bootstrap navbar \"active\" class in Angular 2? I only found Angular 1 way.

When I go to About page, add class=\"active\"

Answer 1

Bert Deterd's answer is correct, but there's one thing that can be added.

If one route is a substring of another route, you will see something like this happen: 2 active anchors

You can add this to make it match exact routes only:

[routerLinkActiveOptions]="{exact:true}"

Full Example:

  

    Home
  
  

    About
  
  

    Calendar