@stefanski/ngx-responsive2
Advanced tools
Readme
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
The npm package @stefanski/ngx-responsive2 receives a total of 3 weekly downloads. As such, @stefanski/ngx-responsive2 popularity was classified as not popular.
We found that @stefanski/ngx-responsive2 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
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.