Clever Geek Handbook

Convert translateX () binding in Angular 2+

How do I bind a style transform: translateX()

in Angular?

What I have tried:

<div [style.transform]="translateX({{x}})">

and

<div [style.transform.translateX.px]="x">
+4


source to share


2 answers


This should work

<div [style.transform]="'translateX(' + x + 'px)'">


Edit

It seems like you need to bypass the XSS protection for this .

+5


source


MyComponent.ts

:

@Component({
  animations: [
    trigger('slideInOut', [
        transition('void => *', [style({ transform: 'translateX(100%)' }), animate('250ms ease-out')])
    ]),
  ],
})
export class MyComponent { ... }


HTML MyComponent.html

:

<div [@slideInOut]>
0


source






More articles:


All Articles