Search code examples
htmlcssangularmarginngfor

Trying to get style="margin-left:{{data}};" to work

index.ts
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']]

index.html
<div *ngFor="let bubble of bubbles">
      <div class="bubble" style="margin-left:{{bubble[0]}};">
      </div>
</div>

I am trying to have the margin-left style use the data from the array bubbles[0].

The for loop gives ['80%','Meeting'] in that layout so I have tried to set the 0 element of that array to the margin-left style but this isn't working. Is there another way to do this process?

Solution

  • use [ngStyle] instead of style. documentation here.

    <div class="bubble" [ngStyle]="{'margin-left': bubble[0]}">