Media Matcher Resize Angular 2+

Media Matcher Resize

app.component.ts

Angular 2+

import {
	Component,
	ChangeDetectorRef
} from '@angular/core';
import {
	MediaMatcher
} from '@angular/cdk/layout';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  mobileQuery: MediaQueryList;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 500px)');
    this.mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this.mobileQueryListener);
  }

  private mobileQueryListener: () => void;

  ngOnDestroy() {
    this.mobileQuery.removeListener(this.mobileQueryListener);
  }

}

app.component.html

Angular 2+

<p *ngIf="mobileQuery.matches else pc">on mobile response</p>
<ng-template #pc>on desktop response</ng-template>

app.module.ts

Angular 2+

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }