Angular CDK Overlay Tutorial: Adding Animations

When using the Angular CDK Overlay module, you will likely want to transition the opening and closing of the overlay content. It’s something that seems like it should be pretty easy and straightforward but it’s actually a little tricky. It can’t really be transitioned with CSS only because it’s markup that gets added into and removed from the document. It’s not a simple style or class change. We need to leverage Angular animations to make it work well.
In this video I’ll show you why and I’ll show you how to make animations work for your overlays. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos:
1.) Learn the Basics ( • Angular CDK Overlay Tu... )
2.) How Positioning Works ( • Angular CDK Overlay Tu... )
3.) How to Use Scroll Strategies ( • Angular CDK Overlay Tu... )
------------------------------------------------------------------------------
💖 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:06 - The demo application
1:27 - Using an Angular :enter and :leave animation to animate the CDK Overlay
1:50 - Creating an :enter/:leave animation in the component animations metadata
3:13 - Binding the animation to the component host with the @HostBinding decorator
3:40 - The problem with the :enter and :leave animations
4:10 - Using an Angular state-based animation to animate the CDK Overlay
4:27 - Creating a state-based animation in the component animations metadata
5:29 - Triggering the state-based animation when opening and closing the CDK Overlay
7:25 - Using the Angular animation done event and an Event Emitter to close the CDK Overlay
8:38 - Making the Animation Better With the cdkConnectedOverlayTransformOriginOn @Input
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #cdk

[@iuliusciorica282]

Thank you!

[@tobi-osimosu]

Thank you Brian!
Your videos have been of great help. Well done 💯