0

I have written a code which is properly rendering the UI, but inside demo.component.html file I am getting an error as "property value expected" and "at-rule or selector expected". I tried changing it to [style.width]="{{d.graph_percentage}}" but it is not working.

demo.component.html:

<tr *ngFor="let d of data">
  <td>
   <div class="progress">
     <div aria-valuemax="100" aria-valuemin="0"
         aria-valuenow="100"
         class="progress-bar progress-bar-striped {{d.graph_color}}"
         role="progressbar"
         style="width: {{d.graph_percentage}} ">
     </div>
   </div>
  </td>
</tr>

demo.component.ts: It has json as:

public data = [{
    "graph_percentage": "10%",
    "graph_color": "bg-danger"
}];

here is ss from code editor:

error from code editor

aac
  • 574
  • 2
  • 6
  • 18
  • 3
    Use: `[ngStyle]="{'width': d.graph_precentage}` source: https://angular.io/api/common/NgStyle – ShayD Apr 11 '21 at 13:00
  • 1
    Also take a look here: https://stackoverflow.com/a/56484129/5107490 – ShayD Apr 11 '21 at 13:08
  • @ShayD, [style.width.%]="30" this worked but [style.width.%]="{{d.graph_precentage}}", not working. Also I have removed % sign from my json file. – aac Apr 11 '21 at 13:16
  • 1
    Hey Thanks, @ShayD, It worked with [style.width.%]="d.graph_percentage" – aac Apr 11 '21 at 13:19

0 Answers0