Dynamically change CSS style height

Question

I am making users' leaderbord:

 <div class="user">
  <ul id="jogadores" *ngFor="let u of sortedUsers$; let i=index;" (click)="routeToUser(u.id)">
    <li class="user">
      <img class="gravatar" src="https://www.gravatar.com/avatar/{{u.imgUrl}}?d=https://www.1plusx.com/app/mu-plugins/all-in-one-seo-pack-pro/images/default-user-image.png" />
      <div class="progressBar">
        <span style="height: 100%;">
          <i></i>
          <b>{{sortedUsers$[i].points}}</b>

        </span>
      </div>
      <span class="username">
        <strong>{{sortedUsers$[i].username}}</strong>
      </span>
    </li>
  </ul>
</div>

Each <ul> element has some values which are coming from array. All evening I've been trying to change <span style="height: 100%;"> value to some value from {{sortedUsers$[i].points}} so each progress bar would change according to how many points user has. I tried passing value:

<span style="height: {{sortedUsers$[i].points}} %;">

also reaching it with jQuery, but also failed.

Answer 1

Check out ngStyle

Update an HTML element styles.

<span [ngStyle]="{'height': `${sortedUsers$[i].points}%`}"></span>

Your value would look like the following, where each number represent a percent: sortedUsers$[i].points = 100 // Percent