Angular › Angular CDK (Component Dev Kit)

What is the Angular CDK and how is it different from Angular Material?

Beginner

Answer

The Angular CDK, short for Component Dev Kit, provides behavior and utilities for building custom components, such as overlays, drag and drop, and accessibility helpers, without any visual styling included at all. Angular Material is built on top of the CDK and adds fully styled, ready to use components, while the CDK alone gives you the underlying tools to build your own custom looking components.

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [OverlayModule]
})
export class AppModule {}

Real-world example A design team building a completely custom looking dropdown menu uses the CDK's overlay and positioning tools for the underlying behavior, while designing their own unique visual style instead of using Angular Material's default look.

Common follow-ups: Can you use the Angular CDK without using Angular Material at all?;What other behaviors besides overlays does the CDK provide?

Angular Material & UI Component Libraries;Directives