mediaObserver

mediaObserver.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private mediaObserver: MediaObserver) {}

  cols: Observable<any> | undefined;

  ngOnInit(): void {
    const grid = new Map([
      ['xs', 1],
      ['sm', 2],
      ['md', 3],
      ['lg', 4],
      ['xl', 5],
    ]);

    this.cols = this.mediaObserver.asObservable().pipe(
      map((change: MediaChange[]) => {
        console.log(change[0]);
        console.log(grid.get(change[0].mqAlias));
        return grid.get(change[0].mqAlias);
      })
    );
  }
}