Angular 4 Template Binding With ES6 Template String

Something I could do in Vue, but doesn't appear to work in Angular 4:

It seems

Solution 1:

It would be great if this were possible. In the meanwhile, I think a similarly elegant solution would be to have a style object defined in the component class and that is then bound to ngStyle in the template.

/* my.component.ts */
export class MyComponent implements OnInit {
  myStyle: Object;

  ngOnInit() {
    myStyle = {'transform': `translate3d(${gridTranslateX}px, 0, 0)`};
  }
}

/* my.component.html */
<div class="time-translate" [ngStyle]="myStyle">...</div>

Share