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

Calculated styles should be sanitized.

Here is the solution for you:

import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  selector: 'my-app'
  template: `
    <div [style.width]="width">
      <h2>Hello {{name}}</h2>
    </div>
  `
})
export class App {

  private width:string;

  constructor(sanitizer: DomSanitizationService) {
    this.name = 'World'
    this.width = sanitizer.bypassSecurityTrustStyle("calc(10% - 20px)");
  }
}

You can also try using ngStyle instead:

[ngStyle]="{'width': 'calc(' + percent + '% - 20px)'}"

And just bind 'percent' value to the input value.