Home > Back-end >  Dynamic CSS styling using calc in Angular
Dynamic CSS styling using calc in Angular

Time:03-07

I have a list of items, and I am parsing them with *ngFor loop. I need to add some margin to these items base on indexes, and doing it with [style.margin-left.%].

<div *ngFor="let d of dates" [style.margin-left.%]="d.marginLeft">{{d.date | date: 'MMM'}}</div>

But this does not quite correct for me. Code is parsing like: margin-left: x% and I need something like this for end result: margin-left: calc(x% - 5px).

How can I do that?

CodePudding user response:

You can create string of calc(x% - 5px) like this.

[style.margin-left]="'calc('   d.marginLeft   '% - 5px'"
  • Related