Guys, forgot to mention in the video one important thing: Do not forget in `ngOnDestroy` lifecycle hook to call `stopMonitoring(focusElementRef)` method provided by focusMonitor service, otherwise you will get a memory leak.
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!
Hi, Thank you! Yes, definitely! But I can not tell you exactly when. It is quite big topic as well, so I have to prepare it properly and it will take some time:)
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 =) Check this out - github.com/angular/components/issues/10573
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..
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?
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 connnectedOverlay.overlayKeydown() and use focuse monitor doesn't work for me :( Any ideas ?
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 :)
Hi Goutham! Thank you for your comment. I don’t have a quick solution for you right now because I have never faced such a use case before. I will try to find some time for investigation and once I find something I will let you know😉
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.
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
Hey! Thanks for such a nice feedback :) Do I understand right that you want to get rid of this dark surface and apply the dark background to the panel (where the list with cities in the video)? If so, than apply [cdkConnectedOverlayHasBackdrop]="false" to your cdkConnectedOverlay - it will remove backdrop and then you can via cdkConnectedOverlayPanelClass attach some class like cdkConnectedOverlayPanelClass="my-custom-class" and then in CSS for .my-custom-class add the color: rgb(0,0,0,0.1) or whatever you want :)
@@DecodedFrontend Hi, I tried it but it does not apply the backdrop on the panel. What I want to achieve is to have a backdrop only on the position where the overlay panel located(for instance in the side nav only). Thanks pal
@@glennolazo7671 hm.. do you have a real life example (maybe somewhere in another applications)? Because I think you probably misunderstand the idea behind a backdrop or by backdrop you mean something else. Backdrop is always being used as a "full-screen" surface relative to parent and on top off it different panels are placed (at least I have never seen another use-cases). And clicking on backdrop is usually being handled as "click outside to close" behaviour, so if you place backdrop only on the position where the overlay panel located then it will be always under your panel and it makes backdrop useless in this case. Maybe you want to move OverlayContainer inside the component where your overlay is being used? So overlay will fill a whole available space inside component rather than document body?
@@DecodedFrontend hmm maybe putting the overlay container inside the component is what I'm trying to ask. But for now I set the backdropClass directive to false and create a custom backdrop element and listen to toggle menu state whether to show the backdrop or not. But I think it has a better way on achieving the output that I want. Thanks pal for your quick response. Looking forward to your next vid tutorial :)
![Angular CDK - Layout tutorial (BreakpointsObserver & Platform/Browser detection) [Angular 10, 2020]](http://i.ytimg.com/vi/1Z4QlRYXINc/mqdefault.jpg)
![Angular CDK - Layout tutorial (BreakpointsObserver & Platform/Browser detection) [Angular 10, 2020]](/img/tr.png)
![Angular Material - Custom Form Field Control [Advanced, 2020, Pt.2]](http://i.ytimg.com/vi/AZsw2nRxkBk/mqdefault.jpg)
🔥🔥🔥I just released one of *the most advanced courses about Angular Forms* . Check it out: bit.ly/advanced-angular-forms 🔥🔥🔥
Guys, forgot to mention in the video one important thing: Do not forget in `ngOnDestroy` lifecycle hook to call `stopMonitoring(focusElementRef)` method provided by focusMonitor service, otherwise you will get a memory leak.
Probably the best tutorial I’ve seen on this topic! Many thanks😊
Я з цими оверлеями відкрив для себе Матеріал заново. Надзвичайно корисні туторіали, продовжуй.
Таак.. оверлеї дійсно круті як і взагалі весь CDK. Його чим більше вивчаеш тим більше він тебе вражае))
Thank you for the nice information
Welcome! Thank you for your feedback!😊
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!
Awesome
Hi, great lessons!
Are you planning to make a video about text inputs?
Hi, Thank you!
Yes, definitely! But I can not tell you exactly when. It is quite big topic as well, so I have to prepare it properly and it will take some time:)
You are awesome
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 =)
Check this out - github.com/angular/components/issues/10573
Thank you, Alex!
I appreciate you efforts regarding further investigation and sharing my video with community! :)
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..
Hi Pradeep,
No, unfortunately I have never faced it..
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?
Which extension are you using to provide intellisense for binding functions to your click event in the template? 14:17
Hi! It is a VS Code extension called Angular Language Service
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 connnectedOverlay.overlayKeydown() and use focuse monitor doesn't work for me :( Any ideas ?
I use cdk listbox in the content of my panel (if it could help) and cdkTrapFocus to my input with the overlay content (panel)
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 :)
Hi Goutham! Thank you for your comment. I don’t have a quick solution for you right now because I have never faced such a use case before. I will try to find some time for investigation and once I find something I will let you know😉
Dev Plus Plus Rats! But that’s ok whenever you find a solution share it that’s will be cool, thanks :)
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.
Hi, Is there any way to attach the overlay container to any other dom element (not to the body tag)
Yea, you can implement your own OverlayContainer service which creates container in any another place and provide it instead of default one
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
Hey! Thanks for such a nice feedback :)
Do I understand right that you want to get rid of this dark surface and apply the dark background to the panel (where the list with cities in the video)?
If so, than apply [cdkConnectedOverlayHasBackdrop]="false" to your cdkConnectedOverlay - it will remove backdrop and then you can via cdkConnectedOverlayPanelClass attach some class like cdkConnectedOverlayPanelClass="my-custom-class" and then in CSS for .my-custom-class add the color: rgb(0,0,0,0.1) or whatever you want :)
@@DecodedFrontend Thanks also for the response in my queries. I will try to do that I'll keep you posted on this Cheers!
@@DecodedFrontend Hi, I tried it but it does not apply the backdrop on the panel. What I want to achieve is to have a backdrop only on the position where the overlay panel located(for instance in the side nav only). Thanks pal
@@glennolazo7671 hm.. do you have a real life example (maybe somewhere in another applications)? Because I think you probably misunderstand the idea behind a backdrop or by backdrop you mean something else. Backdrop is always being used as a "full-screen" surface relative to parent and on top off it different panels are placed (at least I have never seen another use-cases). And clicking on backdrop is usually being handled as "click outside to close" behaviour, so if you place backdrop only on the position where the overlay panel located then it will be always under your panel and it makes backdrop useless in this case.
Maybe you want to move OverlayContainer inside the component where your overlay is being used? So overlay will fill a whole available space inside component rather than document body?
@@DecodedFrontend hmm maybe putting the overlay container inside the component is what I'm trying to ask. But for now I set the backdropClass directive to false and create a custom backdrop element and listen to toggle menu state whether to show the backdrop or not. But I think it has a better way on achieving the output that I want. Thanks pal for your quick response. Looking forward to your next vid tutorial :)