A Component Dev Kit for Angular

Go to the profile of Jeremy Elbourn
Jeremy Elbourn

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.

The Angular CDK gives developers solid, well-tested tools to add common interaction patterns with minimal effort. 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. The CDK is also completely unopinionated when it comes to styling, making it easy to tailor your app to any visual language. 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.

How did the CDK come to be?

From the development of Angular Material, we saw that many components share common patterns. Some of the most clear-cut examples include:

  • Creating a floating panel connected to some origin element (menu, select, autocomplete, tooltip)
Several components need to open some floating panel, such as the mat-select pictured here.
  • Navigating through a set of options via keyboard (menu, select, autocomplete, list)
  • Trapping of focus within a section of the page (dialog, sidenav)
  • Dynamically switching between multiple content views (tabs, stepper)

Aware of these cross-cutting behaviors, we strove to make highly reusable building blocks for the Material Design components. Once these building blocks reached a satisfactory level of maturity, we refactored them out into @angular/cdk as a standalone library.

What does the CDK contain?

The CDK is broken up into subpackages that each cover a different area of responsibility. While the full set of features can be found in the documentation, let’s look at some of the highlights:

a11y — accessibility

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. Screen-reader users primarily use a keyboard for all interactions, so the cdkFocusTrap directive can help create modal workflows common to dialogs or pop-ups. Status updates and notifications can also be problematic for users that can’t see a screen, so the LiveAnnouncer service can be used to surface this important information in a non-visual way.

bidi — bidirectional text

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. With this module included in your app, each component can inject the Directionality service to read the current direction and to subscribe to subsequent updates.

overlay

In Angular Material, our most commonly used interaction pattern is the floating overlay panel. This 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. At a high level, the Overlay service provides a simple API for creating panels. These panels are highly customizable, giving component authors control over sizing, positioning, scroll behavior, and appearance. Built-in configurations capture common scenarios for positioning (e.g., anchoring to another element) and for scrolling behavior (e.g. closing when a trigger scrolls off-screen). Users are not restricted to these built-in behaviors, though, and can customize the behavior with their own positioning and/or scrolling strategies.

layout

The layout subpackage offers BreakpointObserver, an Observable-based abstraction above the native matchMedia function. This helper lets you define a sequence of media-query breakpoints (e.g., Handset,Tablet,Desktop) so that your components can adapt to changes in screen size with clear, readable semantics.

table

On top of the helpers and utilities, the CDK also offers baseline components upon which more customized experiences can be constructed. The <cdk-table> is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.

Next up for the CDK

With its first stable release in December 2017, the CDK is still a relatively young library, and we have big plans for its growth. Some of the major work includes:

If you have a great idea for other additions to the CDK, let us know by filing an issue on our GitHub repo. If you are the author of a component library and are interested in using the CDK, reach out to devrel@angular.io.

Learning more

Get started with the CDK by adding @angular/cdk to your project with npm or yarn, then take a look at the documentation for each of the CDK behaviors and components at https://material.angular.io/cdk.

If you want to learn even more about the Angular CDK, check out some of these additional resources: