The Angular CDK has a layout package with services that make it easy to detect viewport sizes and matches against media queries. This allows you full control over the UI and to adapt to different screen sizes.

Let’s quickly go over how to use the CDK’s layout module.

Setup

First, you’ll want to make sure you have the Angular CDK installed into your app:

$ npm install @angular/cdk

# or, using Yarn:
$ yarn add @angular/cdk

Then import the layout module and and add it to your NgModule’s list of imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LayoutModule } from '@angular/cdk/layout';

import { AppComponent } from './app.component';

You can now start using the available services and utilities in your components. Let’s go over them one by one.

BreakpointObserver

BreakpointObserver is a service with two methods: isMatched and observe.

BreakpointObserver.observe

The observe method returns an observable of type BreakpointState and can be used to observe when the viewport changes between matching a media query or not.

Here’s a simple example where a message is logged to the console if the viewport size changes between being less than 500px and equal to or more than 500px:

import { Component, OnInit } from '@angular/core';

import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
@Component({ ... })
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

The BreakpointState interface gives us a boolean property called matches.

Instead of using hand-written media queries, we can also make use of the Breakpoints object, which gives us keys for common breakpoints:

// ...

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

@Component({ ... })
export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log(
            'Matches small viewport or handset in portrait mode'
          );
        }
      });
  }
}

BreakpointObserver.isMatching

For simple one-off matching, we can use the isMatching method instead. This will log a message if the viewport is at least 40rem tall when the component initializes:

// ...

ngOnInit() {
  if (this.breakpointObserver.isMatched('(min-height: 40rem)')) {
    console.log('Enough room!');
  }
}

// ...

MediaMatcher

MediaMatcher is a service that wraps around JavaScript’s matchMedia. As with BreakpointObserver.observe, it can also be used to observe changes in the viewport size against a given media query. For example:

import { Component, OnInit, OnDestroy } from '@angular/core';

import { MediaMatcher } from '@angular/cdk/layout';

@Component({ ... })
export class AppComponent implements OnInit, OnDestroy {
  matcher: MediaQueryList;

  constructor(public mediaMatcher: MediaMatcher) {}

  ngOnInit() {
    this.matcher = this.mediaMatcher.matchMedia('(min-width: 500px)');

    this.matcher.addListener(this.myListener);
  }

  ngOnDestroy() {
    this.matcher.removeListener(this.myListener);
  }

  myListener(event) {
    console.log(event.matches ? 'match' : 'no match');
  }
}

The difference with BreakpointObserver.observe is that MediaMatcher gives us access to the native MatchQueryList object, which may be needed in certain scenarios.

🏄 Now you should have everything you need to react or adapt your UI to different viewport sizes in Angular. You can refer to this page for the CDK’s layout module API reference.