how to fix progess bar class with problem in ionic 4 and css?

Issue

Hello i want to do a progress bar that get the with every time from a ngFor list that why i make this css

.first{
height: 10px;
width: 100%;
background: #ddd;

}
.second{
height: 10px;
background: #009200;
}

and this is my code in html

 <div  *ngFor=" let rec of myComplain">


    <ion-list >

        <ion-item class="box">

          <h2><ion-row ><div class="tile"> Type : &nbsp; </div> {{rec.type}} </ion-row> </h2>
          <h2 ><ion-row> <div class="tile"> Description: &nbsp;</div>  {{rec.description}}</ion-row> </h2>
          <h2  *ngIf="rec.avancement === 'Pending Team leader validation'"><ion-row><div class="tile"> Progress : &nbsp;</div> In progress </ion-row></h2>
          <h2 *ngIf="rec.avancement != 'Pending Team leader validation'" ><ion-row><div class="tile"> Progress : &nbsp;</div>  {{rec.avancement}}</ion-row></h2>
          <h2><ion-row><div class="tile"> Project: &nbsp; </div>{{rec.nameProjet}}</ion-row> </h2>
          <h2><ion-row><div class="tile"> Created : &nbsp;</div> {{ rec.created_at }} </ion-row></h2>
          <h2><ion-row><div class="tile"> Progress: &nbsp;</div> {{ rec.progress }}% </ion-row></h2>
          <br>

          <div class="first">
            <div class="second" style.width="rec.progress%;"></div>
            </div>


      </ion-item>
      <hr>
    </ion-list>

  </div>

the problem is i want to read rec.progress in the style.with every time and dosen't work any body know how i can do this please ?

Solution

The syntax is [style.width.%]="value".

So in your case:

<div class="second" [style.width.%]="rec.progress"></div>

Answered By - Sébastien