What is @angular/cdk?
The @angular/cdk package, also known as Angular Component Dev Kit, provides a set of tools, components, and utilities for building complex material design components without depending on the Angular Material library. It is designed to be generic and reusable across different UI components.
What are @angular/cdk's main functionalities?
Layout
The Layout module provides utilities to build responsive layouts using the BreakpointObserver service.
import {LayoutModule} from '@angular/cdk/layout';
Overlay
The Overlay module helps in creating powerful overlay elements that can be attached to any part of the document.
import {OverlayModule} from '@angular/cdk/overlay';
Table
The Table module provides a flexible and extensible data-table for displaying tabular data.
import {CdkTableModule} from '@angular/cdk/table';
Drag and Drop
The DragDrop module allows for implementing drag-and-drop features in your application with ease.
import {DragDropModule} from '@angular/cdk/drag-drop';
Accessibility
The Accessibility module provides tools to make your application more accessible, including focus management and screen reader support.
import {A11yModule} from '@angular/cdk/a11y';
Other packages similar to @angular/cdk
react-dnd
React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping components decoupled. It is similar to the DragDropModule in @angular/cdk but for React.
react-virtualized
React Virtualized is a React component for efficiently rendering large lists and tabular data. It is similar to the Table module in @angular/cdk but specifically tailored for React applications.
popper.js
Popper.js is a library used to create poppers in web applications. It is similar to the Overlay module in @angular/cdk, providing a way to attach elements to the DOM and manage their positioning.
muuri
Muuri is a JavaScript layout engine that allows creating responsive, sortable, filterable, and draggable grid layouts. It is similar to the combination of the Layout and DragDrop modules in @angular/cdk.
17.2.2 "metal-marble" (2024-03-06)
cdk
| Commit | Type | Description |
| -- | -- | -- |
| 4af777a189 | fix | drag-drop: resolve helper directives with DI for proper hostDirectives support (#28633) |
| 94eafc134f | fix | overlay: fix overlay margin in isBoundedByLeftViewportEdge ('left-ward') mode (#28233) |
material
| Commit | Type | Description |
| -- | -- | -- |
| 65aaaf3abf | fix | autocomplete: prevent hidden overlay from blocking clicks (#28677) |
| d08ddaab81 | fix | autocomplete: requireSelection sometimes not clearing value when editing after selection (#28628) |
| 5b3210bfda | fix | checkbox: derive checkmark color from palette |
| fb20320b82 | fix | chips: derive surface color from palette |
| fe01e298a0 | fix | core: mark fields on HasErrorState as nullable (#28689) |
| afbb34e415 | fix | datepicker: always move caret to the end of the start input on backspace (#28669) |
| ec6f8e2e62 | fix | datepicker: datepicker doesn't announce newly selected range in firefox (#28529) |
| ba6e809761 | fix | expansion: prevent focus from entering the panel while it's animating (#28646) |
| 07f5ed9dc6 | fix | schematics: add typography and density to custom theme (#28645) |
| 6d8160c166 | fix | schematics: don't interrupt ng add if adding the animations module fails (#28675) |
| 9655ecb872 | fix | slide-toggle: m3 selected track outline (#28625) (#28634) |
| 7d352fbf88 | perf | form-field: resolve scrolling performance issues (#27251) |
material-experimental
| Commit | Type | Description |
| -- | -- | -- |
| f18ef99785 | feat | theming: provide hook for formatting toke… (#28660) |
multiple
| Commit | Type | Description |
| -- | -- | -- |
| 14c055fe07 | fix | derive all token values from theme (#28664) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.2.1"></a>