<p dir="auto">Angular2 currently provide a way to bind css class as <code class="notranslate">[class.fa-train]="true"</code>, it is great if you can also bind them at runtime, something like <code class="notranslate">[class:variable]="true"</code> or simply <code class="notranslate">[class:variable]</code>.</p>
<p dir="auto">Here is a simple example,</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.icons = ['fa-train', 'fa-subway', 'fa-bed']"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">icons</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'fa-train'</span><span class="pl-kos">,</span> <span class="pl-s">'fa-subway'</span><span class="pl-kos">,</span> <span class="pl-s">'fa-bed'</span><span class="pl-kos">]</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;i *ng-for=&quot;#icon of icons&quot; class=&quot;fa&quot; [class:icon]=&quot;true&quot;&gt;&lt;/i&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">#icon of icons</span>" <span class="pl-c1">class</span>="<span class="pl-s">fa</span>" <span class="pl-c1">[class:icon]</span>="<span class="pl-s">true</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!--output--&gt;
&lt;i class=&quot;fa fa-train&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;fa fa-subway&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;fa fa-bed&quot;&gt;&lt;/i&gt;"><pre class="notranslate"><span class="pl-c">&lt;!--output--&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span>="<span class="pl-s">fa fa-train</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span>="<span class="pl-s">fa fa-subway</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span>="<span class="pl-s">fa fa-bed</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Here is an example with bootstrap and form. Before:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;form-group&quot; [class.has-success]=&quot;form.controls.name.valid &amp;&amp; !database.duplicate&quot; [class.has-warning]=&quot;form.controls.name.valid &amp;&amp; database.duplicate&quot; [class.has-error]=&quot;!form.controls.name.valid&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Your name&quot;&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>" <span class="pl-c1">[class.has-success]</span>="<span class="pl-s">form.controls.name.valid &amp;&amp; !database.duplicate</span>" <span class="pl-c1">[class.has-warning]</span>="<span class="pl-s">form.controls.name.valid &amp;&amp; database.duplicate</span>" <span class="pl-c1">[class.has-error]</span>="<span class="pl-s">!form.controls.name.valid</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Your name</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">After:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;form-group&quot; [class:nameValidity]=&quot;true&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;You name&quot;&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>" <span class="pl-c1">[class:nameValidity]</span>="<span class="pl-s">true</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">You name</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>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="get nameValidity () {
  if (this.form.controls.name.valid &amp;&amp; !this.database.duplicate) return 'has-success';
  if (this.form.controls.name.valid &amp;&amp; this.database.duplicate) return 'has-warning'
  if (!this.form.controls.name.valid) return 'has-error';
}"><pre class="notranslate"><span class="pl-k">get</span> <span class="pl-en">nameValidity</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">controls</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">.</span><span class="pl-c1">valid</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">database</span><span class="pl-kos">.</span><span class="pl-c1">duplicate</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s">'has-success'</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">controls</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">.</span><span class="pl-c1">valid</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">database</span><span class="pl-kos">.</span><span class="pl-c1">duplicate</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s">'has-warning'</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">controls</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">.</span><span class="pl-c1">valid</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-s">'has-error'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Thanks!</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 a ControlValueAccessor component is used as a child of a component with it's ChangeDetectionStrategy is set to OnPush the current value is always one change behind.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">If a ControlValueAccessor component is used as child of a component with it's ChangeDetectionStrategy is set to OnPush it should work exactly as if the ChangeDetectionStrategy is set to Default.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">Plnkr <a href="http://plnkr.co/edit/1WboKWCqmPZFF8DOBfsd?p=preview" rel="nofollow">http://plnkr.co/edit/1WboKWCqmPZFF8DOBfsd?p=preview</a>. Click on the Button <em>Push Changes</em>. As you can see the red bordered input control did not reflect the current value. Please note: the blue bordered control is the same component type - but is used as a child of a component with ChangeDetectionStrategy.Default.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Custom Controls are not working as childs of components with ChangeDetectionStrategy.OnPush</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X</p>

<p dir="auto">2.x</p>
</li>
<li>
<p dir="auto"><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 ]</p>

<p dir="auto">all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
v5.10.1</p>
</li>
</ul>