Css styles are not applied dynamical using [style.width.%] or [ngStyle] in Angular Material

Question

I am using return function to call and html

Return function in .ts

 GetHtmlString(user) {
    return `
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0"  [ngStyle]= "{ 'width':GetFlexValue(user.HFPassed, user) }" class="stat-bar bar-pass"></div>
      <div *ngIf="user.HFInProgress > 0" [style.width]="GetFlexValue(user.HFInProgress, user)" class="stat-bar bar-inprogress"></div>
      <div *ngIf="user.HFTodo > 0" [ngStyle]= "{ 'width':GetFlexValue(user.HFTodo, user) }" class="stat-bar bar-todo"></div>
      <div *ngIf="user.HFExpiring > 0" [style.width]="GetFlexValue(user.HFExpiring, user)" class="stat-bar bar-expiring"></div>
      <div *ngIf="user.HFExpired > 0" [style.width]="GetFlexValue(user.HFExpired, user)" class="stat-bar bar-expire"></div>
      <div *ngIf="user.HFFail > 0" [style.width]="GetFlexValue(user.HFFail,user)" class="stat-bar bar-fail"></div>
        </div>`;
  }

I simple set some value in GetFlexValue(user.HFPassed, user) like 50 i still didn't get width attribute when i inspect my above div

Simple scenario is i create that html inside my angualr material table, and call that fuction in my td to insert html. Used both [ngStyle] and [style.width] but of no use...

I am using Angular Material also tried all solution form Dynamically updating css in Angular 2

score 0 · Answer 1 · answered Apr 02 '20 at 12:32

Please use [ngStyle], this will set the width of the containing element to a percentage value returned by an expression.

GetHtmlString(user) {
    return `
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0" [ngStyle]="{'width.%': GetFlexValue(user.HFPassed, user)"></div>
        </div>`;
  }

Reference links - https://angular.io/api/common/NgStyle

Gourav Garg · Answer 2 · 2020-04-02T16:14:40.177

0

Actually you are not calling GetFlexValue function as this is complete string.

Also, you need to sanitize this html before using.

import { DomSanitizer } from '@angular/platform-browser';

To do so use as below:

getHtmlString(user) {
  return this.sanitized.bypassSecurityTrustHtml(`
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0"
          style="width:` + this.GetFlexValue(user.HFInProgress, user) + `px"></div>
        </div>`);
}

Here is the stackblitz link

edited Apr 02 '20 at 16:14

answered Apr 02 '20 at 13:22

Gourav Garg

2,856
11
24

Tried that but of no use :( – Awais Apr 02 '20 at 14:34
Added link now. – Gourav Garg Apr 02 '20 at 16:15

score 0 · Answer 3 · answered Apr 10 '20 at 12:45

How about using [style.width.%]="GetFlexValue()"

i.e HTML File

<div class="box" [style.width.%]="GetFlexValue()" ></div>

Component File

export class AppComponent  {
  constructor(){}

  GetFlexValue(){
    return 50;
  }
}

stackblitz: https://stackblitz.com/edit/angular-ncr4nf

Css styles are not applied dynamical using [style.width.%] or [ngStyle] in Angular Material

3 Answers3