<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
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[ x ] bug Report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Having a component with a ngClass, where the clauses have two or more of the same css classes, will be getting the css classes set wrongly, when using the component twice in a view.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
All components used multiple times in a view should.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
For better understanding I'll start with the <em>Tour of Heroes: Part 3</em> Exmaple available on Plnkr and modify it.</p>
<p dir="auto">To reproduce it you will have to give <code class="notranslate">my-hero-detail</code> a ngClass, like <code class="notranslate">[ngClass]="{'main' :  isMain, 'main second': !isMain}"</code> and set <code class="notranslate">isMain</code> as a input variable of the component. When using the component <code class="notranslate">my-hero-detail</code> twice in a view, where the first component is set to <code class="notranslate">(isMain)=true</code> and the second is one is set to <code class="notranslate">(isMain)=false</code>, you will have a class missing in the first component. The second component will have the correct class set, being <code class="notranslate">class="main second"</code>, while the first component will have an empty class field <code class="notranslate">class=""</code>.</p>
<p dir="auto">Modified <em>Tour of Heroes: Part 3</em> Exmaple: <a href="https://plnkr.co/edit/N9kiStd5mfDbqwGzmNiw?p=preview" rel="nofollow">https://plnkr.co/edit/N9kiStd5mfDbqwGzmNiw?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Basically setting the right classes, when needed, without loosing a class.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, VS Code</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong><br>
2.2.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
Reproduced in Chrome and Edge Browser</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
Typescript</p>
</li>
</ul>
<p dir="auto">This is a plunk of the official one in the api preview with multiple class added instead, and change to alpha48</p>
<p dir="auto"><a href="http://plnkr.co/edit/TxllaqdcEblrBW065XmX?p=preview" rel="nofollow">http://plnkr.co/edit/TxllaqdcEblrBW065XmX?p=preview</a></p>
<p dir="auto">if you click the button and disabled back and forth, you will see that both class don't get added.</p>