import {LayoutModule} from '@angular/cdk/layout';
BreakpointObserver
Utility for checking the matching state of @media queries.
| isMatched | |
|---|---|
|
Whether one or more media queries match the current viewport size. |
|
| Parameters | |
|
value string | string[]
|
One or more media queries to check. |
| Returns | |
boolean
|
Whether any of the media queries match. |
| observe | |
|---|---|
|
Gets an observable of results for the given queries that will emit new results for any changes in matching of the given queries. |
|
| Parameters | |
|
value string | string[]
|
One or more media queries to check. |
| Returns | |
Observable<BreakpointState>
|
A stream of matches for the given queries. |
MediaMatcher
A utility for calling matchMedia queries.
| matchMedia | |
|---|---|
|
Evaluates the given media query and returns the native MediaQueryList from which results can be retrieved. Confirms the layout engine will trigger for the selector query provided and returns the MediaQueryList for the query provided. |
|
| Parameters | |
|
query string
|
|
| Returns | |
MediaQueryList
|
|
BreakpointState
The current state of a layout breakpoint.
| Name | Description |
|---|---|
|
A key boolean pair for each query provided to the observe method, with its current matched state. |
|
Whether the breakpoint is currently matching. |
Breakpoints
const Breakpoints: { XSmall: string; Small: string; Medium: string; Large: string; XLarge: string; Handset: string; Tablet: string; Web: string; HandsetPortrait: string; TabletPortrait: string; WebPortrait: string; HandsetLandscape: string; TabletLandscape: string; WebLandscape: string; };