Kookehs Kookehs - 1 year ago 51
CSS Question

Is there a safe workaround to Angular 2's style attribute sanitization?

I'm currently learning Angular 2, and I was attempting to load HTML with a style attribute from a property in the component.

items.push('<span style="color: ' + colorHex + ';">test</span>');

<div class="itemList" *ngFor="let item of items">
<pre [innerHtml]=item></pre>

After doing some research it appears Angular 2 sanitizes style attributes to prevent security issues. Am I approaching this wrong? How else can I attach colors to text? I was using the
tag, but it's deprecated in HTML5.

Answer Source

Have you tried using the style binding target(search for 'style.' on the page)? It shows how to set individual style properties on your html element. For example here is a way to apply the color style you asked about.

<div class="itemList" *ngFor="let item of items">
    <pre [style.color]="colorHex">Test</pre>