Angular CDK Overlay: 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.
------------------------------------------------------------------------------
👕 Funny Angular tees, hoodies, stickers, mugs and more! (https://devdrip.creator-spring.com)
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos: • The Angular CDK Overlay
------------------------------------------------------------------------------
🔗 Demo Link:
https://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 #angulartutorial #cdk
Watch video Angular CDK Overlay: Adding animations online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 26 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,55 once and liked it 4 people.