Angular 4.2.4 animations with params don't work

Question

I have the following animation:

animations: [
    trigger('moveSomething', [
        state('true', style({left: '{{leftPosition}}' , opacity: 0.5}), {params: {leftPosition: 0}}),
        transition('* => *', animate(300))
    ])
]

And this is the html

[@moveSomething]="{value: shouldMove, leftPosition: leftPosition}"

I know for sure the animation is triggered because I see the opacity changing. I read a bunch of documentation and answers on stack overflow and can't seem to see the problem.

I want to mention that the leftPosition is an integer, but I also tried with a variable that was string that was in this form 150px, but without success.

Any thoughts of why this isn't working?

Does the element have `position: absolute`, `relative`, or `fixed`? Otherwise the `left` property may not do anything. — Explosion Pills, Sep 19 '18 at 18:58
Yes, this works if instead of the parameter I use `{left: '50px'}` — raduanastase, Sep 19 '18 at 18:59
Is it possible that the third point from the 4.2.6 release to fix this? https://github.com/angular/angular/blob/master/CHANGELOG.md#426-2017-07-08 — raduanastase, Sep 19 '18 at 19:11

score 0 · Accepted Answer · answered Sep 20 '18 at 18:46

So the problem was that I thought that I had Angular 4.2.4, but instead it was 4.4.7 and I was trying to send the parameters the way they were sent before 4.4.6.

The final solution was

animations: [
    trigger('moveSomething', [
        state('true', style({left: '{{leftPosition}}px' , opacity: 0.5}), {params: {leftPosition: 0}}),
        transition('* => *', animate(300))
    ])
]

And the HTML

[@moveSomething]="{value: shouldMove, params: {leftPosition: leftPosition}}"

Angular 4.2.4 animations with params don't work

1 Answers1