Here is an example of how you can incorporate Angular animations with parameters directly from the HTML file:
**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';
However, if you want to add parameters to your animation from component.ts, you may need to explore additional methods.