Angular CDK (Component Dev Kit)

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

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.

Q: How does the Angular CDK's drag and drop module work?

The CDK Drag and Drop module provides directives that let you make any element draggable and any container a valid drop zone, handling the complex logic of tracking drag position, reordering items, and moving elements between different lists, all without any visual styling forced on you.

Q: How does the CDK Overlay service help you build components like tooltips and dropdown menus that need to appear above everything else?

The Overlay service creates a floating container attached to the page independent of the normal component layout, letting you position content precisely relative to a trigger element, and it handles things like closing when the user clicks outside or scrolls away, which would otherwise be complex to build correctly from scratch.

Q: What does the CDK's virtual scrolling feature do, and why is it useful for very long lists?

Virtual scrolling only renders the items currently visible on screen, plus a small buffer, instead of rendering every single item in a very long list at once. This keeps the page fast and responsive even when a list contains thousands of items, since the browser never has to manage thousands of real DOM elements at the same time.

Q: What is a Layout module in the Angular CDK used for?

The CDK Layout module provides tools for detecting the current screen size and responding to changes, such as switching between a mobile and desktop layout, using a simple observable that emits whenever the matched screen size condition changes.

5 questions found

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

Beginner

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

How does the Angular CDK's drag and drop module work?

Intermediate

The CDK Drag and Drop module provides directives that let you make any element draggable and any container a valid drop zone, handling the complex logic of tracking drag position, reordering items, and moving elements between different lists, all without any visual styling forced on you.

import { DragDropModule } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-list',
  template: `
    <div cdkDropList (cdkDropListDropped)="drop($event)">
      <div *ngFor="let item of items" cdkDrag>{{ item }}</div>
    </div>
  `
})
export class ListComponent {
  items = ['Apple', 'Banana', 'Cherry'];
  drop(event: any) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

Real-world example A task management board lets users drag tasks between a to do column and a done column, using the CDK's drag and drop directives to handle all the reordering logic automatically.

Common follow-ups: How does moveItemInArray actually reorder the underlying array correctly?;How would you allow dragging items between two completely separate lists?

Directives;Standalone Components

How does the CDK Overlay service help you build components like tooltips and dropdown menus that need to appear above everything else?

Advanced

The Overlay service creates a floating container attached to the page independent of the normal component layout, letting you position content precisely relative to a trigger element, and it handles things like closing when the user clicks outside or scrolls away, which would otherwise be complex to build correctly from scratch.

import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

constructor(private overlay: Overlay) {}

openTooltip() {
  const overlayRef = this.overlay.create();
  overlayRef.attach(new ComponentPortal(TooltipComponent));
}

Real-world example A data table shows a tooltip that always appears correctly above a specific column header, no matter where the table is scrolled to, thanks to the CDK Overlay service handling positioning and scroll tracking automatically.

Common follow-ups: How does the Overlay service decide where exactly to position the floating content?;What happens to an overlay if the page is resized while it is open?

Angular Material & UI Component Libraries;Components & Templates

What does the CDK's virtual scrolling feature do, and why is it useful for very long lists?

Intermediate

Virtual scrolling only renders the items currently visible on screen, plus a small buffer, instead of rendering every single item in a very long list at once. This keeps the page fast and responsive even when a list contains thousands of items, since the browser never has to manage thousands of real DOM elements at the same time.

import { ScrollingModule } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-big-list',
  template: `
    <cdk-virtual-scroll-viewport itemSize="50" style="height: 400px">
      <div *cdkVirtualFor="let item of items">{{ item }}</div>
    </cdk-virtual-scroll-viewport>
  `
})
export class BigListComponent { items = Array.from({ length: 10000 }); }

Real-world example A contacts app with ten thousand entries stays smooth and fast while scrolling, using the CDK's virtual scroll viewport to only render the handful of contacts currently visible on screen at any moment.

Common follow-ups: What happens if list items have different heights instead of a fixed itemSize?;How much of a real performance difference does virtual scrolling make for a list this large?

Performance & Lazy Loading;Directives

What is a Layout module in the Angular CDK used for?

Beginner

The CDK Layout module provides tools for detecting the current screen size and responding to changes, such as switching between a mobile and desktop layout, using a simple observable that emits whenever the matched screen size condition changes.

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe(Breakpoints.Handset).subscribe((result) => {
    this.isMobile = result.matches;
  });
}

Real-world example A navigation bar switches from a full horizontal menu to a collapsible hamburger menu automatically when the CDK's BreakpointObserver detects the screen has become mobile sized.

Common follow-ups: What predefined breakpoints does the CDK provide besides Handset?;How does this compare to using plain CSS media queries for responsive design?

Angular Material & UI Component Libraries;RxJS & Observables