Dynamic CSS styling using calc in Angular

Question

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?

zainhassan · Accepted Answer · 2022-03-07 07:17:11Z

2

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

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

answered Mar 7, 2022 at 7:17

zainhassan

1,7929 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic CSS styling using calc in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related