Angular Animations Tutorial: Start and Done Events

With Angular we have a powerful animation framework that we can leverage to do all sorts of crazy things. Sometimes, when using these animation features, we need to do things when the animation starts, or when it ends, or both. Well, good news for us, we have this ability in Angular. We have the animation start and done events that fire at those times, and this allow us to program against them as needed. In this video we’re going to learn how they work and how to use them. Alright, let’s get to it!
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos:
1.) Learn the Basics ( • Angular Animations Tut... )
2.) Enter & Leave Animations ( • Angular Animations Tut... )
3.) The Keyframes Function ( • Angular Animations Tut... )
4.) Query and Stagger Functions ( • Angular Animations Tut... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Link:
stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:15 - The Demo Application
1:48 - Adding the wobble animation with the keyframes() function
5:53 - Using the animation done event to reset the trigger variable after the animation completes
6:56 - Using the animation start event to bind a global class to the animating element
10:08 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation #keyframeanimation #animationevents