<p dir="auto">I have noticed that a bound CssClass value is not updated after router navigation. The old value is not replaced by the new value during data binding. Instead it leaves the existing one behind and adds the new one next to it when it's rebound.</p>
<p dir="auto">I am updating the class via a function which works ok on click, but for some reason the class is not replaced when navigating using the new router.</p>
<p dir="auto">Element:<br>
<code class="notranslate">&lt;a (click)="selectComponent('grid')"  [class]="getActiveClass('grid')" class="list-group-item"&gt;Link&lt;/a&gt;</code><br>
//Class is updated correctly when initiated via click, but not via router navigation.</p>
<p dir="auto">You can see the behavior here: <a href="http://www.syntaxsuccess.com/angular-2-samples" rel="nofollow">http://www.syntaxsuccess.com/angular-2-samples</a></p>
<p dir="auto">Repro steps:</p>
<p dir="auto">Successful:<br>
Click the left nav and see the active link update correctly (bootstrap blue active clas).</p>
<p dir="auto">Failure:<br>
Select any of the left nav links other than the first element<br>
Click the 'About' link in the top navigation<br>
Click the 'Demo' link in the top navigation<br>
Observe that there are two highlighted links in the left nav.<br>
After debugging it I noticed that the correct functions fire, but the class property is not overwritten by the binding.</p>
<p dir="auto">Source code can be found here: <a href="https://github.com/thelgevold/angular-2-samples">https://github.com/thelgevold/angular-2-samples</a></p>
<p dir="auto">Smallish reproduction case:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component(selector: 'example')
@View(
    directives: const [NgFor, CSSClass],
    template: '''
&lt;button (click)=&quot;increment()&quot;&gt;Increment&lt;/button&gt;
&lt;div *ng-for=&quot;var item of items&quot; [class]=&quot;item&quot;&gt;
  &lt;div [class]=&quot;item&quot;&gt;
    {{item}}
  &lt;/div&gt;
&lt;/div&gt;
''')
class ExampleComponent {
  var next = 0;
  var items = ['0'];
  void increment() {
    items = ['${++next}'];
  }
}"><pre class="notranslate"><span class="pl-k">@Component</span>(selector<span class="pl-k">:</span> <span class="pl-s">'example'</span>)
<span class="pl-k">@View</span>(
    directives<span class="pl-k">:</span> <span class="pl-k">const</span> [<span class="pl-c1">NgFor</span>, <span class="pl-c1">CSSClass</span>],
    template<span class="pl-k">:</span> <span class="pl-s">'''</span>
<span class="pl-s">&lt;button (click)="increment()"&gt;Increment&lt;/button&gt;</span>
<span class="pl-s">&lt;div *ng-for="var item of items" [class]="item"&gt;</span>
<span class="pl-s">  &lt;div [class]="item"&gt;</span>
<span class="pl-s">    {{item}}</span>
<span class="pl-s">  &lt;/div&gt;</span>
<span class="pl-s">&lt;/div&gt;</span>
<span class="pl-s">'''</span>)
<span class="pl-k">class</span> <span class="pl-c1">ExampleComponent</span> {
  <span class="pl-k">var</span> next <span class="pl-k">=</span> <span class="pl-c1">0</span>;
  <span class="pl-k">var</span> items <span class="pl-k">=</span> [<span class="pl-s">'0'</span>];
  <span class="pl-k">void</span> <span class="pl-en">increment</span>() {
    items <span class="pl-k">=</span> [<span class="pl-s">'<span class="pl-s">${++<span class="pl-v">next</span>}</span>'</span>];
  }
}</pre></div>
<p dir="auto">What happens in this example is that if you click the "Increment" button 10 times, the resulting DOM is:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div *ng-for=&quot;var item of items&quot; [class]=&quot;item&quot; class=&quot;ng-binding 0 1 2 3 4 5 6 7 8 9 10&quot;&gt;
  &lt;div [class]=&quot;item&quot; class=&quot;ng-binding 0 1 2 3 4 5 6 7 8 9 10&quot;&gt;
    10
  &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">var item of items</span>" <span class="pl-c1">[class]</span>="<span class="pl-s">item</span>" <span class="pl-c1">class</span>="<span class="pl-s">ng-binding 0 1 2 3 4 5 6 7 8 9 10</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[class]</span>="<span class="pl-s">item</span>" <span class="pl-c1">class</span>="<span class="pl-s">ng-binding 0 1 2 3 4 5 6 7 8 9 10</span>"<span class="pl-kos">&gt;</span>
    10
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Instead, I'd expect each div's class to contain only 10, instead of all the numbers up to 10.</p>