ngx-cdk-responsive
This library provides a simple responsive
directive that helps you switch templates on different sizes.
It build on top of the @angular/cdk
.
Installation
npm i ngx-cdk-responsive
Import in your module:
The library consists of two directives: responsive
and responsiveSwitch
+ responsiveCase
.
Two quick code examples:
Default Small and smaller
Small Default
responsive
Usage of The responsive
directives is a structural directives added to any element. It takes a map of Breakpoint → TemplateRef
pairs as input.
The first breakpoint that matches will have its template rendered. If no breakpoints match the template in the host will be used.
Default Small and smaller Medium
responsiveSwitch
Usage of Create a wrapper element like ng-container
with the responsiveSwitch
directory
and put your cases inside. The first matching case will be used.
Small Medium Default Fallback
Available Breakpoints
Both the responsive
input object and responsiveCase
directive take a string that describes the breakpoint.
The following @angular/cdk
breakpoints are available.
- XSmall
- Small
- Medium
- Large
- XLarge
- Handset
- Tablet
- Web
- HandsetPortrait
- TabletPortrait
- WebPortrait
- HandsetLandscape
- TabletLandscape
- WebLandscape
All breakpoints can be extended be either using the prefixes <=
/ >=
or the suffixes and smaller
/ and larger
. They mean the same.
Consider the following working example:
<!--<p *responsiveCase="'Small and smaller'">Small</p>--> Small Medium Large <!--<p *responsiveCase="'>=Large'">XLarge</p>-->
<p *responsiveCase="'<= Small and larger'">Small</p>
will not work.
observe
and update
Both main directives have an input observe
, that determine on which breakpoint
changes the templates should be updated. When a template is rendered the output (update)
will emit.
Unfortunately structural directives don't have outputs. For the responsive
write
Default
onChange$ = new Subject; ngOnInit
observe
The value of observe
is an array of strings that represent queries.
See https://material.angular.io/cdk/layout/overview#react-to-changes-to-the-viewport
Small Medium Large
;// ...observePoints = ; hasChangednewSize: string
The Observe
namespace contain triggers for the following cases:
ORIENTATION
→ orientation changesMAX_WIDTH(value: number, unit: string = "px")
→max_width
query matching changes (e.g. window was below givenmax_width
, now above)MIN_WIDTH(value: number, unit: string = "px")
→min_width
query matching changesANY_WINDOW_CHANGE
→ Whenever one of the 5 window sizesxs, s, m, l, xl
changes.