MediaObserver

The injectable MediaObserver service will provide mediaQuery activations notifications for all registered BreakPoints.

This service is essentially an Observable that exposes both features to subscribe to mediaQuery changes and a validator method .isActive() to test if a mediaQuery (or alias) is currently active.

Only mediaChange activations (not deactivations) are announced by the MediaObserver!

---

API Summary

The injectable MediaObserver service has two (2) APIs:

• media$: Observable<MediaChange>
• isActive(query: string): boolean

---

1. MediaObserver::media$

media$: Observable<MediaChange>

Developers use Angular DI to inject a reference to the MediaObserver service as a constructor parameter.

Shown below is the service injection and the subscription to the observable: to get programmatic notifications regarding mediaQuery activations.

import {Component, OnDestroy} from '@angular/core';
import {Subscription} from 'rxjs';
import {MediaChange, MediaObserver} from '@angular/flex-layout';

@Component({
   selector : 'responsive-component'
})
export class MyDemo implements OnDestroy {
  watcher: Subscription;
  activeMediaQuery = '';

  constructor(mediaObserver: MediaObserver) {
    this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
      this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
      if ( change.mqAlias == 'xs') {
         this.loadMobileContent();
      }
    });
  }

  ngOnDestroy() {
    this.watcher.unsubscribe();
  }

  loadMobileContent() { 
    // Do something special since the viewport is currently
    // using mobile display sizes
  }
}

This class uses the BreakPoint Registry to inject alias information into the raw MediaChange notification. For custom mediaQuery notifications, alias information will not be injected and those fields will be ''.

2. MediaObserver::isActive()

isActive(query: string): boolean

This method is useful both for expressions in component templates and in component imperative logic. The query can be an alias or a mediaQuery.

For example:

• print and (max-width: 600px) is a mediaQuery for printing with mobile viewport sizes.
• xs is an alias associated with the mediaQuery for mobile viewport sizes.

import {Component, OnInit} from '@angular/core';
import {MediaChange, MediaObserver} from '@angular/flex-layout';

const PRINT_MOBILE = 'print and (max-width: 600px)';

@Component({
   selector : 'responsive-component',
   template: `
      <div class="ad-content" *ngIf="mediaObserver.isActive('xs')">
        Only shown if on mobile viewport sizes
      </div>
   `
})
export class MyDemo implements OnInit {
  constructor(public mediaObserver: MediaObserver) { }

  ngOnInit() {
    if (this.mediaObserver.isActive('xs') && !this.mediaObserver.isActive(PRINT_MOBILE)) {
       this.loadMobileContent();
    }
  }

  loadMobileContent() { /* .... */ }
}

MediaChange class

MediaChange is an object that contains details about a mediaQuery event. It has the following properties:

• matches - whether the mediaQuery is currently activated, defaults to false
• mediaQuery - e.g. (min-width: 600px) and (max-width: 959px), defaults to 'all'
• mqAlias - e.g. gt-sm, md, gt-lg, defaults to ''
• suffix - e.g. GtSM, Md, GtLg, defaults to ''