ng2-responsive

![n2-responsive](/img/ng2-responsive-0-4-0-thin.jpg?raw=true) # Introduction Superset of **RESPONSIVE DIRECTIVES** to show or hide items according to the size of the device screen and another features in Angular 2 ( aot & jit ) ``` npm i ng2-responsive --save ``` `RESPONSIVE_DIRECTIVES` provides the following features: - Directives detecting states according to standard measures in BOOTSTRAP: xs / sm / md / lg / xl - Directives that detect four states according to the real type of device: mobile / tablet / desktop / smartTv - Custom sizes detector. - Show and hide options. - Custom breaking points. - Debounce checking interval (default 100ms). - Browsers Detect: Chrome / Safari / Firefox / IE / Opera - Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12 - New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone. - Device orientation detect: portrait, landscape. - Pixel ratio detect : 1x / Retina / 4k. - Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, PixelRatioInfo. - Directive: responsive - Detection of multiple functions at once. - Directives: DeviceStandardInfo, BrowserInfo, IeInfo. - Feature Responsive Directive - Boolean Events Emitter on change state: - Feature responsive-window : Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide. - UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object. - ** NEW ** Webpack Angular 2 Demo : Initial Angular 2 / Webpack / bootstrap + sass. - Written for the latest release of Angular 2 in typescript. # How to start 1. installing the package via npm ``` npm i ng2-responsive --save ``` 2. bootstrap the service * with default breaking points ``` import { NgModule } from '@angular/core' import { ResponsiveModule } from 'ng2-responsive' ... @NgModule({ imports: [ ResponsiveModule ], declarations: [ AppComponent ], providers:[] }) export class AppModule { } ``` * with custom Configuration ``` import { NgModule } from '@angular/core' import { ResponsiveModule, ResponsiveConfig } from 'ng2-responsive' ... let config = { breakPoints: { xs: {max: 600}, sm: {min: 601, max: 959}, md: {min: 960, max: 1279}, lg: {min: 1280, max: 1919}, xl: {min: 1920} }, debounceTime: 100 // allow to debounce checking timer }; export function ResponsiveDefinition(){ return new ResponsiveConfig(config); }; ... @NgModule({ imports: [ ResponsiveModule ], declarations: [ AppComponent ], providers:[{ provide: ResponsiveConfig, useFactory: ResponsiveDefinition }] }) export class AppModule { } ``` 3.DIRECTIVES: * In your component to import the RESPONSIVE_DIRECTIVES only need import: ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a iPhone or ipad device. I'll show you if I'm a iPhone device. I'll show you if I'm a chrome browser. I'll show you if I'm a xl screen size. I'll show you if I'm a lg screen size. I'll show you if I'm a md screen size. I'll show you if I'm a sm screen size. I'll show you if I'm a xs screen size. ' }) ``` 4. ALL RESPONSIVE DIRECTIVES OPTIONS * Responsive Window directive: Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide. ``` <div [responsive-window]="'parent'"> </div> ``` 1. * New Detection of multiple functions at once. ``` All combinations = *responsive="{ bootstrap: ['xl,lg,md,sm,xs'], browser: ['chrome','firefox','ie','safari', 'opera'], ie:['ie 9','ie 10','ie 11','ie +12'], pixelratio:['1x','retina','4k'], standard:['iphone','ipad','android mobile','android tablet','windows phone'], orientation:['landscape','portrait'], device: ['mobile','tablet','smarttv','desktop'], sizes:{min:900,max:1400} } ``` *Example in component ``` @Component({ selector: 'my-component', template: ' I'll show you if all the options are true. <template [responsive]="{ bootstrap: 'lg', browser: ['chrome','firefox'], pixelratio:'1x', orientation:'landscape', device: 'desktop', sizes:{min:900,max:1400} }" (changes)="miMethod($event)">I'll show you if all the options are true & listen events changes.</template> ' }) ``` 2. One function detect * With Bootstrap Screen sizes ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a xl screen size. I'll show you if I'm a lg screen size. I'll show you if I'm a md screen size. I'll show you if I'm a sm screen size. I'll show you if I'm a xs screen size. ' }) ``` * With multiple combinations of bootstrap screen sizes and show / hide options - Strings Multiple combinations = "['xs','sm','md','lg','xl']" ``` @Component({ selector: 'my-component', template: ' I'll show you only in md and xs screen sizes. I'll hide you only in lg and sm screen sizes.' }) ``` * With Devices Screen sizes ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a smartTv device. I'll show you if I'm a desktop device. I'll show you if I'm a tablet device. I'll show you if I'm a mobile device. ' }) ``` * With multiple devices detect combinations: show / hide options. - Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']" ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a tablet or a mobile device. I'll hide you if I'm a desktop / tablet or mobile device.' }) ``` * With Standard Devices detect ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a iPhone device. I'll show you if I'm a iPad device. I'll show you if I'm a android mobile device. I'll show you if I'm a android tablet device. I'll show you if I'm a windows phone mobile device.' }) ``` * With multiple devices detect combinations: show / hide options. - Strings Multiple combinations = "['iphone','ipad','android mobile','android tablet','windows phone']" ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a android mobile or a windows phone device. I'll hide you if I'm a iPad or a iPhone device.' }) ``` * With orientation device ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a portrait state. I'll show you if I'm a landscape state. ' }) ``` * With custom sizes and show / hide options ``` @Component({ selector: 'my-component', template: ' I'll show you if responsive-window width is between the min and max. I'll show you if responsive-window width is greater than or equal to min. It is hidden if responsive-window width between the min and max. ' }) ``` responsive-window being window by default or any element set using the Responsive Window directive. * With browser detection. ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a Chrome Browser. I'll show you if I'm a Firefox Browser. I'll show you if I'm a Safari Browser. I'll show you if I'm a Opera Browser. I'll show you if I'm a Internet Explorer Browser. ' }) ``` * With multiple browsers detect combinations: show / hide options. - Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']" ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a IE or Opera Browser. I'll hide you if I'm a Chrome, Firefox or Safari Browser.' }) ``` * With Internet Explorer Version detection. ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a Internet Explorer 9. I'll show you if I'm a Internet Explorer 10. I'll show you if I'm a Internet Explorer 11. I'll show you if I'm a Internet Explorer 12.' }) ``` * With multiple Internet Explorer version detect: show / hide options. - Strings Multiple combinations = "['ie 9','ie 10','ie 11','ie +12']" ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a IE 11 browser or IE 12 I'll hide you if I'm IE 9 browser or IE 10. ' }) ``` * With pixel ratio detect: ``` @Component({ selector: 'my-component', template: ' I'll show you if I'm a 1x screen. I'll show you if I'm a retina screen. I'll show you if I'm a 4k screen. ' }) ``` * Get the userAgent info directive: - Get the device, browser, os version and more from the user agent navigator in one event object. ``` <userAgentInfo (info)="thisUserAgent($event)"></userAgentInfo> ``` # NEXT STEPS - Refactor to more simple code and easy to maintain. Less specific directives. - Work in demo page - Directive css classes: ``` <h1 *responsive-css="{ bootstrap: {xl: "micssclassxl", lg:"micssclasslg"}, orientation:{landscape:"micssclasslandscape"} }"></h1> ``` - Webp images browser compatibility: ``` <img *webp="{webp:image.webp, not:image.jpg", lazyload:true} alt="awesome directive"> ``` - animations show/hide in directives - Expose changes in directives like a service. # Contributors * ManuCutillas * Christophe HOARAU * Kamil Breguła * Janne Julkunen * phransyz # License [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)