Angular CDK - Overlay Module Pt.2 (Advanced, 2020)

This is the second video about the Overlay module which is a part of #Angular Material CDK. In this tutorial, we will have a look at such advanced topics as overlay positioning, overlay position strategies, handling of scrolling strategies and creating our custom one, and many other tips and tricks. Knowing all those patterns will allow you to reuse the whole power of Angular Material CDK as much as possible and create very flexible and performant components.
Subscribe to my channel if you find my videos useful!
Thank you and enjoy watching :)

🕒 Time codes:
0:00:00 - Intro
0:01:20 - Overlay keydown handling
0:06:43 - Overlay positioning
0:12:58 - Position Strategies
0:17:31 - Scrolling Strategies

✅ Angular Material CDK - Overlay Module Pt.1:

✅ Check out my video "My TOP 5 Angular Interview Questions"

✅ Check out my videos about Angular Material Library:

✅ Check out my videos about Angular CDK:

🔗 Link to source code:

#angularmaterial #angularcdk #webdevelopment

[DecodedFrontend]

Guys, forgot to mention in the video one important thing: Do not forget in `ngOnDestroy` lifecycle hook to call method provided by focusMonitor service, otherwise you will get a memory leak.

[User-vitv]

Probably the best tutorial I’ve seen on this topic! Many thanks😊

[IhorKevin]

Я з цими оверлеями відкрив для себе Матеріал заново. Надзвичайно корисні туторіали, продовжуй.

[Qwrtypop]

Which extension are you using to provide intellisense for binding functions to your click event in the template? 14:17

[tekforge]

Hi Dmytro, can you show us please a virtual scroller in an overlay?
I have a custom autocomplete with a dynamic mat-table in its overlay (dropdown). But it has a performance problem when the number of options is big. Lay loading (progressive rendering) was not an ideal solution for it because the delay made the users think that some options do not exist while they are not loaded yet.
I would like to use virtual scrolling in it, and appreciate your feedback!

[pradeepkumar-cujp]

Thanks for the wonderful video! I have recently came across a bug regarding the ESC key when used with JAWS (Accessibility testing). It works fine when we test it normally but need to press ESC key twice when used with JAWS.
Please let me know if you've faced similar issue..

[Romanx]

Hi, great lessons!
Are you planning to make a video about text inputs?

[glennolazo]

Hi, Thanks a lot for this wonderful tutorial.
I have a question. How to apply the backdrop only on the overlay panel element and not on the whole body? Thanks and more power

[nagarjunvenishetti]

Hi, Is there any way to attach the overlay container to any other dom element (not to the body tag)

[GuroBeridze]

When i assign false to cdkConnectedOverlayOpen and
if i have angular animation(for example: fadeOut) binded to template, my custom panelClass which has ConnectedPosition, remove immediately, it is not waiting to animation end.

any suggestion?

[gouthamcold]

A quick question, is there a way to drag or resize the overlay? I tried multiple solutions like having a cdkDrag inside overlay and with some tweaks the overlay moves but if I add css resize it’s not resizing. If you found a way please share that. Thanks :)

[tim-business]

How to focus to the fisrt element in the open panel with the arrow key for exemple. I don't know why but the usual method with @Viewchild to select the panel and listen keydown events with and use focuse monitor doesn't work for me :( Any ideas ?

[NightmareCrab]

The overlay repositioning lags behind when scrolling outside of it. Trying to get it to function like every normal dropdown ever and not lag is quite frustrating.

[gund_ua]

Hey Dmytro! Very nice overview of the CDK Overlays!


BTW regarding your finding of memory leak - I checked further and discovered that it very well may be a memory leak!
I also found an open issue about memory leak but they did not found yet the reason why - so I've posted there a commend with the reference to your video =)