Install
import { WrMedia, provideWrMedia } from 'ngwr/media';
// Optional — override breakpoints (defaults match _breakpoints.scss).
bootstrapApplication(AppComponent, {
providers: [provideWrMedia({ md: 720 })],
});Usage
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
- GuideServer-side rendering"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.
- ServiceWrPlatform`isBrowser` / `isServer` — the guard for code that must not run before there is a viewport to measure.
- GuideMobile & responsiveThe `responsive` modifiers reflow through a container query, so they need no breakpoint signal at all.