title: Angular 2 - Dynamically adding inline CSS [style.color]
body: <p>I have a Array that I loop through. My object consist colors.
  I would like to loop though the array and dynamically set color using inline CSS. </p>
  
  <p>I've tried:</p>
  
  <pre><code>[ngStyle]="{ 'color': 'item.value'}" 
  [style.color]={{item.value}}
  [style.color]="{{item.value}}"
  </code></pre>
  
  <p>How set the color?</p>
  
  <pre><code>export class ColorSelectorComponent  {
  
      private color: string = "rgb(236,64,64)";
      private color2: string = "rgb(236,64,64)";
      private color3: string = "rgb(236,64,64)";
      private color4: string = "rgb(236,64,64)";
      private color5: string = "rgba(45,208,45,1)";
      private color6: string = "#1973c0";
      private color7: string = "#f200bd";
  
      private arrayColors: any = {};
      private selectedColor: string = 'color';
  
      constructor(private cpService: ColorPickerService) {
  
          console.log(this.arrayColors);
          this.arrayColors['color'] = '#2883e9';
          this.arrayColors['color2'] = '#e920e9';
          this.arrayColors['color3'] = 'rgb(255,245,0)';
          this.arrayColors['color4'] = 'rgb(236,64,64)';
          this.arrayColors['color5'] = 'rgba(45,208,45,1)';
      }
  
  }
  </code></pre>
  
  <p>And my compontent HTML </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let item of arrayColors | keys"&gt;           
          &lt;div class="color-drop" [style.color]="{{item.value}}" &gt;&lt;/div&gt;
           Key: {{item.key}}, value: {{item.value}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>