Having trouble with css calc() with angular 5 parsing

Question

I need to add a margin to an element with some calculations as below:

[ngStyle]="{'margin-left': calc(sustainScrore && sustainScrore.scoring && sustainScrore.scoring.score ? sustainScrore.scoring.score + '%' : '0%')}"

This seems to throw an error :

ERROR TypeError: _co.calc is not a function Looking for a solution.

user4676340 · Accepted Answer · 2018-08-28 08:27:00Z

1

[ngStyle]="{ 'margin-left': 'calc(' + (sustainScrore?.scoring?.score || '0') + '%)' }"

This should do the trick.

Your issue was not considering calc as a string : Angular was looking for a funtion to call, while you wanted to create a CSS property. I also reduced your code with the safe navigation operator, leaving you with cleaner code.

if you want to reduce it further, use the style.XXX notation :

[style.margin-left]="'calc(' + (sustainScrore?.scoring?.score || '0') + '%)'"

answered Aug 28, 2018 at 8:27

user4676340

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

1 Comment

user4676340 Over a year ago

No problem, if you think it derserves it, consider marking my answer as the solution in order to help people having the same issue resolve it !

Collectives™ on Stack Overflow

Having trouble with css calc() with angular 5 parsing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related