Angular: Correct way to use calc in style binding

You can also try using ngStyle instead:

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

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