@stefanski/ngx-responsive
Advanced tools
Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9
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
npm i ngx-responsive@8.2.0 --save
npm i ngx-responsive@7.0.1 --save
npm i ngx-responsive@6.0.0 --save
npm i ngx-responsive@5.0.8 --save
npm i ng2-responsive --save
RESPONSIVE_DIRECTIVES provides the following features:
npm i ngx-responsive --save
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 { }
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>
`
})
Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
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
<div [responsive-window]="'parent'">
<p *responsive="{ sizes:{ window: 'parent', min:900, max:1400} }">...</p>
</div>
Define a reference to the parent element
<div responsive-window #myContainerRef="container">
<p *responsive="{ sizes: { min:900, max:1400 } } ; container:myContainerRef">...</p>
</div>
Or:
<div responsive-window #myContainerRef="container">
<ng-template [responsive]="{ sizes:{ min:900, max:1400 } }" [responsiveContainer]="myContainerRef">
<p>....</p>
</ng-template>
</div>
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: `
<p *responsive="{
bootstrap: 'lg',
browser: ['chrome','firefox'],
pixelratio:'1x',
orientation:'landscape',
device: 'desktop',
sizes:{min:900,max:1400}
}">I'll show you if all the options are true.</p>
<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>
`
})
@Component({
selector: 'my-component',
template: `
<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>
`
})
@Component({
selector: 'my-component',
template: `
<p *showItBootstrap="['md','xs']">I'll show you only in md and xs screen sizes.</p>
<p *hideItBootstrap="['lg','sm']">I'll hide you only in lg and sm screen sizes.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *isSmartTv>I'll show you if I'm a smartTv device.</p>
<p *isDesktop>I'll show you if I'm a desktop device.</p>
<p *isTablet>I'll show you if I'm a tablet device.</p>
<p *isMobile>I'll show you if I'm a mobile device.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *showItDevice="['mobile','tablet']">I'll show you if I'm a tablet or a mobile device.</p>
<p *hideItDevice="['mobile','tablet','desktop']">I'll hide you if I'm a desktop / tablet or mobile device.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *isIphone>I'll show you if I'm a iPhone device.</p>
<p *isIpad>I'll show you if I'm a iPad device.</p>
<p *isAndroidMobile>I'll show you if I'm a android mobile device.</p>
<p *isAndroidTablet>I'll show you if I'm a android tablet device.</p>
<p *isWindowsPhone>I'll show you if I'm a windows phone mobile device.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *showItStandard="['android mobile','windows phone']">I'll show you if I'm a android mobile or a windows phone device.</p>
<p *hideItStandard="['iphone','ipad']">I'll hide you if I'm a iPad or a iPhone device.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *isPortrait>I'll show you if I'm a portrait state.</p>
<p *isLandscape>I'll show you if I'm a landscape state.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *showItSizes="{min:955,max:1057}">I'll show you if responsive-window width is between the min and max.</p>
<p *showItSizes="{min:750}">I'll show you if responsive-window width is greater than or equal to min.</p>
<p *hideItSizes="{min:360,max:768}">It is hidden if responsive-window width between the min and max.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *isChrome>I'll show you if I'm a Chrome Browser.</p>
<p *isFirefox>I'll show you if I'm a Firefox Browser.</p>
<p *isSafari>I'll show you if I'm a Safari Browser.</p>
<p *isOpera>I'll show you if I'm a Opera Browser.</p>
<p *isIE>I'll show you if I'm a Internet Explorer Browser.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *showItBrowser="['ie','opera']">I'll show you if I'm a IE or Opera Browser.</p>
<p *hideItBrowser="['chrome','firefox','safari']">I'll hide you if I'm a Chrome, Firefox or Safari Browser.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *isIE9>I'll show you if I'm a Internet Explorer 9.</p>
<p *isIE10>I'll show you if I'm a Internet Explorer 10.</p>
<p *isIE11>I'll show you if I'm a Internet Explorer 11.</p>
<p *isIE12>I'll show you if I'm a Internet Explorer 12.</p>
`
})
@Component({
selector: 'my-component',
template: `
<p *showIEVersion="['ie 11','ie +12']">I'll show you if I'm a IE 11 browser or IE 12</p>
<p *hideIEVersion="['ie 9','ie 10']">I'll hide you if I'm IE 9 browser or IE 10.</p>
`
})
Get the device, browser, os version and more from the user agent navigator in one event object.
<user-agent-info (info)="thisUserAgent($event)"></user-agent-info>
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
}
<h1 *responsive-css="{
bootstrap: {xl: 'micssclassxl', lg: 'micssclasslg'},
orientation:{landscape: 'micssclasslandscape'}
}"></h1>
FAQs
Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9
We found that @stefanski/ngx-responsive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.