CngxMediaQuery

DirectivePrimaryv0.1.0

projects/common/layout/observers/media-query.directive.ts

Import#

import { CngxMediaQuery } from '@cngx/common/layout'

Description#

Reactive media query directive that exposes a matches signal.

Wraps window.matchMedia() with automatic cleanup. Usable for responsive layouts, drawer mode switching, conditional rendering, or any behavior that depends on viewport/preference queries.

Responsive drawer mode

<div cngxMediaQuery="(min-width: 1024px)" #mq="cngxMediaQuery">
  <nav [cngxDrawerPanel]="drawer"
       [mode]="mq.matches() ? 'side' : 'over'">
    …
  </nav>
</div>

Conditional content

<div cngxMediaQuery="(prefers-color-scheme: dark)" #dark="cngxMediaQuery">
  @if (dark.matches()) { <span>Dark mode active</span> }
</div>

https://cngxjs.github.io/cngx/examples/#/common/layout/media-query/viewport-breakpoints

Metadata#

Selector: [cngxMediaQuery]
Export as: cngxMediaQuery

Index#

Properties

matches

Inputs

query

Inputs#

query#string

input()Required

The CSS media query string to evaluate.

default { alias: 'cngxMediaQuery' }

Instance Properties#

matches#unknown

Readonly

Whether the media query currently matches.

this.matchesState.asReadonly()