<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">I have component with class bindings which look like:</p>
<p dir="auto">&lt;foo class="class1 {{classFromProp1}}" [class.foo-class]="classFromProp2"&gt;<br>
classFromProp2= true<br>
when resizing screen classFromProp1 changes and foo-class gets lost.</p>
<p dir="auto">this behavior works as expected if I use [ngClass]="{'foo-class': classFromProp2}"</p>
<p dir="auto"><strong>Expected behavior</strong><br>
should merge classes correctly</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
~2.4.0</li>
</ul>
<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">If an element has an interpolated class as well as a class that is bound to a component property, bound class is removed if the interpolated class value changes.</p>
<p dir="auto">Take the following html as example:<br>
<code class="notranslate">&lt;h2 class="existing-class {{compClass}}" [class.bound]="hasClass"&gt;Hello {{name}}&lt;/h2&gt;</code></p>
<p dir="auto">Once the <code class="notranslate">compClass</code> property changes, the <code class="notranslate">bound</code> class is removed.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">The expected behavior is that the class that is bound by a variable is unaffected by an interpolated class.</p>
<p dir="auto">Thus, in the above example, if <code class="notranslate">hasClass</code> is true the element should have the following classes present "existing-class", "bound" and whatever the value of <code class="notranslate">compClass</code> is.</p>
<p dir="auto">When <code class="notranslate">compClass</code> changes and <code class="notranslate">hasClass</code> is still true, the element should still have the "bound" class.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<ol dir="auto">
<li>Create a component with a boolean and string property.</li>
<li>Within the component template, add the string property as a interpolated string in an element's class attribute.</li>
<li>Bind another class to the element with the boolean property (<code class="notranslate">[class.bound]="boolProp"</code>)</li>
<li>Change the string property's value after a certain amount of time.</li>
<li>The the class that is added with attribute binding is removed.</li>
</ol>
<p dir="auto">Or check out this <a href="http://plnkr.co/edit/McE9UyP3h07eMqS3EOag" rel="nofollow">plunker</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I think it makes sense to be able to change one class without effecting other classes on an element.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.9 &amp;&amp; 4.0.0-rc.2</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [Chromium 56 | Firefox 52]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.0.2 (with Angular 2.4.9)<br>
Typescript 2.1.5 (with Angular 4.0.0-rc.2)</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>