CODEWITHSUNDEEP
angular
amy8374
amy8374

Reputation: 1530

Angular: Correct way to use calc in style binding

What is the correct way to bind calc() to style.height, style.width in angular?

I have:

[style.height]="calc(100% - 57px)"

and getting back:

Error: Missing expected ) at column 14 in [calc(100% - 4px)]

seems like the '(' is not being escaped.

Upvotes: 16

Views: 16609

Answers (4)

Nirali Gajjar
Nirali Gajjar

Reputation: 116

If you want to use calc() in inline style then try this one for height or width

for height:

[ngStyle]="{'height': 'calc(100% - 57px)'}"

for width:

[ngStyle]="{'width': 'calc(100% - 57px)'}"

Upvotes: 2

Rusty Rob
Rusty Rob

Reputation: 17173

It needs to be a string, use ''

[style.height]="'calc(100vh - ' + (checkedTaskTracker.checkedTasks.length > 0 ? '240px': '171px') + ')'"

Upvotes: 7

indreed
indreed

Reputation: 1245

You can also try using ngStyle instead:

[ngStyle]="{'height': 'calc(100% - 57px)'"}

Upvotes: 11

mikeo
mikeo

Reputation: 1075

I know the OP says they gave up on this but for anyone else who comes across this (this ranked high on Google for me), the answer here answers the question:

Angular 2, Adding calc() as inline style. Unsafe interpolation using parentheses

The DOM Sanitizer is removing it, so it must be bypassed. 

  import {DomSanitizer} from "@angular/platform-browser";

  constructor(private sanitizer: DomSanitizer) {
      this.someHeight = this.sanitizer.bypassSecurityTrustStyle("calc(100% - 57px)");
  }

  public someHeight: string;

or directly on the template:

[style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - 57px)')"

Upvotes: 19

Related Questions