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: github.com/angular/angular/issues/7558 The recommendation was to handle this as a property in the component instead. — DeborahK
– DeborahK, Commented May 4, 2017 at 23:10

filoxo · Accepted Answer · 2017-05-05 02:29:12Z

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>

answered May 5, 2017 at 2:29

filoxo

8,3983 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user358089 Over a year ago

Sad, it was so nice to have that in Vue.

Collectives™ on Stack Overflow

Angular 4 Template Binding with ES6 Template String

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related