Angular: Correct way to use calc in style binding

Question

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.

Answer 1

You can also try using ngStyle instead:

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

Answer 2

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)')"