<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>What is the motivation / use case for changing the behavior?</strong><br>
Just a fix idea, but it would be cool to have model binding inside of the css styles similar to the model bindings in html templates. This would make things like theming at runtime a lot easier.</p>
<p dir="auto">Something like this:</p>
<p dir="auto">.button {<br>
background-color: {{myColorPropertyInMyCompontent}}<br>
}</p>
<p dir="auto">I have an app that requires the overloading of some stylesheet properties. A use-case example:</p>
<ul dir="auto">
<li>App defines only one style</li>
<li>Api (remote backend) defines a "theming" option, e.g. "logo", "primary color", et cetera.</li>
</ul>
<p dir="auto">In my opinion I should be able to interpolate the styles argument just like templates, taken the angular.io website example, something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
      selector: 'todo-app',
      template: '&lt;span&gt;{{todos.length}}&lt;/span&gt;',
      styles:['a { color: {{styles.someAttr}}; }'],
      directives: [TodoList, TodoForm]
})
export class TodoApp {
      // retrieve and set styles variable from a service
}"><pre class="notranslate"><code class="notranslate">@Component({
      selector: 'todo-app',
      template: '&lt;span&gt;{{todos.length}}&lt;/span&gt;',
      styles:['a { color: {{styles.someAttr}}; }'],
      directives: [TodoList, TodoForm]
})
export class TodoApp {
      // retrieve and set styles variable from a service
}
</code></pre></div>
<p dir="auto">Please note that these styles should be applied globally and are received in a dynamic fashion (from a service that outputs json for example).</p>
<p dir="auto">Sofar I have been unable to find a proper hook to interpolate the styles argument or render style sheets overall. Please advise.</p>