title: How to pass value from typescript code to css in Angular 6
body: <p>I know I've to use <code>ngClass</code> or <code>ngStyle</code> but I'm not able to figure out how to pass that value. Here is my code.</p>
  <p><strong>strip.component.ts</strong></p>
  <pre><code>import { ... } from '@angular/core';
  
  @Component({
      selector: 'app-strip',
      templateUrl: './strip.component.html'
  })
  export class StripComponent implements OnInit {
      ...
      @Input() widthValue: any; // getting this from parent component
  
      staticKpi:{...}=[][]
  }
  </code></pre>
  <p><strong>strip.component.html</strong></p>
  <pre><code>&lt;ng-container&gt;
      &lt;div *ngFor=&quot;let row of staticKpi&quot;&gt;
          &lt;div class=&quot;rows&quot; *ngFor=&quot;let item of row&quot;&gt;
              &lt;div class=&quot;col-12&quot;&gt;
                  &lt;h2&gt;{{widthValue}}&lt;/h2&gt; &lt;!-- this is printing correct value--&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>I've to decide width of <em>rows</em> class dynamically in scss something like this:</p>
  <p><strong>strip.component.css</strong></p>
  <pre><code>.rows {
      display: inline-block;
      width: calc(100%/widthValue); // &lt;----- here
      text-align: left !important;
      background: red;
  }
  </code></pre>
  <p>I could have used <code>col-{{widthValue}}</code> in HTML but no, I've been told that it has to be from the width property from css.
  Please help me. I'm not sure how to use ngClass here.</p>