Angular Releases Component Development Kit

Team Angular has launched a new Component Development Kit, a library of highly reusable building blocks for the Material Design components. The CDK comprises of some well-tested tools for developers to add common interaction patterns with minimal effort.

Here is a snippet from the official blog

“Modern web development is all about components. Angular gives developers a way to define these discrete chunks of UI and then compose them into an application. We’ve built the Component Dev Kit (CDK) to provide high quality predefined behaviors for your components. Whether you’re authoring a generic, reusable component library or building a domain-specific component for one app, the CDK can help you build what you need in less time with less code and fewer bugs. Our ultimate goal is for all Angular component libraries to be able to take advantage of the CDK, reducing duplication of effort in solving these common problems.”

The CDK library is developed when while developing Angular Material, the developers identified common patterns in many components and they composed this library of reusable behavioral patterns. The CDK is a set of several sub-packages where each one is responsible for a different kind of task or ability. Here are some highlights –

  • The a11y subpackage contains a handful of utilities to help build more accessible components, particularly for users that interact with the web via screen-reader.
  • The BidiModule from the bidi subpackage provides a common pattern for all components to get and respond to changes to the current LTR / RTL dir of the page.
  • The overlay panel is the core of the menu, select, dialog, snack-bar, autocomplete, and tooltip. All of these components are built on top of the CDK’s overlay subpackage.

For the complete list of features and functionality, you can read the CDK documentation.

This is the first stable release of CDK Library and the Angular Team has a well-structured plan to enhance the capabilities of it in coming future. Do visit the official blog to learn more about it. Also, you can report an issue as well as share your idea for CDK improvement on the GitHub repository of Angular.