Angular - How to define animation parameters default values?

Question

I am working with Angular animations, and to improve my animation, I need to use parameters. To do so, I did as this answer suggested, with interpolation.

Here is what I have for the state :

state('position', style({ transform: 'translateX({{translate_X}}) translateY({{translate_Y}}) skewX({{skew_X}}) skewY({{skew_Y}})' }))

component.html

<div class="iris" [@move]="{value: triggerValue, params: {translate_X: translate_X, translate_Y: translate_Y, skew_X: skew_X, skew_Y: skew_Y}}"></div>

And here is the error I didn't manage to solve :

ERROR Error: The animation trigger "move" has failed to build due to the following errors: - state("position", ...) must define default values for all the following style substitutions: translate_X, translate_Y, skew_X, skew_Y at InjectableAnimationEngine.AnimationEngine.registerTrigger (...)

So where and how should we define Angular animation parameters default values ?

Answer 1

I'm not sure if it's too late, but the as the console says, you must add a default value for the animation and you can do it by adding

{params: {your_variable_name: 'default_value'}}

in you animation state, like this:

state('in', style({height: '{{maxHeight}}px',}), {params: {maxHeight: '0'}})

Hope it helps!