Dynamic CSS styling using calc in Angular

Issue

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?

Solution

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

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

Answered By - zainhassan