{"id":14973335,"url":"https://github.com/manucutillas/ngx-responsive","last_synced_at":"2025-05-16T17:03:31.520Z","repository":{"id":50145394,"uuid":"59582073","full_name":"ManuCutillas/ngx-responsive","owner":"ManuCutillas","description":"Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9","archived":false,"fork":false,"pushed_at":"2024-04-04T23:39:19.000Z","size":2404,"stargazers_count":297,"open_issues_count":39,"forks_count":72,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-16T17:02:48.219Z","etag":null,"topics":["angular","angular-2","angular5","bootstrap","detection","ngx","progressive","progressive-web-app","pwa","responsive","rxjs","tablet","useragent"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ManuCutillas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-24T14:49:40.000Z","updated_at":"2024-07-25T18:04:17.000Z","dependencies_parsed_at":"2024-06-14T00:11:02.525Z","dependency_job_id":null,"html_url":"https://github.com/ManuCutillas/ngx-responsive","commit_stats":{"total_commits":203,"total_committers":19,"mean_commits":10.68421052631579,"dds":"0.29556650246305416","last_synced_commit":"731edd258c839184a931abca37cf39b357e832b8"},"previous_names":["manucutillas/responsive-directives-angular2","manucutillas/ng2-responsive"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuCutillas%2Fngx-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuCutillas%2Fngx-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuCutillas%2Fngx-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuCutillas%2Fngx-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManuCutillas","download_url":"https://codeload.github.com/ManuCutillas/ngx-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254573589,"owners_count":22093731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-2","angular5","bootstrap","detection","ngx","progressive","progressive-web-app","pwa","responsive","rxjs","tablet","useragent"],"created_at":"2024-09-24T13:48:34.326Z","updated_at":"2025-05-16T17:03:31.495Z","avatar_url":"https://github.com/ManuCutillas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DEPRECATED LIBRARY - no longer actively maintained.\n\n![ngx-responsive](/img/ng2-responsive-0-4-0-thin.jpg?raw=true)\n\n# Introduction\n\nSuperset of **RESPONSIVE DIRECTIVES** to show or hide items according to the size of the device screen and another features in Angular 9.\n\n```bash\nnpm i ngx-responsive --save\n```\n\n### If you use Angular 8 in your project.\n\n```bash\nnpm i ngx-responsive@8.2.0 --save\n```\n\n### If you use Angular 7 in your project.\n\n```bash\nnpm i ngx-responsive@7.0.1 --save\n```\n\n### If you use Angular 6 in your project.\n\n```bash\nnpm i ngx-responsive@6.0.0 --save\n```\n\n### If you use Angular 5 in your project.\n\n```bash\nnpm i ngx-responsive@5.0.8 --save\n```\n\n- Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)\n\n### If you use Angular 4 in your project use ng2-responsive.\n\n```bash\nnpm i ng2-responsive --save\n```\n\n- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)\n\n`RESPONSIVE_DIRECTIVES` provides the following features:\n\n- Directives detecting states according to standard measures in BOOTSTRAP: xs / sm / md / lg / xl\n- Directives that detect four states according to the real type of device: mobile / tablet / desktop / smartTv\n- Custom sizes detector.\n- Show and hide options.\n- Custom breaking points.\n- Debounce checking interval (default 100ms).\n- Browsers Detect: Chrome / Safari / Firefox / IE / Opera\n- Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12\n- New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone.\n- Device orientation detect: portrait, landscape.\n- Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.\n- Directive: responsive - Detection of multiple functions at once.\n- Feature Responsive Directive - Boolean Events Emitter on change state:\n- 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.\n- UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object.\n- **New Feature :** Reactive services that expose changes through observables:\n  - BrowserInfoRx\n  - IeInfoRx\n  - DeviceInfoRx\n  - DeviceStandardInfoRx\n  - OrientationInfoRx\n  - ResponsiveSizeInfoRx\n  - UserAgentInfoRx\n\n# How to start\n\n#### 1. Installing the package via npm\n\n  ```bash\n  npm i ngx-responsive --save\n  ```\n#### 2. Bootstrap the service\n\n  - #### With default breaking points\n\n  ```typescript\n  import { NgModule } from '@angular/core'\n  import { ResponsiveModule } from 'ngx-responsive'\n  ...\n  @NgModule({\n      imports: [\n        ResponsiveModule.forRoot()\n      ],\n      declarations: [\n        AppComponent\n      ],\n      providers:[]\n  })\n  export class AppModule { }\n  ```\n\n  - #### With custom Configuration\n\n  ```typescript\n    import { NgModule } from '@angular/core'\n    import { ResponsiveModule } from 'ngx-responsive'\n    ...\n    const config = {\n      breakPoints: {\n          xs: {max: 600},\n          sm: {min: 601, max: 959},\n          md: {min: 960, max: 1279},\n          lg: {min: 1280, max: 1919},\n          xl: {min: 1920}\n      },\n      debounceTime: 100\n    };\n    ...\n  @NgModule({\n      imports: [\n        BrowserModule,\n        ResponsiveModule.forRoot(config)\n      ],\n      declarations: [\n        AppComponent\n      ],\n      providers:[]\n  })\n  export class AppModule { }\n  ```\n  #### 2.1 DIRECTIVES:\n  In your component to import the RESPONSIVE_DIRECTIVES only need import:\n  ```typescript\n  @Component({\n    selector: 'my-component',\n    template: `\n      \u003cp *showItStandard=\"['iphone','ipad']\"\u003eI'll show you if I'm a iPhone or ipad device.\u003c/p\u003e\n      \u003cp *isIphone\u003eI'll show you if I'm a iPhone device.\u003c/p\u003e\n      \u003cp *isChrome\u003eI'll show you if I'm a chrome browser.\u003c/p\u003e\n      \u003cp *xl\u003eI'll show you if I'm a xl screen size.\u003c/p\u003e\n      \u003cp *lg\u003eI'll show you if I'm a lg screen size.\u003c/p\u003e\n      \u003cp *md\u003eI'll show you if I'm a md screen size.\u003c/p\u003e\n      \u003cp *sm\u003eI'll show you if I'm a sm screen size.\u003c/p\u003e\n      \u003cp *xs\u003eI'll show you if I'm a xs screen size.\u003c/p\u003e\n    `\n  })\n  ```\n\n#### 3. ALL RESPONSIVE DIRECTIVES OPTIONS\n\n- #### 3.1 Responsive Window directive.\n  Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.\n\n  #### 3.1.1 First syntax\n\n  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\n\n  ```html\n  \u003cdiv [responsive-window]=\"'parent'\"\u003e\n      \u003cp *responsive=\"{ sizes:{  window: 'parent', min:900, max:1400} }\"\u003e...\u003c/p\u003e\n  \u003c/div\u003e\n  ```\n\n  #### 3.1.2 Second syntax\n\n  Define a reference to the parent element\n\n  ```html\n    \u003cdiv responsive-window #myContainerRef=\"container\"\u003e\n        \u003cp *responsive=\"{ sizes: { min:900, max:1400 } } ; container:myContainerRef\"\u003e...\u003c/p\u003e\n    \u003c/div\u003e\n  ```\n\n  Or:\n\n  ```html\n  \u003cdiv responsive-window #myContainerRef=\"container\"\u003e\n    \u003cng-template [responsive]=\"{ sizes:{ min:900, max:1400 } }\" [responsiveContainer]=\"myContainerRef\"\u003e\n        \u003cp\u003e....\u003c/p\u003e\n    \u003c/ng-template\u003e\n  \u003c/div\u003e\n  ```\n\n- #### 3.2 New Detection of multiple functions at once.\n\n  All combinations\n  \n  ```typescript\n    *responsive=\"{\n      bootstrap: ['xl','lg','md','sm','xs'],\n      browser: ['chrome','firefox','ie','safari', 'opera'],\n      ie:['ie 9','ie 10','ie 11','ie +12'],\n      pixelratio:['1x','retina','4k'],\n      standard:['iphone','ipad','android mobile','android tablet','windows phone'],\n      orientation:['landscape','portrait'],\n      device: ['mobile','tablet','smarttv','desktop'],\n      sizes:{min:900,max:1400}\n    }\"\n  ```\n\n  \\*Example in component\n\n  ```typescript\n  @Component({\n    selector: 'my-component',\n    template: `\n      \u003cp  *responsive=\"{\n                      bootstrap: 'lg',\n                      browser: ['chrome','firefox'],\n                      pixelratio:'1x',\n                      orientation:'landscape',\n                      device: 'desktop',\n                      sizes:{min:900,max:1400}\n        }\"\u003eI'll show you if all the options are true.\u003c/p\u003e\n\n        \u003ctemplate  [responsive]=\"{\n                      bootstrap: 'lg',\n                      browser: ['chrome','firefox'],\n                      pixelratio:'1x',\n                      orientation:'landscape',\n                      device: 'desktop',\n                      sizes:{min:900,max:1400}\n        }\" (changes)=\"miMethod($event)\"\u003eI'll show you if all the options are true \u0026 listen events changes.\u003c/template\u003e\n    `\n    })\n  ```\n\n- #### 3.3 One function detect\n\n  - #### With Bootstrap Screen sizes\n\n  ```typescript\n    @Component({\n      selector: 'my-component',\n      template: `\n        \u003cp *xl\u003eI'll show you if I'm a xl screen size.\u003c/p\u003e\n        \u003cp *lg\u003eI'll show you if I'm a lg screen size.\u003c/p\u003e\n        \u003cp *md\u003eI'll show you if I'm a md screen size.\u003c/p\u003e\n        \u003cp *sm\u003eI'll show you if I'm a sm screen size.\u003c/p\u003e\n        \u003cp *xs\u003eI'll show you if I'm a xs screen size.\u003c/p\u003e\n      `\n      })\n  ```\n\n  - #### With multiple combinations of bootstrap screen sizes and show / hide options\n    - #### Strings Multiple combinations = \"['xs','sm','md','lg','xl']\"\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showItBootstrap=\"['md','xs']\"\u003eI'll show you only in md and xs screen sizes.\u003c/p\u003e\n            \u003cp *hideItBootstrap=\"['lg','sm']\"\u003eI'll hide you only in lg and sm screen sizes.\u003c/p\u003e\n          `\n      })\n      ```\n\n      - #### With Devices Screen sizes\n\n      ```typescript\n      @Component({\n            selector: 'my-component',\n            template: `\n              \u003cp *isSmartTv\u003eI'll show you if I'm a smartTv device.\u003c/p\u003e\n              \u003cp *isDesktop\u003eI'll show you if I'm a desktop device.\u003c/p\u003e\n              \u003cp *isTablet\u003eI'll show you if I'm a tablet device.\u003c/p\u003e\n              \u003cp *isMobile\u003eI'll show you if I'm a mobile device.\u003c/p\u003e\n            `\n      })\n      ```\n\n  - #### With multiple devices detect combinations: show / hide options.\n    - #### Strings Multiple combinations = \"['mobile','tablet','smarttv','desktop']\"\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showItDevice=\"['mobile','tablet']\"\u003eI'll show you if I'm a tablet or a mobile device.\u003c/p\u003e\n            \u003cp *hideItDevice=\"['mobile','tablet','desktop']\"\u003eI'll hide you if I'm a desktop / tablet or mobile device.\u003c/p\u003e\n          `\n      })\n      ```\n\n      - #### With Standard Devices detect\n\n      ```typescript\n        @Component({\n            selector: 'my-component',\n            template: `\n              \u003cp *isIphone\u003eI'll show you if I'm a iPhone device.\u003c/p\u003e\n              \u003cp *isIpad\u003eI'll show you if I'm a iPad device.\u003c/p\u003e\n              \u003cp *isAndroidMobile\u003eI'll show you if I'm a android mobile device.\u003c/p\u003e\n              \u003cp *isAndroidTablet\u003eI'll show you if I'm a android tablet device.\u003c/p\u003e\n              \u003cp *isWindowsPhone\u003eI'll show you if I'm a windows phone mobile device.\u003c/p\u003e\n            `\n          })\n      ```\n\n  - #### With multiple devices detect combinations: show / hide options.\n    - #### Strings Multiple combinations = \"['iphone','ipad','android mobile','android tablet','windows phone']\"\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showItStandard=\"['android mobile','windows phone']\"\u003eI'll show you if I'm a android mobile or a windows phone device.\u003c/p\u003e\n            \u003cp *hideItStandard=\"['iphone','ipad']\"\u003eI'll hide you if I'm a iPad or a iPhone device.\u003c/p\u003e\n          `\n      })\n      ```\n\n      - #### With orientation device\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *isPortrait\u003eI'll show you if I'm a portrait state.\u003c/p\u003e\n            \u003cp *isLandscape\u003eI'll show you if I'm a landscape state.\u003c/p\u003e\n          `\n      })\n      ```\n\n      - #### With custom sizes and show / hide options\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showItSizes=\"{min:955,max:1057}\"\u003eI'll show you if responsive-window width is between the min and max.\u003c/p\u003e\n            \u003cp *showItSizes=\"{min:750}\"\u003eI'll show you if responsive-window width is greater than or equal to min.\u003c/p\u003e\n            \u003cp *hideItSizes=\"{min:360,max:768}\"\u003eIt is hidden if responsive-window width between the min and max.\u003c/p\u003e\n          `\n      })\n      ```\n\n  - #### Responsive-window being window by default or any element set using the Responsive Window directive.\n\n    - #### With browser detection.\n\n      ```typescript\n      @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *isChrome\u003eI'll show you if I'm a Chrome Browser.\u003c/p\u003e\n            \u003cp *isFirefox\u003eI'll show you if I'm a Firefox Browser.\u003c/p\u003e\n            \u003cp *isSafari\u003eI'll show you if I'm a Safari Browser.\u003c/p\u003e\n            \u003cp *isOpera\u003eI'll show you if I'm a Opera Browser.\u003c/p\u003e\n            \u003cp *isIE\u003eI'll show you if I'm a Internet Explorer Browser.\u003c/p\u003e\n          `\n      })\n      ```\n\n      - #### With multiple browsers detect combinations: show / hide options.\n        - #### Strings Multiple combinations = \"['chrome','firefox','ie','safari', 'opera']\"\n\n        ```typescript\n        @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showItBrowser=\"['ie','opera']\"\u003eI'll show you if I'm a IE or Opera Browser.\u003c/p\u003e\n            \u003cp *hideItBrowser=\"['chrome','firefox','safari']\"\u003eI'll hide you if I'm a Chrome, Firefox or Safari Browser.\u003c/p\u003e\n          `\n        })\n        ```\n\n        - #### With Internet Explorer Version detection.\n\n        ```typescript\n        @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *isIE9\u003eI'll show you if I'm a Internet Explorer 9.\u003c/p\u003e\n            \u003cp *isIE10\u003eI'll show you if I'm a Internet Explorer 10.\u003c/p\u003e\n            \u003cp *isIE11\u003eI'll show you if I'm a Internet Explorer 11.\u003c/p\u003e\n            \u003cp *isIE12\u003eI'll show you if I'm a Internet Explorer 12.\u003c/p\u003e\n          `\n        })\n        ```\n\n      - #### With multiple Internet Explorer version detect: show / hide options.\n        - #### Strings Multiple combinations = \"['ie 9','ie 10','ie 11','ie +12']\"\n\n        ```typescript\n        @Component({\n          selector: 'my-component',\n          template: `\n            \u003cp *showIEVersion=\"['ie 11','ie +12']\"\u003eI'll show you if I'm a IE 11 browser or IE 12\u003c/p\u003e\n            \u003cp *hideIEVersion=\"['ie 9','ie 10']\"\u003eI'll hide you if I'm IE 9 browser or IE 10.\u003c/p\u003e\n          `\n        })\n        ```\n\n      - #### Get the userAgent info directive:\n        Get the device, browser, os version and more from the user agent navigator in one event object.\n\n        ```html\n        \u003cuser-agent-info (info)=\"thisUserAgent($event)\"\u003e\u003c/user-agent-info\u003e\n        ```\n\n#### 4. FORMAT OF USER AGENT INFO OBJECT\n\nDescription of the object given by the `(info)` event of the directive `user-agent-info`\n(usage: `\u003cuser-agent-info (info)=\"thisUserAgent($event)\"\u003e\u003c/user-agent-info\u003e`).\n\n```js\n{\n  device: 'mobile' | 'tablet' | 'smarttv' | 'desktop',\n  browser: 'chrome' | 'firefox' | 'ie' | 'safari' | 'opera' | 'silk' | 'yandex' | 'NA',\n  pixelratio:  '4k' | 'retina' | '1x',\n  ie_version: {\n      name: 'ie 7' | 'ie 8' | 'ie 9' | 'ie 10' | 'ie 11' | 'ie +12',\n      state: true | false\n  },\n  game_device: {\n      name:  'Playstation 4' | 'Playstation 3' | 'Xbox one' | 'Xbox' | 'Wii' | 'Wii U' | 'Nintendo 3DS' | 'Playstation Vita' | 'PSP'\n      state: true | false\n  },\n  smart_tv: {\n      name:  'Chromecast' | 'Apple tv' | 'Google tv' | 'Xbox One' | 'Playstation 4' | 'Generic smartv'\n      state: true | false\n  },\n  desktop: {\n      name:  'Windows' | 'Mac' | 'Linux',\n      state: true | false\n  },\n  tablet: {\n      name:  'Ipad' | 'Android' | 'Kindle' | 'Generic Tablet',\n      state: true | false\n  },\n  mobile: {\n      name:  'Iphone' | 'Android' |  'Windows Phone' | 'Blackberry' | 'Generic Mobile'\n      state: true | false\n  },\n  window_os: {\n      name:  'Windows XP' | 'Windows Vista' | 'Windows 7' | 'Windows 8' | 'Windows 10' | 'Generic Windows'\n      state: true | false\n  },\n  linux_os: {\n      name:  'Debian' | 'Knoppix' | 'Mint' | 'Ubuntu' | 'Kubuntu' | 'Xubuntu' | 'Lubuntu' | 'Fedora' | 'Red hat' | 'Mandriva' | 'Gentoo' | 'Sabayon' | 'Slackware' | 'Suse' | 'CentOS' | 'Backtrack' | 'Generic Linux',\n      state: true | false\n  },\n  bot: true | false\n}\n```\n\n# NEXT STEPS\n\n- Unit test and e2e.\n- Create a documentation page.\n- Work in demo page\n- Directive css classes:\n\n```html\n\u003ch1 *responsive-css=\"{\n  bootstrap: {xl: 'micssclassxl', lg: 'micssclasslg'},\n  orientation:{landscape: 'micssclasslandscape'}\n}\"\u003e\u003c/h1\u003e\n\n```\n\n- animations show/hide in directives\n\n# Contributors\n\n- Manu Cutillas\n- Christophe HOARAU\n- Kamil Breguła\n- Janne Julkunen\n- phransyz\n- Michael Burger\n- Alyssa Brunswick\n- Quentin\n- Thomas Christensen\n- lydemann\n- MattSenter\n\n# License\n\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanucutillas%2Fngx-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanucutillas%2Fngx-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanucutillas%2Fngx-responsive/lists"}