Core

Media

The Media service provides a reactive API to track media query changes. It supports both responsive breakpoints and user preferences such as prefers-color-scheme. Internally, it uses the Angular CDK's MediaMatcher and Signals to expose reactive media state.

Overview

Responsive layouts and adaptive UI behavior often rely on media queries. Rather than scattering matchMedia logic throughout your components, this service centralizes and standardizes media query handling in a reactive way. It also automatically cleans up listeners and integrates with Angular’s platform detection.

Signal-based media tracking: Creates a signal for each media query, letting you reactively respond to viewport or preference changes.
Automatic cleanup: Listeners are removed automatically on component destroy, avoiding memory leaks.
Browser-only logic: Media queries are only activated on the client side to ensure SSR safety.

Provider Setup

To use media query utilities, add the provideMedia function to your application configuration:

import { provideMedia } from '@/app/core/media';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMedia(),
    // ...other providers
  ],
};

Usage

private media = inject(Media);
protected isMobile = computed(() => this.media.match('(max-width: 767px)')());

You can use the signal directly inside components or templates using computed() or inject it into services to react to media state changes.

How It Works

The match() method takes a media query string and returns a Signal<boolean> that tracks whether the query currently matches.
On the client, it sets up a listener for the media query and updates the signal when it changes.
On the server, the media query evaluation is skipped entirely to prevent runtime errors.

When to Use

Reactively track responsive breakpoints like mobile or tablet views
Detect user preferences such as prefers-reduced-motion or prefers-color-scheme
Use in components or services to adapt UI layout or behavior dynamically