mediaobservable-observable

mediaobservable.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Angular Flex-Layout';

  /**
   *
   * @param mediaObserver
   */
  constructor(public mediaObserver: MediaObserver) {}
  private mediaSubscription!: Subscription;
  private activeMediaQuery: string = '';

  ngOnInit(): void {
      const getAlias = (MediaChange: MediaChange[]) => {
      return MediaChange[0].mqAlias;
    };

    this.mediaSubscription = this.mediaObserver
      .asObservable()
      .pipe(
        distinctUntilChanged(
          (x: MediaChange[], y: MediaChange[]) => getAlias(x) === getAlias(y)
        )
      )
      .subscribe((change) => {
        change.forEach((item) => {
          this.activeMediaQuery = item
            ? `'${item.mqAlias}' = (${item.mediaQuery})`
            : '';
          if (item.mqAlias === 'md') {
            this.loadMobileContent();
          }
          console.log('activeMediaQuery', this.activeMediaQuery);
        });
      });
  }

  ngOnDestroy(): void {
    this.mediaSubscription.unsubscribe();
  }

  loadMobileContent() {
    console.log('load mobile content');
   
    // Do something special since the viewport is currently
    // using mobile display sizes.
  }
}