Builders of the Angular JavaScript framework have launched a component development kit for the platform, providing components with predetermined behaviors. The goal is for all Angular component libraries to take advantage of the kit and reduce duplication of efforts in solving common problems.
The Angular CDK (Component Dev Kit) has tools for developers to add common interaction patterns, while doing less coding and minimizing bugs.
The CDK contains subpackages, each with a different area of responsibility:
- Bidi, for bidirectional text, provides a common pattern for components to respond to the current directionality of a page.
- Layout has utilities for building responsive UIs that can react to changes in screen size.
- Overlay provides a way to open floating panels on a screen.
- Table, or
<cdk-table>, provides a core on which developers can build a tailored data-table experience. - Ally has utilities for building accessible components, especially for web users interacting with a screen reader.
The CDK arose from work on Angular Material, which provides Material Design components for the framework. Developers saw that components share common patterns.
How to get Angular CDK
To use the kit, add @angular/sdk to your project with NPM or Yarn. The documentation on CDK behaviors is at the Angular Material website.
Planned features for Angular CDK
Features planned for later versions of Angular CDK include:
- Utilities and directives for drag-and-drop interaction.
- A dialog subpackage for a baseline dialog for customization to visual languages.
<cdk-svg>for inline SVG styling and animation.- A
<cdk-tree>component that follows patterns set by<cdk-table>. - An improved positioning strategy for overlays, supporting flexible sizing.