Angular Animations Tutorial: Adding Flexibility with Params

When working with Angular animations, have you ever found yourself needing to provide custom configurations to a specific animation? Like, what if you have something that uses a next button and you want to animate to the right in that case, but then you also have a previous button, in which case you want to animate to the left instead? Well, if you didn’t know this already, this is totally doable with Angular animation params. And in this video, I’ll show you exactly how to set them up, and 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... )
5.) Parallel Animations ( • Angular Animations Tut... )
6.) Animating to an Unknown Height ( • 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 Links:
- Before (stackblitz.com/edit/stackblit...)
- After (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:28 - The demo application
2:14 - The existing image slider animation
5:48 - Passing override parameter values to Angular animations with the params object
6:03 - Adding the animation direction property to control the params programmatically
6:51 - Adding custom params to the animation
8:03 - Wiring up the animation params in the component template
9:39 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation #animationparams