About @angular/cdk
The "@angular/cdk" package, standing for Angular Component Development Kit, serves as a foundational toolset for building high-quality, robust web applications using Angular. This toolkit is essential for developers aiming to create dynamic and responsive user interfaces with less code and effort. It offers a range of behavior-based utilities and functions that simplify the manipulation and handling of DOM elements, enhancing accessibility and reusability across components. By utilizing "@angular/cdk", developers can ensure consistency in design and functionality, which is crucial for enterprise-grade applications. The package supports features like bidirectional text, drag-and-drop, and layout management, which are pivotal for creating modern web applications that deliver a seamless user experience.
To start using the Angular Component Development Kit in your project, simply run the command npm install @angular/cdk in your project’s root directory. This command fetches the latest version of "@angular/cdk" from the npm registry, ensuring that developers have access to the most recent tools and improvements. Once installed, it integrates smoothly with any Angular application, providing a suite of tools designed to handle common UI components and challenges effectively. The npm package not only streamlines development processes but also optimizes performance and enhances the capabilities of Angular projects, making it an indispensable asset for professional developers looking to push the boundaries of web development.
The versatility of "@angular/cdk" extends to its broad compatibility with a variety of Angular versions and its continuous updates and improvements. Regular updates from the Angular team keep "@angular/cdk" aligned with the latest web standards and Angular features, making it a reliable choice for ongoing projects. Its modular nature allows developers to import only the parts they need, ensuring that the application remains lightweight and efficient.
Dependencies
Core dependencies of this npm package and its dev dependencies.
@angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @types/google.maps, @types/youtube, rxjs, rxjs-tslint-rules, tslib, zone.js, @angular-devkit/build-angular, @angular-devkit/core, @angular-devkit/schematics, @angular/bazel, @angular/build-tooling, @angular/cli, @angular/compiler-cli, @angular/localize, @angular/ng-dev, @angular/platform-browser-dynamic, @angular/platform-server, @angular/router, @babel/core, @babel/helper-explode-assignable-expression, @babel/helper-string-parser, @bazel/bazelisk, @bazel/buildifier, @bazel/concatjs, @bazel/esbuild, @bazel/ibazel, @bazel/jasmine, @bazel/protractor, @bazel/rollup, @bazel/runfiles, @bazel/terser, @bazel/worker, @firebase/app-types, @material/animation, @material/auto-init, @material/banner, @material/base, @material/button, @material/card, @material/checkbox, @material/chips, @material/circular-progress, @material/data-table, @material/density, @material/dialog, @material/dom, @material/drawer, @material/elevation, @material/fab, @material/feature-targeting, @material/floating-label, @material/form-field, @material/icon-button, @material/image-list, @material/layout-grid, @material/line-ripple, @material/linear-progress, @material/list, @material/material-color-utilities, @material/menu, @material/menu-surface, @material/notched-outline, @material/radio, @material/ripple, @material/rtl, @material/segmented-button, @material/select, @material/shape, @material/slider, @material/snackbar, @material/switch, @material/tab, @material/tab-bar, @material/tab-indicator, @material/tab-scroller, @material/textfield, @material/theme, @material/tooltip, @material/tokens, @material/top-app-bar, @material/touch-target, @material/typography, @octokit/rest, @rollup/plugin-commonjs, @rollup/plugin-node-resolve, @schematics/angular, @types/babel__core, @types/browser-sync, @types/fs-extra, @types/glob, @types/jasmine, @types/luxon, @types/marked, @types/node, @types/node-fetch, @types/selenium-webdriver, @types/semver, @types/send, @types/shelljs, @types/yaml, @types/yargs, autoprefixer, browser-sync, chalk, cross-env, date-fns, dgeni, dgeni-packages, esbuild, firebase-tools, fs-extra, glob, highlight.js, husky, inquirer, jasmine, jasmine-core, jsonc-parser, kagekiri, karma, karma-browserstack-launcher, karma-chrome-launcher, karma-firefox-launcher, karma-jasmine, karma-parallel, karma-requirejs, karma-sauce-launcher, karma-sourcemap-loader, luxon, madge, marked, minimatch, moment, node-fetch, parse5, patch-package, postcss, postcss-scss, protractor, reflect-metadata, requirejs, rollup, rollup-plugin-sourcemaps, sass, selenium-webdriver, semver, send, shelljs, stylelint, terser, ts-node, tsec, tsickle, tslint, tsutils, typescript, vrsource-tslint-rules, yaml, yargs, zx
Documentation
A README file for the @angular/cdk code repository. View Code
Official components for Angular
The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains several npm packages.
| Package | Description | Docs |
|---|---|---|
@angular/cdk |
Library that helps you author custom UI components with common interaction patterns | Docs |
@angular/material |
Material Design UI components for Angular applications | Docs |
@angular/google-maps |
Angular components built on top of the Google Maps JavaScript API | Docs |
@angular/youtube-player |
Angular component built on top of the YouTube Player API | Docs |
Quick links
Documentation, demos, and guides | Frequently Asked Questions | Community Google group | Contributing | StackBlitz Template
Getting started
See our Getting Started Guide if you're building your first project with Angular Material.
Contributing
If you'd like to contribute, please follow our contributing guidelines. Please see
our help wanted label for a list of issues with good opportunities for
contribution. You can also use the good first issue label to find issues
if you are just starting to contribute to the project.
About the team
The Angular Components team is part of the Angular team at Google. The team includes both Google employees and community contributors from around the globe.
Our team has two primary goals:
- Build high-quality UI components that developers can drop into existing applications
- Provide tools that help developers build their own custom components with common interaction patterns
What do we mean by "high-quality" components?
- Internationalized and accessible so that all users can use them.
- Straightforward APIs that don't confuse developers.
- Behave as expected across a wide variety of use-cases without bugs.
- Behavior is well-tested with both unit and integration tests.
- Customizable within the bounds of the Material Design specification.
- Performance cost is minimized.
- Code is clean and well-documented to serve as an example for Angular developers.
Browser and screen reader support
The Angular Components team supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge.
We aim for great user experience with the following screen readers:
- Windows: NVDA and JAWS with FF / Chrome.
- macOS: VoiceOver with Safari / Chrome.
- iOS: VoiceOver with Safari
- Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
- Chrome OS: ChromeVox with Chrome.