Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manucutillas/ngx-responsive
Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9
https://github.com/manucutillas/ngx-responsive
angular angular-2 angular5 bootstrap detection ngx progressive progressive-web-app pwa responsive rxjs tablet useragent
Last synced: 2 days ago
JSON representation
Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9
- Host: GitHub
- URL: https://github.com/manucutillas/ngx-responsive
- Owner: ManuCutillas
- License: mit
- Created: 2016-05-24T14:49:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T23:39:19.000Z (10 months ago)
- Last Synced: 2025-01-12T22:04:37.125Z (9 days ago)
- Topics: angular, angular-2, angular5, bootstrap, detection, ngx, progressive, progressive-web-app, pwa, responsive, rxjs, tablet, useragent
- Language: TypeScript
- Homepage:
- Size: 2.29 MB
- Stars: 297
- Watchers: 18
- Forks: 72
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```bash
npm i ngx-responsive --save
```
### If you use Angular 8 in your project.
```bash
npm i [email protected] --save
```
### If you use Angular 7 in your project.
```bash
npm i [email protected] --save
```
### If you use Angular 6 in your project.
```bash
npm i [email protected] --save
```
### If you use Angular 5 in your project.
```bash
npm i [email protected] --save
```
- Branch : [[email protected]](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)
### If you use Angular 4 in your project use ng2-responsive.
```bash
npm i ng2-responsive --save
```
- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)
`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
```bash
npm i ngx-responsive --save
```
#### 2. Bootstrap the service
- #### With default breaking points
```typescript
import { NgModule } from '@angular/core'
import { ResponsiveModule } from 'ngx-responsive'
...
@NgModule({
imports: [
ResponsiveModule.forRoot()
],
declarations: [
AppComponent
],
providers:[]
})
export class AppModule { }
```
- #### With custom Configuration
```typescript
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:
```typescript
@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.
`
})
```
#### 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
```html
...
```
#### 3.1.2 Second syntax
Define a reference to the parent element
```html
...
```
Or:
```html
....
```
- #### 3.2 New Detection of multiple functions at once.
All combinations
```typescript
*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
```typescript
@Component({
selector: 'my-component',
template: `
I'll show you if all the options are true.
I'll show you if all the options are true & listen events changes.
`
})
```
- #### 3.3 One function detect
- #### With Bootstrap Screen sizes
```typescript
@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']"
```typescript
@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
```typescript
@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']"
```typescript
@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
```typescript
@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']"
```typescript
@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
```typescript
@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
```typescript
@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.
```typescript
@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']"
```typescript
@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.
```typescript
@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']"
```typescript
@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.
`
})
```
- #### Get the userAgent info directive:
Get the device, browser, os version and more from the user agent navigator in one event object.
```html
```
#### 4. FORMAT OF USER AGENT INFO OBJECT
Description of the object given by the `(info)` event of the directive `user-agent-info`
(usage: ``).
```js
{
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
- Unit test and e2e.
- Create a documentation page.
- Work in demo page
- Directive css classes:
```html
```
- 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
[](http://opensource.org/licenses/MIT)