title: Css styles are not applied dynamical using [style.width.%] or [ngStyle] in Angular Material
body: <p>I am using return function to call and html </p>
  
  <p>Return function in .ts</p>
  
  <pre><code> GetHtmlString(user) {
      return `
          &lt;div class="custom-progressbar"&gt;
            &lt;div *ngIf="user.HFPassed &gt; 0"  [ngStyle]= "{ 'width':GetFlexValue(user.HFPassed, user) }" class="stat-bar bar-pass"&gt;&lt;/div&gt;
        &lt;div *ngIf="user.HFInProgress &gt; 0" [style.width]="GetFlexValue(user.HFInProgress, user)" class="stat-bar bar-inprogress"&gt;&lt;/div&gt;
        &lt;div *ngIf="user.HFTodo &gt; 0" [ngStyle]= "{ 'width':GetFlexValue(user.HFTodo, user) }" class="stat-bar bar-todo"&gt;&lt;/div&gt;
        &lt;div *ngIf="user.HFExpiring &gt; 0" [style.width]="GetFlexValue(user.HFExpiring, user)" class="stat-bar bar-expiring"&gt;&lt;/div&gt;
        &lt;div *ngIf="user.HFExpired &gt; 0" [style.width]="GetFlexValue(user.HFExpired, user)" class="stat-bar bar-expire"&gt;&lt;/div&gt;
        &lt;div *ngIf="user.HFFail &gt; 0" [style.width]="GetFlexValue(user.HFFail,user)" class="stat-bar bar-fail"&gt;&lt;/div&gt;
          &lt;/div&gt;`;
    }
  </code></pre>
  
  <p>I simple set some value in <code>GetFlexValue(user.HFPassed, user)</code> like <code>50</code> i still didn't get width attribute when i inspect my above <code>div</code></p>
  
  <p>Simple scenario is i create that html inside my angualr material table, and  call that fuction in my td to insert html. Used both <code>[ngStyle]</code> and <code>[style.width]</code> but of no use...</p>
  
  <p>I am using Angular Material also tried all solution form <a href="https://stackoverflow.com/questions/35882670/dynamically-updating-css-in-angular-2">Dynamically updating css in Angular 2</a></p>