Angular Material CDK - Overlay Module Pt.1 (Comprehensive overview, Angular 9 / 2020)

📣 Learn how to build advanced form controls in my new video course 📣
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT

Angular CDK (Component Development Kit) is a set of helpers and tools to implement common user interaction patterns which are decoupled from the presentation layer. In this tutorial, we will learn how to use a module called Angular CDK Overlay which is one of the most widely-used components in Angular Material and WEB UI in particular. We will build a search with autocompletion likewise Angular Material Autocomplete but with a configurable view of a dropdown panel. I will be using provided directives and Rxjs to have our code declarative and reactive which makes it clear and flexible. Angular Overlay is a very big topic, so there will be the 2nd part of this tutorial where we will have a look at layout positioning, scrolling strategies, and many many more.
Subscribe to my channel if you find my videos useful!
Thank you and enjoy watching :)

Time codes:
0:00:50 - Basic project overview
0:01:59 - Start of coding
0:18:46 - Implemented basics
0:21:10 - Working demo

Quick subscribe:

Link to source code:

Really like your videos on Angular, it is so nice to see someone go beyond the endless "50min intro to Angular". Keep up the good work.

[DraaElMizan]

Great course. Very informative. Thanks.👍

[balajisairamnarasimhan]

Thanks for posting . Can we migrate this to recent angular version?

[PLanBBeaTZ]

I really enjoy your angular series or let's say the topics you cover! So, thanks for uploading and keep up the good work.. What topics do you plan in the future?

[jestinsorenson]

Thank you for the video! How do you get the package size to show up next to your imports? 7:12 you're importing observable and map. How are you getting that to show? TIA

[asfakhusain]

Can you make detail video on rxjs. It will quite help

[Anand-fyoo]

Any videos on micro-frontend in angular.. ?

[mohsen]

pls make a video of angular ComponentFactoryResolver or resolveComponentFactory()

[abderrahimefarhane]

Hello,
Thanks for this video.
Please how to connect the overlay width to the overlay origin width to have something responsive.

[sonalibhosale]

Hey I would like to know how to handle the mat-select-panel overlay? Because as I am selecting values from drop-down mat-select-panel position changes according to value I select similarly mat-select-panel width is greater than the select box

[dearvivekkumar]

Hi, I appreciate you make content on topics which are not common and hardly touched by other online video creators. For example Udemy Course in Angular Material Theming. Which I have purchased, watched and implemented in a real projects.

Can I request you to create a similar course on CDK and its possibilities? Please let me know if I can help you in any way like (creating sample components which you might need in the course ) etc.

Hoping to hear a response from you.

Thanks
Vivek

[yiern]

hey great video but when i try to apply the z-index for my origin element, it continues to appear behind the backdrop. Could you kindly help? Thanks!

[olivergattermayr]

Thank you for this great tutorial! I am using a slight modification of the connected overlay, and i need to insert material-datepickers inside of the ng-template. But when i do, the dropdown appears in the top-left of the screen. Any ideas on why this is happening? My z-index for the cdk is set to 9999.

[chandrakanthmca]

thanks for the detailed video.
i have requirement : table with multiple columns and some of the columns have search filter (when i click on the search filter column i need to show the popup with search input filter and multi select list ) . could you help me how to do this