Reputation: 4756
I have been trying to set animation param using @HostBinding
decorative, but it seems not to work, what am I missing
animations: [
trigger('animateMe', [
state('void', style({ opacity: 0 })),
transition(':enter, :leave', [ // void <=> *
animate('{{ easeTime}}ms {{ transitionTimingFn }}')
])
])
]
and HostBinding
@HostBinding('@animateMe') state = {
value: 'void',
params: {
easeTime: 5000
}
};
Upvotes: 6
Views: 4694
Reputation: 2299
Animations in the host element should be handled something like this:
animations: [
trigger('toggleDrawer', [
state('closed', style({
transform: 'translateX(0)'
})),
state('opened', style({
transform: 'translateX(80vw)'
})),
transition('closed <=> opened', animate(300))
])
]
And HostBinding / HostListener
private state: 'opened' | 'closed' = 'closed';
// binds the animation to the host component
@HostBinding('@toggleDrawer') get getToggleDrawer(): string {
return this.state === 'closed' ? 'opened' : 'closed';
}
@HostListener('@toggleDrawer.start', ['$event']) startDrawerHandler(event: any): void {
console.log(event);
}
@HostListener('@toggleDrawer.done', ['$event']) doneDrawerHandler(event: any): void {
console.log(event);
}
Keeping in mind that the HostListeners will be executed on load with the event from state void (fromState: "void"), I don't know if this can be prevented from the animation declaration or if you only need to make a conditional inside the HostListeners if you want to prevent something from happening.
Upvotes: 3
Reputation: 1846
If you add a getter function to the host binding property you can set the animation params.
trigger: any;
easingTime = 5000;
@HostBinding('@animateMe')
get fn() {
return {
value: this.trigger,
params: {
easeTime: this.easingTime
}
}
};
Upvotes: 12
Reputation: 535
Unfortunately, this will not work, as the animations are created before the component is actually generated (this code is in the @Component metadata).
Any code outside the class will not be in the same scope.
Also, I am not sure, but I wouldn't have thought you could bind to an animation using @HostBinding, instead, you can use the animation callbacks like so:
<ul>
<li *ngFor="let hero of heroes"
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"
[@flyInOut]="'in'">
{{hero.name}}
</li>
</ul>
Ref: https://angular.io/guide/animations#animation-callbacks
Upvotes: 0