title: Why Angular2 routerLinkActive sets active class to multiple links?
body: <p>I'm trying to implement routerLinkActive to my app but i'm facing the issue that it's sets class active to multiple links. Here's how i'm doing it</p>
  <pre><code>&lt;ul class=&quot;nav nav-tabs&quot;&gt;
    &lt;li role=&quot;presentation&quot; [routerLinkActive]=&quot;['active']&quot;&gt;&lt;a [routerLink]=&quot;['/']&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li role=&quot;presentation&quot; [routerLinkActive]=&quot;['active']&quot;&gt;&lt;a [routerLink]=&quot;['/about']&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li role=&quot;presentation&quot; [routerLinkActive]=&quot;['active']&quot;&gt;&lt;a [routerLink]=&quot;['/contact']&quot; &gt;Contact Us&lt;/a&gt;&lt;/li&gt;  
  &lt;/ul&gt;
  </code></pre>
  <p>Here it's how it looks</p>
  <p><a href="https://i.stack.imgur.com/Mvaer.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mvaer.png" alt="enter image description here" /></a>
  Here it's how it look in dev-tools
  <a href="https://i.stack.imgur.com/HyZHC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HyZHC.png" alt="enter image description here" /></a>
  And my address bar</p>
  <p><a href="https://i.stack.imgur.com/7OpbH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7OpbH.png" alt="enter image description here" /></a></p>
  <h2>Am i missing something because i'm doing as explained in <a href="https://angular.io/docs/ts/latest/guide/router.html#!#router-link-active" rel="noreferrer">angular docs</a>.</h2>