title: Angular2 Components - Dynamic Inline Styles
body: <p>I have a component that has a <code>count</code> and a <code>color</code> property. The component is supposed to display <code>count</code> number of <code>&lt;div&gt;</code>s with an inline style used to change its color to <code>color</code>.</p>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>@Component({
      selector: 'my-control',
      template: `&lt;div *ngFor="let i of dummyArray" style="color: {{color}}"&gt; COLOR = {{color}}&lt;/div&gt;`
  })
  export class MyControl {
      private _count: number;
      @Input() set count(value: string) {
          this._count = +value;
      }
      @Input() set color(value: string) {
          this._color = value;
      }
      get dummyArray(): number[] {
          let ret: number = [];
          for (let i = 0; i &lt; this._count; ++i) ret.push(i);
          return ret;
      }
      get color(): string {
          return this._color;
      }
  }
  </code></pre>
  
  <p>This renders:</p>
  
  <pre><code>&lt;my-control count="5" color="red"&gt;
      &lt;div&gt;COLOR = red&lt;/div&gt;
      &lt;div&gt;COLOR = red&lt;/div&gt;
      &lt;div&gt;COLOR = red&lt;/div&gt;
      &lt;div&gt;COLOR = red&lt;/div&gt;
      &lt;div&gt;COLOR = red&lt;/div&gt;
  &lt;/my-control&gt;
  </code></pre>
  
  <p>Now I have two issues with this:</p>
  
  <ol>
  <li><p>Is there any better way to render the <code>&lt;div&gt;</code>s <code>count</code> times without creating a dummy array?</p></li>
  <li><p>More importantly, the inline styles are not being set. If I hardcode styles like <code>style="color: red"</code>, it works. But <code>style="color: {{color}}"</code> does not. The element is rendered without any styles as you can see above.</p></li>
  </ol>
  
  <p>For #2, I have also tried using the <code>nativeElement</code>'s children as well:</p>
  
  <pre><code>@Input() set count(value: string) {
      this._count = +value;
      this.update();
  }
  @Input() set color(value: string) {
      this._color = value;
      this.update();
  }
  update(): void {
      for (let i = 0; i &lt; this._count; ++i) {
          this.renderer.setElementStyle(this.elRef.nativeElement.children[i], 'color', this._color);
      }
  }
  </code></pre>
  
  <p>But I get exception accessing the child elements as they don't exist apparently.</p>
  
  <p>How should I go about solving these issues?</p>