Host binding animations in Angular
Angular provides many ways to animate things. In this video we look specifically at adding enter and leave animations to a component as it gets added and removed from the DOM. We do this with the Angular @HostBinding decorator and the :enter and :leave aliases for animations. Additionally, we look at an example reacting to Angular animation start and done callback events on the component host with the @HostListener decorator. Alright, let’s check it out!
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos: • The Angular CDK Overlay
------------------------------------------------------------------------------
🔗 Demo Link:
https://stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
0:43 – :enter and :leave Animation Example
1:17 – Adding an Angular Animation Trigger
1:41 – Using the Angular @HostBinding Decorator to Bind an Enter and Leave Animation to a Component Host
3:09 – Fixing Enter and Leave Animations within an Angular ngFor
4:13 – Reacting to Animation Start and Done Callback Events on a Component Host using the Angular @HostListener decorator
------------------------------------------------------------------------------
#angular #angulartutorial #animation