title: How to use bypassSecurityTrustStyle correctly
body: <p>I am trying to work with some simple CSS and JavaScript examples in an Angular way.</p>
  
  <p>The plain JavaScript way to change the background color on an element would look something like this:</p>
  
  <pre><code>this.container.style.backgroundColor = color;
  </code></pre>
  
  <p>The color is created randomly in JavaScript.
  The template could look like this:</p>
  
  <pre><code>&lt;div id="container"
    (click)="changeColor($event)"
    [style]="{'color': color}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, this will give the following error:</p>
  
  <pre><code>WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).
  </code></pre>
  
  <p>Using this function does not work:</p>
  
  <pre><code>this.color = this.sanitizer.bypassSecurityTrustStyle(this.color);
  </code></pre>
  
  <p>Creating a function to do it also does not work using this style [style.color]="transform(color)"</p>
  
  <pre><code>transform(value) {
     return this.sanitizer.bypassSecurityTrustStyle(value);
  }
  </code></pre>
  
  <p>I have created <a href="https://plnkr.co/edit/ssLM0myUsg8NDq4l3zJI?p=preview" rel="noreferrer">a plunker</a> to demonstrate this problem.</p>
  
  <p>The correct behaviour using plain JavaScript is shown <a href="https://www.kirupa.com/html5/triggering_animations_javascript.htm" rel="noreferrer">in the first example on this page</a></p>
  
  <p>What is the correct way to do this?  Any help would be much appreciated.</p>