Answer by Stavm for Angular window resize event

I haven't seen anyone talking about MediaMatcher of angular/cdk.

You can define a MediaQuery and attach a listener to it - then anywhere on your template (or ts) you can invoke stuff if the Matcher is matched.LiveExample

App.Component.ts

import {Component, ChangeDetectorRef} from '@angular/core';import {MediaMatcher} from '@angular/cdk/layout';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  mobileQuery: MediaQueryList;  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {    this.mobileQuery = media.matchMedia('(max-width: 600px)');    this._mobileQueryListener = () => changeDetectorRef.detectChanges();    this.mobileQuery.addListener(this._mobileQueryListener);  }  private _mobileQueryListener: () => void;  ngOnDestroy() {    this.mobileQuery.removeListener(this._mobileQueryListener);  }}

App.Component.Html

<div [class]="mobileQuery.matches ? 'text-red' : 'text-blue'"> I turn red on mobile mode </div>

App.Component.css

.text-red {    color: red;}.text-blue {   color: blue;}

source: https://material.angular.io/components/sidenav/overview