# WrMedia

> Signal-backed viewport queries. Named breakpoints mirror `_breakpoints.scss`; raw matchMedia strings work too.

Source: https://ngwr.dev/reference/services/media  
Kind: Service

## Install

```angular-ts
import { WrMedia, provideWrMedia } from 'ngwr/media';

// Optional — override breakpoints (defaults match _breakpoints.scss).
bootstrapApplication(AppComponent, {
  providers: [provideWrMedia({ md: 720 })],
});
```

## Usage

```angular-ts
private readonly media = inject(WrMedia);

protected readonly isMd = this.media.matches('md');
protected readonly isWide = this.media.matches('(min-width: 1200px)');
protected readonly current = this.media.current; // 'xs' | 'sm' | ...
```

## Why ngwr provides this

`matchMedia` is imperative and needs manual listener cleanup; this exposes breakpoint queries as signals that just work in templates and `computed()`.

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `matches(query)` | Signal\<boolean> for a named breakpoint or raw matchMedia query. Cached + SSR-safe. | `(q: WrBreakpoint \| string) => Signal<boolean>` | `—` |
| `current` | Active breakpoint key — `xs` / `sm` / `md` / `lg` / `xl` / `xxl`. | `Signal<WrBreakpoint>` | `—` |
| `provideWrMedia(breakpoints?)` | Override the breakpoint map. Partial — merged with defaults. | `(map?: Partial<WrBreakpointMap>) => EnvironmentProviders` | `—` |

## See also

- [Server-side rendering](https://ngwr.dev/guides/ssr) — "SSR-safe" above means the calls do not throw, not that they answer. A server has no viewport, so `matches()` is `false` and `current()` is `xs` until hydration — the guide has the full table and the CSS reflow that avoids the swap.
- [WrPlatform](https://ngwr.dev/reference/services/platform) — `isBrowser` / `isServer` — the guard for code that must not run before there is a viewport to measure.
- [Mobile & responsive](https://ngwr.dev/guides/mobile) — The `responsive` modifiers reflow through a container query, so they need no breakpoint signal at all.