createMediaQuerySignal

Description#

Creates a reactive Signal<boolean> that reflects whether host currently matches a CSS media query.

Seeds from MediaQueryList.matches, updates on the change event, and removes the listener when destroyRef is destroyed. On a host without matchMedia (SSR, jsdom) the signal stays false and no listener is wired, so it never throws off the browser.

This is the shared kernel behind injectMediaQuery, CngxMediaQuery, CngxSkeleton, CngxReducedMotion, and the stepper's mobile-viewport signal; consumers that hand-roll a matchMedia listener should route through it instead.

const compact = createMediaQuerySignal(
  '(max-width: 640px)',
  inject(DestroyRef),
  inject(DOCUMENT).defaultView,
);