MatchMedia

MatchMedia

MatchMedia is the low-level service used by the library to observe media query activations.

In most cases you should prefer MediaObserver for app-level responsive state. Use MatchMedia only for advanced/custom flows.

RxJS API (base)

import { MatchMedia } from 'ng-flex-layout/core';

constructor(private matchMedia: MatchMedia) {
  matchMedia.observe(['(min-width: 600px)']).subscribe(change => {
    // change.matches, change.mediaQuery
  });
}

Signals wrapper (non-breaking)

observeAsSignal() is a convenience wrapper around toSignal(matchMedia.observe(...)).

import { Injector, effect, inject } from '@angular/core';
import { MatchMedia } from 'ng-flex-layout/core';

export class MyCmp {
  private readonly injector = inject(Injector);
  private readonly matchMedia = inject(MatchMedia);

  readonly mq = this.matchMedia.observeAsSignal(['(min-width: 600px)'], { injector: this.injector });

  constructor() {
    effect(() => {
      const change = this.mq();
      // react to change.matches
    });
  }
}