README
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:
@NgModule({
imports: [
NgxCdkResponsiveModule
]
})
The library consists of two directives: responsive
and responsiveSwitch
+ responsiveCase
.
Two quick code examples:
<p *responsive="{'Small and smaller': onSmall}" >Default</p>
<ng-template #onSmall>
<p>Small and smaller</p>
</ng-template>
<ng-container responsiveSwitch>
<p *responsiveCase="'<= Small'">Small</p>
<p *responsiveDefault>Default</p>
</ng-container>
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.
<p *responsive="{'Small and smaller': onSmall, 'Medium': onMedium}">Default</p>
<ng-template #onSmall>
<p>Small and smaller</p>
</ng-template>
<ng-template #onMedium>
<p>Medium</p>
</ng-template>
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.
<ng-container responsiveSwitch>
<p *responsiveCase="'<= Small'">Small</p>
<p *responsiveCase="'Medium'">Medium</p>
<p *responsiveDefault>Default Fallback</p>
</ng-container>
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:
<ng-container responsiveSwitch>
<!--<p *responsiveCase="'Small and smaller'">Small</p>-->
<p *responsiveCase="'<= Small'">Small</p>
<p *responsiveCase="'Medium'">Medium</p>
<p *responsiveCase="'Large and larger'">Large</p>
<!--<p *responsiveCase="'>=Large'">XLarge</p>-->
</ng-container>
<p *responsiveCase="'<= Small and larger'">Small</p>
will not work.
and observeupdate
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
<p *responsive="{'Small and smaller': none}; observe: observePoints; update: onChange