Layout

The layout package provides utilities to build responsive UIs that react to screen-size changes.

link BreakpointObserver

BreakpointObserver is a utility for evaluating media queries and reacting to their changing.

link Evaluate against the current viewport

The isMatched method is used to evaluate one or more media queries against the current viewport size.

const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');

link React to changes to the viewport

The observe method is used to get an observable stream that will emit whenever one of the given media queries would have a different result.

const layoutChanges = breakpointObserver.observe([
  '(orientation: portrait)',
  '(orientation: landscape)',
]);

layoutChanges.subscribe(result => {
  updateMyLayoutForOrientationChange();
});

link Default breakpoints

A set of default media queries are available corresponding to breakpoints for different device types.

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

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

The built-in breakpoints based on Google's Material Design specification. The available values are:

• Handset
• Tablet
• Web
• HandsetPortrait
• TabletPortrait
• WebPortrait
• HandsetLandscape
• TabletLandscape
• WebLandscape

link MediaMatcher

MediaMatcher is a lower-level utility that wraps the native matchMedia. This service normalizes browser differences and serves as a convenient API that can be replaced with a fake in unit tests. The matchMedia method can be used to get a native MediaQueryList.

@Component({...})
class MyComponent {
  constructor(mediaMatcher: MediaMatcher) {
    const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
  }
}