Angular2: How to use css calc() with some component value?

Question

I want to calculate div height based on the component value by using calc CSS function. The error it gave me:

TypeError: co.calc is not a function

My code:

<div [ngStyle]="{'height': calc(100% - + assetScreenSize + px)}">
</div>

`[ngStyle]="{'height': 'calc(100% -' + assetScreenSize + 'px)'}"` — Stan, Aug 02 '17 at 09:23
Thanks, Need to add space after minus sign ` - ` . correct: `[ngStyle]="{'height':'calc(100% - ' + assetScreenSize + 'px)'}"` — PARAMANANDA PRADHAN, Aug 02 '17 at 09:50

Aslam · Answer 1 · 2019-02-18T14:41:24.360

10

Your syntax is incorrect. The correct way would be:

<div [ngStyle]="{'height': 'calc(100% -' + assetScreenSize + 'px)'}">
</div>

edited Feb 18 '19 at 14:41

answered Aug 02 '17 at 09:42

Aslam

You have an extra quote. It should be {'height': 'calc(100% -' + assetScreenSize + 'px)'} – mila Feb 17 '19 at 21:37

1 Answers1