Tutorial
Detecting Breakpoints Using the Angular CDK
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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.