¿Cómo se puede vincular el estilo transform: translateX()
en Angular?
Lo que he probado:
<div [style.transform]="translateX({{x}})">
y
<div [style.transform.translateX.px]="x">
Esto debería funcionar
<div [style.transform]="'translateX(' + x + 'px)'">
Editar
Parece que es necesario eludir la protección XSS para que esto funcione.
[ngStyle]="{'transform': 'translateX(' + transX + 'px)'}"
donde transX
es una variable componente.
La respuesta aceptada funciona, pero puede hacer que su código sea mucho más limpio utilizando métodos como enlace de sus propiedades de estilo.
<div *ngFor="let il of imageLayers"> <img class="divFloatLayer" [src]="il.img_src" [style.left]="il.getLeftPx()" [style.top]="il.getTopPx()" [style.z-index]="il.getZindex()" [style.transform]="il.getTransform()" /> </div>
En la clase que contiene los valores a los que debe vincularse:
getLeftPx() { return `${this.left}px` ; } getTopPx() { return `${this.top}px` ; } getZindex() { return `${this.z_index}` ; } getTransform() { return `translateX(${this.x}px)`; }