API: Core
ViewportMatchDirective
Structural/behavioral directive that exposes viewport breakpoint signals and applies CSS classes based on the default breakpoints.
Overview
Structural/behavioral directive that exposes viewport breakpoint signals and applies CSS classes based on the default breakpoints. Useful for responsive logic without media queries.
- Kind: Directive
- Export as:
qzViewportMatch - Source: packages/core/src/viewport/viewport-match.directive.ts:31
Selector
[qzViewportMatch]
Inputs
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
minWidth |
number | null |
null |
Custom min-width breakpoint to match. | |
maxWidth |
number | null |
null |
Custom max-width breakpoint to match. |
Properties
| Name | Type | Description |
|---|---|---|
readonly matchesMin |
Signal<boolean> |
Whether the viewport matches the custom minWidth (if provided). |
readonly matchesMax |
Signal<boolean> |
Whether the viewport matches the custom maxWidth (if provided). |
readonly matches |
Signal<boolean> |
Combined match for custom min + max. |
readonly isMobile |
Signal<boolean> |
|
readonly isTablet |
Signal<boolean> |
|
readonly isDesktop |
Signal<boolean> |
|
readonly width |
Signal<number> |
|
readonly height |
Signal<number> |