DEPRECATED LIBRARY - no longer actively maintained.

Introduction

Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9.

1npm i @viablelogic/ngx-responsive

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.
• Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.
• Directive: responsive - Detection of multiple functions at once.
• 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 Feature : Reactive services that expose changes through observables:
  • BrowserInfoRx
  • IeInfoRx
  • DeviceInfoRx
  • DeviceStandardInfoRx
  • OrientationInfoRx
  • ResponsiveSizeInfoRx
  • UserAgentInfoRx

How to start

1. Installing the package via npm

1npm i ngx-responsive --save

2. Bootstrap the service

• With default breaking points

1import { NgModule } from '@angular/core'
2import { ResponsiveModule } from '@viablelogic/ngx-responsive'
3...
4@NgModule({
5    imports: [
6      ResponsiveModule.forRoot()
7    ],
8    declarations: [
9      AppComponent
10    ],
11    providers:[]
12})
13export class AppModule { }

• With custom Configuration

1  import { NgModule } from '@angular/core'
2  import { ResponsiveModule } from '@viablelogic/ngx-responsive'
3  ...
4  const config = {
5    breakPoints: {
6        xs: {max: 600},
7        sm: {min: 601, max: 959},
8        md: {min: 960, max: 1279},
9        lg: {min: 1280, max: 1919},
10        xl: {min: 1920}
11    },
12    debounceTime: 100
13  };
14  ...
15@NgModule({
16    imports: [
17      BrowserModule,
18      ResponsiveModule.forRoot(config)
19    ],
20    declarations: [
21      AppComponent
22    ],
23    providers:[]
24})
25export class AppModule { }

2.1 DIRECTIVES:

In your component to import the RESPONSIVE_DIRECTIVES only need import:

1@Component({
2  selector: 'my-component',
3  template: `
4    <p *showItStandard="['iphone','ipad']">I'll show you if I'm a iPhone or ipad device.</p>
5    <p *isIphone>I'll show you if I'm a iPhone device.</p>
6    <p *isChrome>I'll show you if I'm a chrome browser.</p>
7    <p *xl>I'll show you if I'm a xl screen size.</p>
8    <p *lg>I'll show you if I'm a lg screen size.</p>
9    <p *md>I'll show you if I'm a md screen size.</p>
10    <p *sm>I'll show you if I'm a sm screen size.</p>
11    <p *xs>I'll show you if I'm a xs screen size.</p>
12  `
13})

3. ALL RESPONSIVE DIRECTIVES OPTIONS

• 3.1 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.

  3.1.1 First syntax

  Define a named parrent element, the reference is stored on the service and available outside of the current container. Name must be unique to avoid conflicts

  1<div [responsive-window]="'parent'">
  2    <p *responsive="{ sizes:{  window: 'parent', min:900, max:1400} }">...</p>
  3</div>

  3.1.2 Second syntax

  Define a reference to the parent element

  1  <div responsive-window #myContainerRef="container">
  2      <p *responsive="{ sizes: { min:900, max:1400 } } ; container:myContainerRef">...</p>
  3  </div>

  Or:

  1<div responsive-window #myContainerRef="container">
  2  <ng-template [responsive]="{ sizes:{ min:900, max:1400 } }" [responsiveContainer]="myContainerRef">
  3      <p>....</p>
  4  </ng-template>
  5</div>

• 3.2 New Detection of multiple functions at once.

  All combinations

  1  *responsive="{
  2    bootstrap: ['xl','lg','md','sm','xs'],
  3    browser: ['chrome','firefox','ie','safari', 'opera'],
  4    ie:['ie 9','ie 10','ie 11','ie +12'],
  5    pixelratio:['1x','retina','4k'],
  6    standard:['iphone','ipad','android mobile','android tablet','windows phone'],
  7    orientation:['landscape','portrait'],
  8    device: ['mobile','tablet','smarttv','desktop'],
  9    sizes:{min:900,max:1400}
  10  }"

  *Example in component

  1@Component({
  2  selector: 'my-component',
  3  template: `
  4    <p  *responsive="{
  5                    bootstrap: 'lg',
  6                    browser: ['chrome','firefox'],
  7                    pixelratio:'1x',
  8                    orientation:'landscape',
  9                    device: 'desktop',
  10                    sizes:{min:900,max:1400}
  11      }">I'll show you if all the options are true.</p>
  12
  13      <template  [responsive]="{
  14                    bootstrap: 'lg',
  15                    browser: ['chrome','firefox'],
  16                    pixelratio:'1x',
  17                    orientation:'landscape',
  18                    device: 'desktop',
  19                    sizes:{min:900,max:1400}
  20      }" (changes)="miMethod($event)">I'll show you if all the options are true & listen events changes.</template>
  21  `
  22  })

