2

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?

Improve this question
1
  • 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. Commented May 4, 2017 at 23:10

1 Answer 1

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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