-1

I know this question was already asked regarding calculation using pixles. I want to know if there is anyway you can do calculations using percentages and pixels in the style binding target in Angular2.

I've tried:

[style.width]="100%-16+'px'"
[style.width.px]="100%-16"

I also tried this:

@Input() width: number;
_width = 'auto';    
this._width = this.width ? this.width + 'px' : 'auto'

width="calc(100% - 16)"
width="calc(100% - 16px)"
width="100% - 16"
width="100% - 16px"
Nicole Mertz
  • 1
  • 2

1 Answers1

0

I did some testing and it should work. Usually I use this in CSS classes so I was not sure so I tested it in minimalist app and even in style it works.

style="background-color: black; width: calc(100% - 1000px);"

The problem you are facing thought is that you will receive the width from a parent?

Using the ngStyle directive seems to do it right. Tested and works.

<div [ngStyle]="{ 'width': 'calc(100% - ' + width + 'px)' }">
CodeMylife
  • 1,321
  • 1
  • 9
  • 12