Angular4 - Calculation in style bindings

Question

Is there anyway you can do calculation in the style binding target in Angular4 ?

I've tried

[style.width]="{{1+1}}"

[style.width]="{{1+1}}px"

[style.width]="{{1px+1px}}"

score 5 · Accepted Answer · answered Jun 25 '17 at 04:58

5

You can use [style.width.px]="1 + 1" in order to achieve that.

answered Jun 25 '17 at 04:58

QoP

27,388
16
74
74

Thanks, do you also perhaps know how to round a number in Angular4 bindings? – ekclone Jun 25 '17 at 04:59
there is a [built-in pipe](https://angular.io/api/common/DecimalPipe) for that, but maybe you'll need to create your own pipe like [this](https://stackoverflow.com/questions/41027749/angular-2-how-round-calculated-number) – QoP Jun 25 '17 at 05:06

score 1 · Answer 2 · answered Jun 25 '17 at 05:10

this should work

   [style.width]="1+1+'px'"

Basically, when you're using [] , the must be expression and you should never put {{}} in the value, and this is a general Angular2 rule when you're using attribute binding.

[style.width]="{{1+1}}"   is wrong because of `{{}}` in the value

score 0 · Answer 3 · answered Jul 27 '17 at 07:31

[style.height.px]="200"
[style.height.px]="200 + 50"
[style.height.px]="_commonService.screenHeight"
[style.height.px]="_commonService.screenHeight + 50"
[style.height.px]="_commonService.screenHeight - (isHomePage == true?80:140)"
/* Other Examples **/
[ngStyle]="{'margin-top': isHomePage == true ? '0px' : '60px' }"

score 0 · Answer 4 · answered Jul 28 '17 at 02:42

0

You should avoid doing style calculation inside your view. Simply create a function to handle this calculation and only return the result in view.

answered Jul 28 '17 at 02:42

Danial Kalbasi

434
5
9

1

Please provide some sort of code description to improve this answer. – Ekaba Bisong Jul 28 '17 at 03:01

Angular4 - Calculation in style bindings

4 Answers4