@angular/cdk
Advanced tools
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.
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';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 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 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 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.
The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.
License: MIT
19.0.0 "hafnium-hippo" (2024-11-19)
cdk.high-contrast targets a media query instead of a class, the specificity of the styles it emits is lower than before.Virtual scrolling lists now have proper type checking which can reveal some previously-hidden compilation errors.
fix(cdk/scrolling): adds ngTemplateContextGuard
implements ngTemplateContextGuard for CdkVirtualForOf directive
mixinColor and CanColor have been removed. Use a host binding instead.mixinDisableRipple and CanDisableRipple have been removed. Use input transforms instead.mixinDisabled and CanDisable have been removed. Use input transforms instead.mixinInitialized and HasInitialized have been removed. Use a Subject that emits in ngOnInit instead.mixinTabIndex and HasTabIndex have been removed. Use input transforms instead.MapMarkerClusterer class has been renamed to DeprecatedMapMarkerClusterer.map-marker-clusterer selector has been changed to deprecated-map-marker-clusterer.@include mat.button-theme($theme); --mat-button-color: red;. It can be resolved by wrapping the overrides with & {}, for example @include mat.button-theme($theme); & { --mat-button-color: red; }.MatButton.ripple is no longer available.MatCheckbox.ripple is no longer available.MatChip.ripple is no longer available.| Commit | Type | Description | | -- | -- | -- | | 234e5e0e8 | feat | add support for date-fns 4 (#29744) |
| Commit | Type | Description | | -- | -- | -- | | 09da06b42 | fix | ready event not emitting | | 288598750 | fix | startSeconds not applied when using placeholder |
| Commit | Type | Description | | -- | -- | -- | | 1bd976c6a | feat | Add support for some mouse events #29741 (#29747) | | a05475e76 | feat | deprecate marker cluster component | | c70aae15b | feat | implement new marker clusterer | | b9deeee85 | fix | add schematic to switch to the new clusterer name | | a6709497f | fix | expose all clusterer types (#29905) | | 74c2a081f | fix | resolve CLI errors in ng update schematic (#29947) |
| Commit | Type | Description |
| -- | -- | -- |
| 9122335b2 | feat | checkbox: add new aria properties to MatCheckbox (#29457) |
| 64ed7ca71 | feat | core: add experimental theme demo (#29636) |
| a58e6f671 | feat | core: add theme-overrides mixin (#29858) |
| d206225c5 | feat | core: create focus-indicator structural styles loader (#29763) |
| b519b4785 | feat | core: default to color-scheme theme type (#29907) |
| ea0d1ba7b | feat | core: deprecate the core mixin (#29906) |
| 486990912 | feat | core: rename theme mixin (#29857) |
| 4b49d7354 | feat | core: switch system prefix from sys to mat-sys (#29908) |
| 1abb484aa | feat | input: add the ability to interact with disabled inputs (#29574) |
| 4adc3725d | feat | schematics: create v19 core removal schematic (#29768) |
| 9c3af284f | feat | schematics: Switch custom theme schematic to use theme mixin instead of define-theme and add high contrast override mixins (#29642) |
| 3fc1f9a1b | feat | schematics: Update custom theme schematic to work with light-dark and use theme-overrides mixin (#29911) |
| ff3d342fd | feat | tabs: add alignTabs in MatTabsConfig (#29779) |
| 371446a7c | feat | theming: Disambiguate token names in theme overrides (#29859) |
| 9546fe77e | feat | timepicker: add test harnesses |
| 2646e0885 | feat | timepicker: add timepicker component |
| de6c20686 | fix | bottom-sheet: add height minHeight maxHeight to config (#29794) |
| fcb76d3ed | fix | core: add missing system variables (#29624) |
| 5ad133d07 | fix | core: allow optgroup overrides through core-overrides (#29897) |
| 0fb4247ce | fix | core: avoid browser inconsistencies when parsing time |
| 855ed4948 | fix | core: avoid having to manually load ripple styles |
| d0d59b784 | fix | core: change ng-add to use mat.theme (#29990) |
| a8e40ec34 | fix | core: correctly identify color input (#29909) |
| edce90652 | fix | core: delete deprecated APIs (#29651) |
| 54875a325 | fix | core: drop sanity checks (#29688) |
| ef14c2869 | fix | core: option showing double selected indicator in high contrast mode |
| 5403b4b07 | fix | core: remove unused motion system vars (#29920) |
| 613cf5406 | fix | core: rename sys vars from mat-app to mat-sys (#29879) |
| d0e178b75 | fix | core: stop manually instantiating MatRipple directive (#29630) |
| d55ec612c | fix | core: update prebuilt themes to use mat.theme (#29989) |
| 7cf8c6c46 | fix | datepicker: calendar font tokens not being picked up (#29610) |
| 5ba97925b | fix | form-field: avoid touching the DOM on each state change |
| a2cd04902 | fix | form-field: incorrect form field border radius with system-level themes (#29966) |
| 5345a875f | fix | input: preserve aria-describedby set externally |
| 9dcb95a72 | fix | list: remove unnecessary high contrast styles |
| dbcb921d5 | fix | menu: handle keyboard events through dispatcher (#29997) |
| de5e57ad1 | fix | menu: use static elevation (#29968) |
| 482009bac | fix | schematics: add explicit system variable prefix schematic (#29980) |
| 75631fb0b | fix | sidenav: prevent the content from jumping when hydrated (#29991) |
| 14e9ec7cc | fix | timepicker: always re-focus input |
| 1eda48604 | fix | timepicker: hide toggle icon from assistive technology |
| 490bcfe38 | fix | timepicker: more flexible interval parsing |
| fb6e20290 | fix | timepicker: text field in parse error not up to date |
| 9b5ee9d55 | fix | timepicker: value considered as invalid by default |
| Commit | Type | Description |
| -- | -- | -- |
| f4a02adb7 | feat | a11y: use native media query for high contrast detection (#29678) |
| 9b4085c6e | feat | private: create cdk-visually-hidden style loader (#29757) |
| df21d2b09 | fix | overlay: avoid having to manually load structural styles |
| 560878a23 | fix | overlay: load structural styles in a cascade layer (#29725) |
| 873eb01e0 | fix | portal: remove ComponentFactoryResolver usages (#27427) |
| 5439460d1 | fix | scrolling: adds ngTemplateContextGuard (#27276) |
| ad18e6d74 | fix | text-field: avoid having to manually load text field styles |
| bd84c2a67 | fix | tree: fix issue where isExpanded wouldn't be set if placed before isExpandable (#29565) |
| 3b4ade5a0 | fix | tree: only handle keyboard events directly from the node (#29861) |
| f6066c23f | fix | tree: warn if mixed node types are used within the same tree |
| Commit | Type | Description | | -- | -- | -- | | 8f0369a27 | fix | paginator: fix focus issues with paginator buttons (#29379) |
| Commit | Type | Description | | -- | -- | -- | | 01711b180 | fix | account for mixed declarations in latest Sass version (#29596) | | cb1450fc7 | fix | change fallbacks to use m3 (#29528) | | a9da72ed1 | fix | consolidate strong focus indicators (#29623) | | be342289c | fix | remove final references to ComponentFactoryResolver (#29832) | | d1d53f51a | fix | remove usages of Sass globals (#29972) | | b3a9062ed | fix | ripples not showing up in some cases (#29672) | | 485bd9923 | fix | stop exposing internal ripple implementation (#29622) |
<!-- CHANGELOG SPLIT MARKER --><a name="18.2.14"></a>
FAQs
Angular Material Component Development Kit
The npm package @angular/cdk receives a total of 2,140,940 weekly downloads. As such, @angular/cdk popularity was classified as popular.
We found that @angular/cdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.