Angular parameters not being resolved in animation

Question

In my project's animations.ts file, I have the following constant that defines my TypeAnimation:

export const TypeAnimation = [
    trigger('type', [
        state('void', style({ 'width': '0ch' })),
        state('*', style({ 'width': '28ch' })),
        transition('void => *', animate('3s steps(28)')),
        transition('in <=> out', animate("3s", keyframes([
            style({ 'border-color': 'white', offset: 0 }),
            style({ 'border-color': 'transparent', offset: 0.5 })
        ])))])
]

Now, what I wanted to achieve was to dynamically pass a parameter value called strLen. So I changed the above code into the following:

export const TypeAnimation = [
    trigger('type', [
        state('void', style({ 'width': '0ch' })),
        state('*', style({ 'width': '{{strLen}}ch' }), { params: { strLen: 0 } }),
        transition('void => *', animate('3s steps({{strLen}})')),
        transition('in <=> out', animate("3s", keyframes([
            style({ 'border-color': 'white', offset: 0 }),
            style({ 'border-color': 'transparent', offset: 0.5 })
        ])))])
]

In my component's html, I am passing the parameter as follows:

<span class="caret" 
    [@type]="{value:state, params:{strLen: curlStr.length}}" (@type.done)="onEnd($event)">{{curlStr}}
</span>

Getting to the problem:

I am having problems specifically with this line:

transition('void => *', animate('3s steps({{strLen}})'))

core.js:5980 ERROR TypeError: Failed to execute 'animate' on 'Element': 'steps({{strLen}})' is not a valid value for easing
    at WebAnimationsPlayer._triggerWebAnimation (browser.js:4505)
    at WebAnimationsPlayer._buildPlayer (browser.js:4488)
    at WebAnimationsPlayer.play (browser.js:4517)
    at TransitionAnimationPlayer.play (browser.js:3624)
    at browser.js:3408
    at Array.forEach (<anonymous>)
    at TransitionAnimationEngine._flushAnimations (browser.js:3401)
    at TransitionAnimationEngine.flush (browser.js:3047)
    at InjectableAnimationEngine.flush (browser.js:3909)
    at animations.js:212

I noticed that the strLen parameter value was being passed correctly to the animations.ts file, because when I changed the above line to:

transition('void => *', animate('3s {{strLen}}'))

I got this message displayed:

- The provided timing value "3s 28" is invalid.

How would I go around this?

Any help would be much appreciated.

question from:https://stackoverflow.com/questions/65859019/angular-parameters-not-being-resolved-in-animation

Answer 1

Waitting for answers