Angular CDK is a library from Google that provides a set of tools which helps to simplify the component building process in Angular. It provides utilities for creating floating panels, virtual scrolling, drag-n-drop, accessibility and more. If you are creating a reusable library in Angular then CDK will be of great help.

Creating a custom dropdown with the same behaviors of a native one is a little complex job. Though in outside dropdowns looks simple there is a lot of engineering goes with it, like positioning the dropdown, adjusting it's position and dimensions based on screen real-estate, keyboard accessibility etc. The Angular CDK library has dedicated modules to deal with creating overlays and accessibility. In this article I'm gonna show you how we can build a custom dropdown step by step with the help of CDK.

Angular platform ships Angular Material library that contains quite a bunch of UI components which helps to develop Single Page Apps easier. The material components are opinionated and they follows Google's Material Spec. Sometimes we've to develop components from scratch either wrapping over the native HTML elements or third party components. For custom components created in such ways, Angular provides support for them to bind data and synchronize the state through interfaces. It also a good idea to encapsulate the validation and displaying error messages work inside the custom component.

In this article, I'll show you how we can leverage the built-in validation and display the error messages inside a custom component.