MediaQuery: Automatically close menu with Angular and Material design

import { NgZone } from '@angular/core';

const SMALL_WIDTH_BREAKPOINT = 720;

constructor(zone: NgZone)

private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }

In de HTML:

  <mat-sidenav #sidenav class="docs-component-viewer-sidenav"
              [opened]="!isScreenSmall()"
              [mode]="isScreenSmall() ? 'over' : 'side'"
              [fixedInViewport]="isScreenSmall()"
              fixedTopGap="92">