Angular 4 Template Binding with ES6 Template String

Question

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

<div class="time-translate" [ngStyle]="{transform: `translate3d(${gridTranslateX}px, 0, 0)`}">

It seems I have to go back to doing it the old Angular 1.x way:

<div class="time-translate" [ngStyle]="{transform: 'translate3d(' + gridTranslateX + 'px, 0, 0)'}">

Is there a way to use ES6 template strings in an Angular 4 html template?

I submitted an issue similar to this (for interpolation) back in March of 2016, but it was closed with no reason. You can check it out here: https://github.com/angular/angular/issues/7558 The recommendation was to handle this as a property in the component instead. — DeborahK, May 04 '17 at 23:10

score 1 · Accepted Answer · answered May 05 '17 at 02:29

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>

Sad, it was so nice to have that in Vue. – May 05 '17 at 22:40 — , May 05 '17 at 22:40

Angular 4 Template Binding with ES6 Template String

1 Answers1

Linked