Home

Awesome

DEPRECATED LIBRARY - no longer actively maintained.

ngx-responsive

Introduction

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

npm i ngx-responsive --save

If you use Angular 8 in your project.

npm i ngx-responsive@8.2.0 --save

If you use Angular 7 in your project.

npm i ngx-responsive@7.0.1 --save

If you use Angular 6 in your project.

npm i ngx-responsive@6.0.0 --save

If you use Angular 5 in your project.

npm i ngx-responsive@5.0.8 --save

If you use Angular 4 in your project use ng2-responsive.

npm i ng2-responsive --save

RESPONSIVE_DIRECTIVES provides the following features:

How to start

1. Installing the package via npm

npm i ngx-responsive --save

2. Bootstrap the service

import { NgModule } from '@angular/core'
import { ResponsiveModule } from 'ngx-responsive'
...
@NgModule({
    imports: [
      ResponsiveModule.forRoot()
    ],
    declarations: [
      AppComponent
    ],
    providers:[]
})
export class AppModule { }

  import { NgModule } from '@angular/core'
  import { ResponsiveModule } from 'ngx-responsive'
  ...
  const 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
  };
  ...
@NgModule({
    imports: [
      BrowserModule,
      ResponsiveModule.forRoot(config)
    ],
    declarations: [
      AppComponent
    ],
    providers:[]
})
export class AppModule { }

2.1 DIRECTIVES:

In your component to import the RESPONSIVE_DIRECTIVES only need import:

@Component({
  selector: 'my-component',
  template: `
    <p *showItStandard="['iphone','ipad']">I'll show you if I'm a iPhone or ipad device.</p>
    <p *isIphone>I'll show you if I'm a iPhone device.</p>
    <p *isChrome>I'll show you if I'm a chrome browser.</p>
    <p *xl>I'll show you if I'm a xl screen size.</p>
    <p *lg>I'll show you if I'm a lg screen size.</p>
    <p *md>I'll show you if I'm a md screen size.</p>
    <p *sm>I'll show you if I'm a sm screen size.</p>
    <p *xs>I'll show you if I'm a xs screen size.</p>
  `
})

3. ALL RESPONSIVE DIRECTIVES OPTIONS

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>).

{
  device: 'mobile' | 'tablet' | 'smarttv' | 'desktop',
  browser: 'chrome' | 'firefox' | 'ie' | 'safari' | 'opera' | 'silk' | 'yandex' | 'NA',
  pixelratio:  '4k' | 'retina' | '1x',
  ie_version: {
      name: 'ie 7' | 'ie 8' | 'ie 9' | 'ie 10' | 'ie 11' | 'ie +12',
      state: true | false
  },
  game_device: {
      name:  'Playstation 4' | 'Playstation 3' | 'Xbox one' | 'Xbox' | 'Wii' | 'Wii U' | 'Nintendo 3DS' | 'Playstation Vita' | 'PSP'
      state: true | false
  },
  smart_tv: {
      name:  'Chromecast' | 'Apple tv' | 'Google tv' | 'Xbox One' | 'Playstation 4' | 'Generic smartv'
      state: true | false
  },
  desktop: {
      name:  'Windows' | 'Mac' | 'Linux',
      state: true | false
  },
  tablet: {
      name:  'Ipad' | 'Android' | 'Kindle' | 'Generic Tablet',
      state: true | false
  },
  mobile: {
      name:  'Iphone' | 'Android' |  'Windows Phone' | 'Blackberry' | 'Generic Mobile'
      state: true | false
  },
  window_os: {
      name:  'Windows XP' | 'Windows Vista' | 'Windows 7' | 'Windows 8' | 'Windows 10' | 'Generic Windows'
      state: true | false
  },
  linux_os: {
      name:  'Debian' | 'Knoppix' | 'Mint' | 'Ubuntu' | 'Kubuntu' | 'Xubuntu' | 'Lubuntu' | 'Fedora' | 'Red hat' | 'Mandriva' | 'Gentoo' | 'Sabayon' | 'Slackware' | 'Suse' | 'CentOS' | 'Backtrack' | 'Generic Linux',
      state: true | false
  },
  bot: true | false
}

NEXT STEPS

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

Contributors

License

MIT license