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