@angular/cdk
Advanced tools
Package description
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.
Changelog
13.0.0 "fir-valise" (2021-11-03)
If your application imports styles from ~@angular/cdk, the @import/@use statements need to
be updated to omit the tilde. The tilde syntax is deprecated within the webpack sass-loader and
does not work with APF v13.
// before
@use '~@angular/cdk' as cdk;
// after
@use '@angular/cdk' as cdk;
The Angular CLI will automatically migrate your application with: ng update @angular/cdk.
Additional breaking changes:
CKD_COPY_TO_CLIPBOARD_CONFIG has been removed. Use CDK_COPY_TO_CLIPBOARD_CONFIG instead.ConnectedPositionStrategy has been removed. Use FlexibleConnectedPositionStrategy instead.OverlayPositionBuilder.connectedTo has been removed. Use OverlayPositionBuilder.flexibleConnectedTo instead.If your application imports styles from ~@angular/material, the @import/@use statements need to
be updated to omit the tilde. The tilde syntax is deprecated within the webpack sass-loader and
does not work with APF v13.
// before
@use '~@angular/material' as mat;
// after
@use '@angular/material' as mat;
The Angular CLI will automatically migrate your application with: ng update @angular/material.
Additionally, the following breaking changes have been made:
1.34.0. Version 1.38.0 is recommended.CanColorCtor is no longer necessary and has been removed.CanDisableRippleCtor is no longer necessary and has been removed.CanDisableCtor is no longer necessary and has been removed.CanUpdateErrorStateCtor is no longer necessary and has been removed.HasInitializedCtor is no longer necessary and has been removed.HasTabIndexCtor is no longer necessary and has been removed._document and _dialog parameters have been removed from the MatDatepicker and MatDateRangePicker constructors.MatFormFieldHarness.getHarnessLoaderForPrefix has been removed. Use MatFormFieldHarness.getPrefixText instead.MatFormFieldHarness.getHarnessLoaderForSuffix has been removed. Use MatFormFieldHarness.getSuffixText instead._labelOptions parameter of the MatFormField constructor has been removed.MatFormField.underlineRef has been removed.matTextareaAutosize has been removed. Use cdkTextareaAutosize from the @angular/cdk/text-field module instead.MatTabHarness.getHarnessLoaderForContent has been removed. Use MatTabHarness.getRootHarnessLoader instead.YouTubePlayer.createEventsBoundInZone has been removed.| Commit | Type | Description | | -- | -- | -- | | e8dd070bbd | feat | add date adapter for date-fns (#23262) | | 2a358120f4 | fix | locale not passed into parse function (#23653) |
| Commit | Type | Description | | -- | -- | -- | | 2789d8eb5f | feat | mdc-card: add DI token for configuring appearance (#23302) | | a4ae3b88c0 | feat | mdc-slide-toggle: switch to non-deprecated styles (#23143) | | e7a77edf1e | fix | mdc-tabs: update theming api (#23855) |
| Commit | Type | Description | | -- | -- | -- | | 7539cf2837 | refactor | remove deprecated APIs for v13 (#23520) |
| Commit | Type | Description | | -- | -- | -- | | 7c16258cfb | feat | switch to non-deprecated typings (#23350) |
| Commit | Type | Description | | -- | -- | -- | | 3dc5af4bfd | feat | dialog: add support for content sections in harness (#23357) | | e4b54aa2b7 | feat | progress-bar: add default options injection token (#23363) | | 6c724c18a7 | fix | chips: show required asterisk when using required validator (#23379) | | 728cf1c8eb | fix | dialog: improve screen reader support when opened (#23085) | | 881edec3e6 | fix | icon: make icon-registry compatible with Trusted Types (#23140) | | 1568b35972 | fix | input: show required asterisk when using required validator (#23362) | | 64ba72f1fd | fix | select: show required asterisk when using required validator (#23500) | | 01734b35af | fix | sidenav: restore focus with correct origin when closing via the backdrop (#23492) | | 7bc9bfb9dc | refactor | core: remove deprecated APIs for v13 (#23529) | | 40f0674e39 | refactor | core: update minimum required sass version and clean up workarounds (#23414) | | f8dc1770d1 | refactor | datepicker: remove deprecated APIs for v13 (#23574) | | 700c0601c0 | refactor | form-field: remove deprecated APIs for version 13 (#23389) | | 760b4564fa | refactor | input: remove deprecated autosize directive (#23408) | | 3ad08940f1 | refactor | tabs: remove deprecated APIs for v13 (#23426) |
| Commit | Type | Description |
| -- | -- | -- |
| 51796e1601 | feat | overlay: Extend cdkConnectedOverlayOrigin to support more types. (#23253) |
| 04b5a08190 | feat | schematics: add migration for removed symbols (#23530) |
| b25283cda9 | fix | a11y: error on firefox (#23395) |
| 219e1f558a | fix | drag-drop: add conditional to scroll update (#23337) |
| 6e1f522d6a | fix | drag-drop: allow using cdkDragRootElement w/ comment tag (#23596) |
| d70faa0018 | fix | drag-drop: sorted event emitted multiple times for single-item list (#23589) |
| f2ff9e3142 | fix | schematics: drop tilde imports when updating to v13 (#23732) |
| 692ebafe7b | fix | testing: fake touch event does not set proper touch identifier |
| 5833597a7a | refactor | clipboard: clean up deprecated APIs for v13 (#23401) |
| 8d39384770 | refactor | overlay: remove deprecated connected position strategy |
| Commit | Type | Description | | -- | -- | -- | | 769996ed3f | feat | add options to autoFocus field for dialogs (#22780) | | db18b4093f | feat | add support for TypeScript 4.4 (#23646) |
| Commit | Type | Description | | -- | -- | -- | | 5c22a1dbf0 | fix | syntax error due to ES2020 being used for ng-add with NodeJS 12.x (#23744) |
Amy Sorto, Andrew Seguin, Charles, Jeremy Elbourn, Joey Perrott, Kristiyan Kostadinov, Md. Enzam Hossain, Michael Prentice, Miles Malerba, Paul Gschwendtner, Ruslan Lekhman, Suguru Inatomi, Wagner Maciel, Zach Arend, bjarkler and mmalerba
<!-- CHANGELOG SPLIT MARKER --><a name="13.0.0-rc.3"></a>
Readme
The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.
License: MIT
FAQs
Angular Material Component Development Kit
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
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.