How to create @angular/animations with parametres frome the component.ts?

Question

I know how to add an agular animations with parametres from HTML, as follows:

**Animations.ts** 

trigger('slowXMove', [ state('posX1State', style({ left: '{{posX1}}px' }), {params: {posX1: '0px'}}), state('posX2State', style({ left: '{{posX1}}px' }), {params: {posX1: '0px'}}), transition('posX1State => posX2State', animate('2s')), transition('posX2State => posX1State', animate('2s')) ])

 trigger('slowXMove', [
    state('posX1State', style({
        left: '{{posX1}}px'
    }), {params: {posX1: '0px'}}),
    state('posX2State', style({
        left: '{{posX1}}px'
    }), {params: {posX1: '0px'}}),
    transition('posX1State => posX2State', animate('2s')),
    transition('posX2State => posX1State', animate('2s'))
])

HTML

@HostBinding('@myanimation') state= 'state1';

but, how can I add Parametres to my animation from component.ts?

Answer 1

Finally I got it.

Componet.ts

 @HostBinding('@myanimation') myanimation;
       this.myanimation= {
        value: 'state1',
         params: {
          duration: '1s ease-in', transform: '0px'
         }
       };