Angular › Angular CDK (Component Dev Kit)

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

Beginner

Answer

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