<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[X ] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[X ] 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><br>
If you have two CSS classes containing the same attribute (e.g. color) and apply them both to the same element with ngClass, the attribute value selected seems indeterministic.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Applying CSS classes with the same attribute to an element with ngClass should use the duplicated elements in a known order.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/OOMWOL" rel="nofollow">http://plnkr.co/OOMWOL</a></p>
<p dir="auto">In the above Plnkr, I have two CSS styles, one red (colour: red) and one green (colour: green).  Applying these styles to the same element, what colour should the text be?</p>
<p dir="auto">When red is used first, followed by green, the text is red.  When green is first, followed by red, the test is still green.</p>
<p dir="auto">The expectations is that one style will take priority over another based on the order it is applied using ngClass.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Applying event based styles which override previous styles within an element.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
MacOS, Chrome, Opera</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> [all]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></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>
Components added dynamically that have <code class="notranslate">ChangeDetectionStrategy.OnPush</code> do not detect input changes. For example, if such a component is instantiated at runtime via <code class="notranslate">ViewContainerRef.createComponent</code>, then setting an <code class="notranslate">@Input</code> property to a new immutable object does not trigger change detection. Instead, the component must be marked for check manually, with <code class="notranslate">ChangeDetectorRef.markForCheck</code>, rather than triggering change detection automatically.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Setting an <code class="notranslate">@Input</code> property value on a dynamically created component that has <code class="notranslate">OnPush</code> change detection should automatically trigger a change detection run, following the same behavior as components created from a template.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="https://plnkr.co/edit/0wHQghtww2HXVbC27bC1" rel="nofollow">Plunker to demonstrate</a><br>
The ChangeDetectionOnPushComponent does not detect the change to its <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a> property.</p>
<p dir="auto">(Also <a href="http://stackoverflow.com/questions/41797590/angular-2-onpush-change-detection-for-dynamic-components" rel="nofollow">related Stack Overflow question</a> with markForCheck workaround.)</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I believe this may be a bug because push change detection for dynamically created components behaves differently from static components, and is not what might be expected for <code class="notranslate">ChangeDetectionStrategy.OnPush</code>. My use case is an application that uses many dynamically created nested components that would benefit from lightweight on-push change detection.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.4.4</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
All</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript 2.0.2</p>
</li>
</ul>