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.
15.0.4 "spandex-sword" (2023-01-05)
material
| Commit | Type | Description |
| -- | -- | -- |
| e7fc766379 | fix | menu: aria-expanded not updating in an OnPush component (#26279) |
| caa8f7b005 | fix | menu: prevent pointer events on animating menu (#26323) |
| ee63ad32b2 | fix | slider: avoid updating tick marks unnecessarily (#26322) |
| 41cfc6e2f4 | fix | slider: dragEnd not being emitted (#26289) |
| 6c4a1f74b4 | fix | slider: value jumping after drag with box-sizing: border-box (#26345) |
| b52cd63bb1 | fix | snack-bar: incorrect width at some breakpoints (#26334) |
| 5cce2fe6d6 | fix | snack-bar: set explicit color on action in dark themes (#26268) |
| 3e50216f6d | fix | tabs: touch gestures not working on tab nav bar (#26344) |
material-experimental
| Commit | Type | Description |
| -- | -- | -- |
| 70cf080cd5 | fix | popover-edit: Make cell focus indicator visible in high contrast (forced colors) mode (#26275) |
Special Thanks
Daniel, Karl Seamon, Kristiyan Kostadinov, Paul Gschwendtner and Wagner Maciel
<!-- CHANGELOG SPLIT MARKER -->
<a name="15.0.3"></a>