• 3.3 One function detect

  • With Bootstrap Screen sizes

  1  @Component({
  2    selector: 'my-component',
  3    template: `
  4      <p *xl>I'll show you if I'm a xl screen size.</p>
  5      <p *lg>I'll show you if I'm a lg screen size.</p>
  6      <p *md>I'll show you if I'm a md screen size.</p>
  7      <p *sm>I'll show you if I'm a sm screen size.</p>
  8      <p *xs>I'll show you if I'm a xs screen size.</p>
  9    `
  10    })

  • With multiple combinations of bootstrap screen sizes and show / hide options

    • Strings Multiple combinations = "['xs','sm','md','lg','xl']"

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *showItBootstrap="['md','xs']">I'll show you only in md and xs screen sizes.</p>
      5      <p *hideItBootstrap="['lg','sm']">I'll hide you only in lg and sm screen sizes.</p>
      6    `
      7})

      • With Devices Screen sizes

      1@Component({
      2      selector: 'my-component',
      3      template: `
      4        <p *isSmartTv>I'll show you if I'm a smartTv device.</p>
      5        <p *isDesktop>I'll show you if I'm a desktop device.</p>
      6        <p *isTablet>I'll show you if I'm a tablet device.</p>
      7        <p *isMobile>I'll show you if I'm a mobile device.</p>
      8      `
      9})

  • With multiple devices detect combinations: show / hide options.

    • Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *showItDevice="['mobile','tablet']">I'll show you if I'm a tablet or a mobile device.</p>
      5      <p *hideItDevice="['mobile','tablet','desktop']">I'll hide you if I'm a desktop / tablet or mobile device.</p>
      6    `
      7})

      • With Standard Devices detect

      1  @Component({
      2      selector: 'my-component',
      3      template: `
      4        <p *isIphone>I'll show you if I'm a iPhone device.</p>
      5        <p *isIpad>I'll show you if I'm a iPad device.</p>
      6        <p *isAndroidMobile>I'll show you if I'm a android mobile device.</p>
      7        <p *isAndroidTablet>I'll show you if I'm a android tablet device.</p>
      8        <p *isWindowsPhone>I'll show you if I'm a windows phone mobile device.</p>
      9      `
      10    })

  • With multiple devices detect combinations: show / hide options.

    • Strings Multiple combinations = "['iphone','ipad','android mobile','android tablet','windows phone']"

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *showItStandard="['android mobile','windows phone']">I'll show you if I'm a android mobile or a windows phone device.</p>
      5      <p *hideItStandard="['iphone','ipad']">I'll hide you if I'm a iPad or a iPhone device.</p>
      6    `
      7})

      • With orientation device

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *isPortrait>I'll show you if I'm a portrait state.</p>
      5      <p *isLandscape>I'll show you if I'm a landscape state.</p>
      6    `
      7})

      • With custom sizes and show / hide options

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *showItSizes="{min:955,max:1057}">I'll show you if responsive-window width is between the min and max.</p>
      5      <p *showItSizes="{min:750}">I'll show you if responsive-window width is greater than or equal to min.</p>
      6      <p *hideItSizes="{min:360,max:768}">It is hidden if responsive-window width between the min and max.</p>
      7    `
      8})

  • Responsive-window being window by default or any element set using the Responsive Window directive.

    • With browser detection.

      1@Component({
      2    selector: 'my-component',
      3    template: `
      4      <p *isChrome>I'll show you if I'm a Chrome Browser.</p>
      5      <p *isFirefox>I'll show you if I'm a Firefox Browser.</p>
      6      <p *isSafari>I'll show you if I'm a Safari Browser.</p>
      7      <p *isOpera>I'll show you if I'm a Opera Browser.</p>
      8      <p *isIE>I'll show you if I'm a Internet Explorer Browser.</p>
      9    `
      10})

      • With multiple browsers detect combinations: show / hide options.

        • Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"

        1@Component({
        2  selector: 'my-component',
        3  template: `
        4    <p *showItBrowser="['ie','opera']">I'll show you if I'm a IE or Opera Browser.</p>
        5    <p *hideItBrowser="['chrome','firefox','safari']">I'll hide you if I'm a Chrome, Firefox or Safari Browser.</p>
        6  `
        7})

        • With Internet Explorer Version detection.

        1@Component({
        2  selector: 'my-component',
        3  template: `
        4    <p *isIE9>I'll show you if I'm a Internet Explorer 9.</p>
        5    <p *isIE10>I'll show you if I'm a Internet Explorer 10.</p>
        6    <p *isIE11>I'll show you if I'm a Internet Explorer 11.</p>
        7    <p *isIE12>I'll show you if I'm a Internet Explorer 12.</p>
        8  `
        9})

      • With multiple Internet Explorer version detect: show / hide options.

        • Strings Multiple combinations = "['ie 9','ie 10','ie 11','ie +12']"

        1@Component({
        2  selector: 'my-component',
        3  template: `
        4    <p *showIEVersion="['ie 11','ie +12']">I'll show you if I'm a IE 11 browser or IE 12</p>
        5    <p *hideIEVersion="['ie 9','ie 10']">I'll hide you if I'm IE 9 browser or IE 10.</p>
        6  `
        7})

      • Get the userAgent info directive:

        Get the device, browser, os version and more from the user agent navigator in one event object.

        1<user-agent-info (info)="thisUserAgent($event)"></user-agent-info>

4. FORMAT OF USER AGENT INFO OBJECT

Description of the object given by the (info) event of the directive user-agent-info (usage: <user-agent-info (info)="thisUserAgent($event)"></user-agent-info>).

1{
2  device: 'mobile' | 'tablet' | 'smarttv' | 'desktop',
3  browser: 'chrome' | 'firefox' | 'ie' | 'safari' | 'opera' | 'silk' | 'yandex' | 'NA',
4  pixelratio:  '4k' | 'retina' | '1x',
5  ie_version: {
6      name: 'ie 7' | 'ie 8' | 'ie 9' | 'ie 10' | 'ie 11' | 'ie +12',
7      state: true | false
8  },
9  game_device: {
10      name:  'Playstation 4' | 'Playstation 3' | 'Xbox one' | 'Xbox' | 'Wii' | 'Wii U' | 'Nintendo 3DS' | 'Playstation Vita' | 'PSP'
11      state: true | false
12  },
13  smart_tv: {
14      name:  'Chromecast' | 'Apple tv' | 'Google tv' | 'Xbox One' | 'Playstation 4' | 'Generic smartv'
15      state: true | false
16  },
17  desktop: {
18      name:  'Windows' | 'Mac' | 'Linux',
19      state: true | false
20  },
21  tablet: {
22      name:  'Ipad' | 'Android' | 'Kindle' | 'Generic Tablet',
23      state: true | false
24  },
25  mobile: {
26      name:  'Iphone' | 'Android' |  'Windows Phone' | 'Blackberry' | 'Generic Mobile'
27      state: true | false
28  },
29  window_os: {
30      name:  'Windows XP' | 'Windows Vista' | 'Windows 7' | 'Windows 8' | 'Windows 10' | 'Generic Windows'
31      state: true | false
32  },
33  linux_os: {
34      name:  'Debian' | 'Knoppix' | 'Mint' | 'Ubuntu' | 'Kubuntu' | 'Xubuntu' | 'Lubuntu' | 'Fedora' | 'Red hat' | 'Mandriva' | 'Gentoo' | 'Sabayon' | 'Slackware' | 'Suse' | 'CentOS' | 'Backtrack' | 'Generic Linux',
35      state: true | false
36  },
37  bot: true | false
38}

NEXT STEPS

• Unit test and e2e.
• Create a documentation page.
• Work in demo page
• Directive css classes:

1<h1 *responsive-css="{
2  bootstrap: {xl: 'micssclassxl', lg: 'micssclasslg'},
3  orientation:{landscape: 'micssclasslandscape'}
4}"></h1>
5

• animations show/hide in directives

Contributors

• Manu Cutillas
• Christophe HOARAU
• Kamil Breguła
• Janne Julkunen
• phransyz
• Michael Burger
• Alyssa Brunswick
• Quentin
• Thomas Christensen
• lydemann
• MattSenter

License