1

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>
</div>

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 <font> tag, but it's deprecated in HTML5.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Kookehs
  • 84
  • 5
  • 1
    Possible duplicate http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax – Joel Brewer Jul 16 '16 at 04:53

1 Answers1

3

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>
</div>
Dan Simon
  • 824
  • 6
  • 7