<p dir="auto">[ x] feature request</p>
<p dir="auto"><strong>Current behavior</strong><br>
currently renderer.setElementStyle can not set !important<br>
renderer.setElementStyle(el, styleProperty, styleValue)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
renderer.setElementStyle(el, styleProperty, styleValue, important)<br>
important could be a optional boolean</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
to be able to set !important programmatically</p>
<p dir="auto">Angular 2.0.2</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [all ]</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"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Both options will fail:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ngStyle]=&quot;{'color':'red !important'}&quot;
[style.color]=&quot;'red !important'&quot;"><pre class="notranslate"><code class="notranslate">[ngStyle]="{'color':'red !important'}"
[style.color]="'red !important'"
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
<code class="notranslate">!important</code> is valid css usecase.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="https://plnkr.co/edit/abOMwv3tcYnnjqjCe4ff?p=preview" rel="nofollow">https://plnkr.co/edit/abOMwv3tcYnnjqjCe4ff?p=preview</a></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [TypeScript 1.8.11]</li>
</ul>