Dynamic CSS styling in Angular

Question

first of all I got a list with items in it. I loop through that list to fill a table (ngFor). Now I have a multiplier which identifies how much padding each tr has. Like first level has 0 padding second has 10 etc.

Is there a way to do that in the ngFor from an item out of the list? Like this:

<tr>
   <td style="padding-left: 10px * {{ item.MultiplyLevel }}></td>
</tr>

I know that the code above does not work and that there is this:

[style.padding-left.px]="10"

I also tried the above and just multiply it but it didn't work. I could add a new attribute to the item in which I store the amount of padding but I would like to get it calculated in the view.

Answer 1

<div *ngFor="let a of ar">
  <span [style.padding-left.px]="[ 10 * a]">aaaa</span>
</div>

where ar is just a common array that hold the offset.

ar = [1,3,5];

Stackblitz: https://stackblitz.com/edit/angular-rs1csq