@angular/cdk

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.

README

Angular Material

The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

19.0.0-next.2 "bronze-book" (2024-08-28)

Breaking Changes

cdk

• • The overlay stays are now loaded slightly later than before which can change their specificity. You may have to update any overlay style overrides.

material

• • The ripples styles are now loaded slightly later than before which can change their specificity. You may have to update any ripple style overrides.

multiple

• • MatButton.ripple is no longer available.
  • MatCheckbox.ripple is no longer available.
  • MatChip.ripple is no longer available.

material

| Commit | Type | Description | | -- | -- | -- | | 64ed7ca715 | feat | core: add experimental theme demo (#29636) | | fcb76d3ed1 | fix | core: add missing system variables (#29624) | | 855ed49482 | fix | core: avoid having to manually load ripple styles | | d0e178b75e | fix | core: stop manually instantiating MatRipple directive (#29630) | | 3bf0e31f77 | fix | schematics: Add the missing neutral tones for the M3 color palettes (#29644) | | 64cf19ccdb | perf | tooltip: Avoid unneeded calls to clearTimeout (#29643) |

cdk

| Commit | Type | Description | | -- | -- | -- | | 2f1fe03ae9 | fix | drag-drop: error if ngDevMode is undefined (#29634) | | df21d2b091 | fix | overlay: avoid having to manually load structural styles | | ad18e6d74e | fix | text-field: avoid having to manually load text field styles | | a6835ef6a7 | fix | tree: avoid breaking change in constructor (#29648) | | 8b34fb7e8d | fix | tree: capturing focus on load (#29641) |

multiple

| Commit | Type | Description | | -- | -- | -- | | a9da72ed15 | fix | consolidate strong focus indicators (#29623) | | 485bd9923b | fix | stop exposing internal ripple implementation (#29622) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.2.2"></a>