title: Set ngStyle using the value of a complex object in a ngFor - Angular 7
body: <p>I am trying to set the width of an html element that is defined in a <code>ngFor</code> loop, using a variable from the collection being iterated. My code below does not give me an error but it appears I am doing something wrong. Is this an acceptable way to set width, and if so what and I doing wrong here?</p>
  
  <pre><code>export class ColumnValue {
      value: string;
      width: string;
  }
  
  export class GridHeader {
      values: Array&lt;ColumnValue&gt; = new Array();
  }
  
  export class GridData {
      headers: Array&lt;GridHeader&gt; = new Array();
  }
  </code></pre>
  
  <p>Markup</p>
  
  <pre><code>&lt;div *ngFor="let header of gridData.headers"&gt;
    &lt;div *ngFor="let value of header.values"&gt;
       &lt;div class="gridHeader" [ngStyle]="{'width': 'value.width' }" &gt; 
          {{value.value}}
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The width is not set and when I inspect the element, I see the [object Object]</p>
  
  <pre><code>&lt;div _ngcontent-apy-c9="" class="gridHeader" ng-reflect-ng-style="[object Object]"&gt;Column Header Text 1&lt;/div&gt;
  </code></pre>