CODEWITHSUNDEEP
angular
YSFKBDY
YSFKBDY

Reputation: 886

Dynamic CSS styling using calc in Angular

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?

Upvotes: 0

Views: 478

Answers (1)

zainhassan
zainhassan

Reputation: 1780

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

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

Upvotes: 1

Related Questions