title: Angular 5 Material setting dynamic (random) colors
body: <p>I have a lightweight carousel that is showing strings (questions) from an array. I want to change the background (and potentially the foreground) colors dynamically. However, my code is causing an error...</p>
  
  <p>WARNING: sanitizing unsafe style value background:blue (see <a href="http://g.co/ng/security#xss" rel="nofollow noreferrer">http://g.co/ng/security#xss</a>).</p>
  
  <pre><code>  &lt;ngx-carousel style="width:450px" layout="column" layout-align="center center" [inputs]="carouselOne" (carouselLoad)="myfunc($event)" flex&gt;
      &lt;ngx-item NgxCarouselItem *ngFor="let Question of Questions; let i = index"&gt;
        &lt;mat-card style="background:{{getColor()}}"&gt;
          &lt;h1&gt;{{Question}}&lt;/h1&gt;
        &lt;/mat-card&gt;
      &lt;/ngx-item&gt;
      &lt;div layout="row" flex&gt;
        &lt;button NgxCarouselPrev class='leftRs'&gt;&amp;lt;&lt;/button&gt;
        &lt;button NgxCarouselNext class='rightRs'&gt;&amp;gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/ngx-carousel&gt;
  </code></pre>
  
  <p>How do I set background colors dynamically for Angular 5 Material objects?</p>