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.

CSS3 provides couple of powerful concepts to create layouts: Grid and Flex. The former uses a top to bottom approach and later uses the reverse. Both these concepts are well supported by browsers except IE11. Though there are advantages in leveraging CSS to accomplish layouts (for example, we can make them responsive through media queries) there are benefits in leveraging a HTML like declarative approach. Angular provides a powerful concept called directives that helps to enhance HTML by adding custom behaviors to it.

In this post, I'm gonna show you how we can create couple of directives that helps to craft layouts using CSS3 grid. As a bonus, I also show you how we can make the layouts responsive. I'm also glad to introduce you the library angular-bone which is a real world implementation of this sample that supports both flex and grid layouts.