<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">[routerLink] with async/observable property assignment does not re-evaluate [routerLinkActive] when the observable emits a new value.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">When the value emitted to [routerLink] changes, [routerLinkActive] should re-evaluate against the newly emitted value whether or not the link is "active."</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">&lt;a class="waves-effect" [routerLink]="observable$ | async" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"&gt;LINK</p>
<p dir="auto">the application of the "active" class will not be re-evaluated when a new value is emitted by observable$.<br>
e.g.<br>
obervable$ = Observable.interval(1000).map(i =&gt; ['/page/' + i])</p>
<p dir="auto">If you are on /page/0 link will be active on first emission, but will not go inactive once i &gt; 1.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Using observables with routerLink should work.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Chrome 55m, Windows 10</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.4.1</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.1.4.0</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto">[ x] bug report =&gt; search github for a similar issue or PR before submitting<br>
[ ] feature request<br>
[ ] support request =&gt; Please do not submit support request here, instead see</p>
<p dir="auto"><strong>Current behavior</strong><br>
Look at this  <a href="http://plnkr.co/edit/8UHCnly9beVcZUQLty00?p=preview" rel="nofollow">Plunker</a>.<br>
When you choose one of four heroes HeroComponent is loaded. Inside its templete there is another <code class="notranslate">&lt;router-outlet&gt;</code> where you can navigate beetween HeroDetailComponent and HeroNameComponent components. HeroDetailComponent is loaded by default as it has <code class="notranslate">path: ''</code> in routing configuration but link 'Details" isn't mark as active.</p>
<p dir="auto">When we navigate to 'Name' and then back to details by clicking 'Details' link - active class starts to be added.</p>
<p dir="auto">Also when we are in HeroNameComponent and then we choose again active hero from list (only curently active hero) then details button is shown as acivated correctly .</p>
<p dir="auto">Its seems to doesn't work especially when component is reused, without creating new instance.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
When clicking one of heroses, details button should be marked as active.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.3, also ~2.1.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript]</p>
</li>
</ul>