From 7440dd4f718bb7035a4c93736e6caace040d51ea Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:05:42 +0200
Subject: [PATCH 1/9] test

---
 .prettierrc                                   |   8 +
 package.json                                  | 208 +++++++++---------
 .../bootstrap/bootstrap-directives.ts         | 153 +++++++------
 3 files changed, 187 insertions(+), 182 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..8908b9e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "printWidth": 100,
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 4,
+    "semi": true,
+    "bracketSpacing": true
+}
diff --git a/package.json b/package.json
index 4fae5ba..cc15501 100644
--- a/package.json
+++ b/package.json
@@ -1,107 +1,107 @@
 {
-  "$schema": "./node_modules/ng-packagr/package.schema.json",
-  "name": "ngx-responsive",
-  "version": "9.0.3",
-  "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
-  "scripts": {
-    "start": "ng serve --aot",
-    "build": "ng-packagr -p ng-package.json",
-    "build:watch": "onchange -i -k 'src/**/*.ts' -- npm run build",
-    "compodoc": "compodoc -p tsconfig.json",
-    "compodoc:serve": "compodoc -s",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/index.ts"
+    "$schema": "./node_modules/ng-packagr/package.schema.json",
+    "name": "@stefanski/ngx-responsive",
+    "version": "9.0.4",
+    "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
+    "scripts": {
+        "start": "ng serve --aot",
+        "build": "ng-packagr -p ng-package.json",
+        "build:watch": "onchange -i -k 'src/**/*.ts' -- npm run build",
+        "compodoc": "compodoc -p tsconfig.json",
+        "compodoc:serve": "compodoc -s",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "ngPackage": {
+        "lib": {
+            "entryFile": "src/index.ts"
+        }
+    },
+    "typings": "./index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ManuCutillas/ngx-responsive.git"
+    },
+    "keywords": [
+        "angular",
+        "angular2",
+        "angular4",
+        "angular5",
+        "angular6",
+        "angular7",
+        "angular8",
+        "angular9",
+        "angular10",
+        "ng2",
+        "ng",
+        "ngx",
+        "responsive",
+        "bootstrap",
+        "detect",
+        "mobile",
+        "tablet",
+        "useragent",
+        "devices",
+        "screen",
+        "typescript",
+        "directive",
+        "retina",
+        "browsers",
+        "universal",
+        "directives"
+    ],
+    "author": "Manu Cutillas <manucutillas@outlook.com>",
+    "contributors": [
+        "Christophe HOARAU (https://github.com/no-more)",
+        "Kamil Breguła (https://github.com/mik-laj)",
+        "Janne Julkunen (https://github.com/sconix)",
+        "paulyipkh (https://github.com/paulyipkh)",
+        "mburger81 (https://github.com/mburger81)",
+        "Alyssa Brunswick (https://github.com/alyssabrunswick)",
+        "Quentin (https://github.com/bobbybobby)",
+        "Thomas Christensen (https://github.com/tocDK)",
+        "Christian Lüdemann (https://github.com/lydemann)",
+        "Matt Senter (https://github.com/MattSenter)"
+    ],
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/ManuCutillas/ngx-responsive/issues"
+    },
+    "homepage": "https://github.com/ManuCutillas/ngx-responsive",
+    "private": false,
+    "peerDependencies": {
+        "@angular/common": "^9.1.6",
+        "@angular/core": "^9.1.6"
+    },
+    "devDependencies": {
+        "@angular/animations": "^9.1.6",
+        "@angular/cli": "^9.0.1",
+        "@angular/common": "^9.1.6",
+        "@angular/compiler": "^9.1.6",
+        "@angular/compiler-cli": "^9.1.6",
+        "@angular/core": "^9.1.6",
+        "@angular/language-service": "^9.1.6",
+        "@angular/platform-browser": "^9.1.6",
+        "@angular/platform-browser-dynamic": "^9.1.6",
+        "@angular/platform-server": "^9.1.6",
+        "@compodoc/compodoc": "1.1.11",
+        "@nguniversal/express-engine": "^9.1.1",
+        "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
+        "@types/node": "~8.9.4",
+        "copyfiles": "^2.2.0",
+        "cpr": "^3.0.1",
+        "del-cli": "^3.0.0",
+        "codelyzer": "^5.2.2",
+        "ng-packagr": "^9.1.3",
+        "onchange": "^7.0.2",
+        "protractor": "~5.4.4",
+        "source-map-explorer": "^2.4.2",
+        "ts-loader": "^6.2.1",
+        "tsickle": "^0.38.1",
+        "ts-node": "~8.10.1",
+        "tslint": "~6.1.2",
+        "typescript": "~3.8.3",
+        "zone.js": "~0.10.3"
     }
-  },
-  "typings": "./index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ManuCutillas/ngx-responsive.git"
-  },
-  "keywords": [
-    "angular",
-    "angular2",
-    "angular4",
-    "angular5",
-    "angular6",
-    "angular7",
-    "angular8",
-    "angular9",
-    "angular10",
-    "ng2",
-    "ng",
-    "ngx",
-    "responsive",
-    "bootstrap",
-    "detect",
-    "mobile",
-    "tablet",
-    "useragent",
-    "devices",
-    "screen",
-    "typescript",
-    "directive",
-    "retina",
-    "browsers",
-    "universal",
-    "directives"
-  ],
-  "author": "Manu Cutillas <manucutillas@outlook.com>",
-  "contributors": [
-    "Christophe HOARAU (https://github.com/no-more)",
-    "Kamil Breguła (https://github.com/mik-laj)",
-    "Janne Julkunen (https://github.com/sconix)",
-    "paulyipkh (https://github.com/paulyipkh)",
-    "mburger81 (https://github.com/mburger81)",
-    "Alyssa Brunswick (https://github.com/alyssabrunswick)",
-    "Quentin (https://github.com/bobbybobby)",
-    "Thomas Christensen (https://github.com/tocDK)",
-    "Christian Lüdemann (https://github.com/lydemann)",
-    "Matt Senter (https://github.com/MattSenter)"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ManuCutillas/ngx-responsive/issues"
-  },
-  "homepage": "https://github.com/ManuCutillas/ngx-responsive",
-  "private": false,
-  "peerDependencies": {
-    "@angular/common": "^9.1.6",
-    "@angular/core": "^9.1.6"
-  },
-  "devDependencies": {
-    "@angular/animations": "^9.1.6",
-    "@angular/cli": "^9.0.1",
-    "@angular/common": "^9.1.6",
-    "@angular/compiler": "^9.1.6",
-    "@angular/compiler-cli": "^9.1.6",
-    "@angular/core": "^9.1.6",
-    "@angular/language-service": "^9.1.6",
-    "@angular/platform-browser": "^9.1.6",
-    "@angular/platform-browser-dynamic": "^9.1.6",
-    "@angular/platform-server": "^9.1.6",
-    "@compodoc/compodoc": "1.1.11",
-    "@nguniversal/express-engine": "^9.1.1",
-    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
-    "@types/node": "~8.9.4",
-    "copyfiles": "^2.2.0",
-    "cpr": "^3.0.1",
-    "del-cli": "^3.0.0",
-    "codelyzer": "^5.2.2",
-    "ng-packagr": "^9.1.3",
-    "onchange": "^7.0.2",
-    "protractor": "~5.4.4",
-    "source-map-explorer": "^2.4.2",
-    "ts-loader": "^6.2.1",
-    "tsickle": "^0.38.1",
-    "ts-node": "~8.10.1",
-    "tslint": "~6.1.2",
-    "typescript": "~3.8.3",
-    "zone.js": "~0.10.3"
-  }
 }
diff --git a/src/@directives/bootstrap/bootstrap-directives.ts b/src/@directives/bootstrap/bootstrap-directives.ts
index d9b7de1..c11ef6c 100644
--- a/src/@directives/bootstrap/bootstrap-directives.ts
+++ b/src/@directives/bootstrap/bootstrap-directives.ts
@@ -3,141 +3,138 @@
  *  @description bootstrap directives
  *  @license MIT
  */
-import { Directive, Input, TemplateRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
-import { PLATFORM_ID, Inject } from '@angular/core';
-
-import { ResponsiveState } from '../../@core/providers/responsive-state/responsive-state';
-import { RESPONSIVE_BASE } from '../../@core/providers/responsive-base/responsive-base';
+import { ChangeDetectorRef, Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 import { PlatformService } from '../../@core/providers/platform-service/platform.service';
+import { RESPONSIVE_BASE } from '../../@core/providers/responsive-base/responsive-base';
+import { ResponsiveState } from '../../@core/providers/responsive-state/responsive-state';
+
 @Directive({
-    selector: '[xl]'
+    selector: '[xl]',
 })
 export class XlDirective extends RESPONSIVE_BASE<any> {
-
     protected _state = 'xl';
     protected _showWhenTrue = true;
-    
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
-    ) {
 
-        super ( templateRef, viewContainer, _responsiveState, cd, platformService );
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
+    ) {
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
         this.setGrid(this._state, 'bootstrap');
     }
 }
 
-@Directive(
-{
-    selector: '[lg]'
+@Directive({
+    selector: '[lg]',
 })
 export class LgDirective extends RESPONSIVE_BASE<any> {
-
     protected _state = 'lg';
     protected _showWhenTrue = true;
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
-        this.setGrid( this._state, 'bootstrap' );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
+        console.log('LgDirective');
     }
 }
-@Directive(
-{
-    selector: '[md]'
+@Directive({
+    selector: '[md]',
 })
 export class MdDirective extends RESPONSIVE_BASE<any> {
     protected _state = 'md';
     protected _showWhenTrue = true;
-    
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
-        this.setGrid( this._state, 'bootstrap' );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
     }
 }
 
 @Directive({
-    selector: '[sm]'
+    selector: '[sm]',
 })
 export class SmDirective extends RESPONSIVE_BASE<any> {
-
     protected _state = 'sm';
     protected _showWhenTrue = true;
 
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
-        this.setGrid( this._state, 'bootstrap' );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
     }
 }
 
 @Directive({
-    selector: '[xs]'
+    selector: '[xs]',
 })
 export class XsDirective extends RESPONSIVE_BASE<any> {
-
     protected _state = 'xs';
     protected _showWhenTrue = true;
-    
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
         this.setGrid(this._state, 'bootstrap');
     }
 }
-@Directive(
-{
-    selector: '[showItBootstrap]'
+@Directive({
+    selector: '[showItBootstrap]',
 })
 export class ShowItBootstrapDirective extends RESPONSIVE_BASE<any> {
     protected _showWhenTrue = true;
-    @Input() set showItBootstrap( grid_state: string[] | string ) {
-        this.setGrid( grid_state, 'bootstrap' );
+    @Input() set showItBootstrap(grid_state: string[] | string) {
+        this.setGrid(grid_state, 'bootstrap');
     }
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
     }
 }
-@Directive(
-{
-    selector: '[hideItBootstrap]'
+@Directive({
+    selector: '[hideItBootstrap]',
 })
 export class HideItBootstrapDirective extends RESPONSIVE_BASE<any> {
-
     protected _showWhenTrue = false;
 
-    @Input() set hideItBootstrap( grid_state: string[] | string ) {
-        this.setGrid( grid_state, 'bootstrap' );
+    @Input() set hideItBootstrap(grid_state: string[] | string) {
+        this.setGrid(grid_state, 'bootstrap');
     }
-    constructor( templateRef: TemplateRef<any>,
-                 viewContainer: ViewContainerRef,
-                 _responsiveState: ResponsiveState,
-                 cd: ChangeDetectorRef,
-                 platformService: PlatformService
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
     ) {
-        super( templateRef, viewContainer, _responsiveState, cd, platformService );
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
     }
 }

From e0ef282dff45ba7588358b9b518b08612243c2e6 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:21:05 +0200
Subject: [PATCH 2/9] git repo

---
 ng-package.json | 4 ++--
 package.json    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ng-package.json b/ng-package.json
index 26426e5..749ad46 100644
--- a/ng-package.json
+++ b/ng-package.json
@@ -1,8 +1,8 @@
 {
     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-    "name": "ngx-responsive",
+    "name": "@stefanski/ngx-responsive",
     "version": "9.0.0",
     "lib": {
         "entryFile": "src/index.ts"
     }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index cc15501..220fa00 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "typings": "./index.d.ts",
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/ManuCutillas/ngx-responsive.git"
+        "url": "git+https://github.com/schmidts306/ngx-responsive.git"
     },
     "keywords": [
         "angular",
@@ -89,17 +89,17 @@
         "@nguniversal/express-engine": "^9.1.1",
         "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
         "@types/node": "~8.9.4",
+        "codelyzer": "^5.2.2",
         "copyfiles": "^2.2.0",
         "cpr": "^3.0.1",
         "del-cli": "^3.0.0",
-        "codelyzer": "^5.2.2",
         "ng-packagr": "^9.1.3",
         "onchange": "^7.0.2",
         "protractor": "~5.4.4",
         "source-map-explorer": "^2.4.2",
         "ts-loader": "^6.2.1",
-        "tsickle": "^0.38.1",
         "ts-node": "~8.10.1",
+        "tsickle": "^0.38.1",
         "tslint": "~6.1.2",
         "typescript": "~3.8.3",
         "zone.js": "~0.10.3"

From 7067f6378fb92a1f1c1fdb6a8b73c9e5febe3090 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:21:28 +0200
Subject: [PATCH 3/9] version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 220fa00..bfe8393 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
     "name": "@stefanski/ngx-responsive",
-    "version": "9.0.4",
+    "version": "9.0.5",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {
         "start": "ng serve --aot",

From 40e102467627141e0800929854df8bbc19a880a0 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:31:15 +0200
Subject: [PATCH 4/9] name

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bfe8393..9cdc7ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
-    "name": "@stefanski/ngx-responsive",
+    "name": "@stefanski/ngx-responsive2",
     "version": "9.0.5",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {

From 0f7f3a997e58aef88de37a9ef21b2671fb2c911d Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:35:21 +0200
Subject: [PATCH 5/9] version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9cdc7ee..fa5a780 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
     "name": "@stefanski/ngx-responsive2",
-    "version": "9.0.5",
+    "version": "9.0.6",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {
         "start": "ng serve --aot",

From b5ce35ea787b70e938c0d9f34c909e98f81b52d7 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 15:41:34 +0200
Subject: [PATCH 6/9] name

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fa5a780..a7177a4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
-    "name": "@stefanski/ngx-responsive2",
-    "version": "9.0.6",
+    "name": "@stefanski/ngx-responsive",
+    "version": "9.0.7",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {
         "start": "ng serve --aot",

From 0e467a5ef66a0f7e10275769f269b423feb63c57 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 16:13:23 +0200
Subject: [PATCH 7/9] up directives

---
 package.json                                  |  2 +-
 .../responsive-base/responsive-base.ts        | 82 ++++++++++++++-----
 .../bootstrap/bootstrap-directives.ts         | 59 ++++++++++++-
 src/@directives/bootstrap/index.ts            | 34 ++++----
 4 files changed, 139 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index a7177a4..ec5ae69 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
     "name": "@stefanski/ngx-responsive",
-    "version": "9.0.7",
+    "version": "9.0.8",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {
         "start": "ng serve --aot",
diff --git a/src/@core/providers/responsive-base/responsive-base.ts b/src/@core/providers/responsive-base/responsive-base.ts
index 88bf990..bdd8da3 100644
--- a/src/@core/providers/responsive-base/responsive-base.ts
+++ b/src/@core/providers/responsive-base/responsive-base.ts
@@ -5,20 +5,19 @@
  * @license MIT
  */
 import {
+    ChangeDetectorRef,
     EventEmitter,
+    OnDestroy,
+    OnInit,
     TemplateRef,
     ViewContainerRef,
-    OnInit,
-    OnDestroy,
-    ChangeDetectorRef,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { IResponsiveSubscriptions } from '../../interfaces';
-import { ResponsiveState } from '../responsive-state/responsive-state';
 import { PlatformService } from '../platform-service/platform.service';
+import { ResponsiveState } from '../responsive-state/responsive-state';
 
 export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
-
     private _noRepeat = 0;
     private _sizes_grid_state: any;
     private _others_grid_state: string[];
@@ -43,7 +42,7 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
         orientation: false,
         standard: false,
         ie: false,
-        sizes: false
+        sizes: false,
     };
     private _isEnabledForPlatform: boolean;
 
@@ -89,7 +88,9 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
         if (directive === 'sizes') {
             this._sizes_grid_state = grid_state;
         } else {
-            this._others_grid_state = <string[]>(Array.isArray(grid_state) ? grid_state : [grid_state]);
+            this._others_grid_state = <string[]>(
+                (Array.isArray(grid_state) ? grid_state : [grid_state])
+            );
         }
         this._directive = directive;
     }
@@ -97,35 +98,50 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
     public ngOnInit() {
         if (this._isEnabledForPlatform) {
             if (this.set_active_subscriptions.bootstrap) {
-                this._subscription_Bootstrap = this._responsiveState.elemento$.subscribe(this.updateView.bind(this));
+                this._subscription_Bootstrap = this._responsiveState.elemento$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
-
             if (this.set_active_subscriptions.browser) {
-                this._subscription_Browser = this._responsiveState.browser$.subscribe(this.updateView.bind(this));
+                this._subscription_Browser = this._responsiveState.browser$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
             if (this.set_active_subscriptions.device) {
-                this._subscription_Device = this._responsiveState.device$.subscribe(this.updateView.bind(this));
+                this._subscription_Device = this._responsiveState.device$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
             if (this.set_active_subscriptions.pixelratio) {
-                this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(this.updateView.bind(this));
+                this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
             if (this.set_active_subscriptions.orientation) {
-                this._subscription_Orientation = this._responsiveState.orientation$.subscribe(this.updateView.bind(this));
+                this._subscription_Orientation = this._responsiveState.orientation$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
             if (this.set_active_subscriptions.standard) {
-                this._subscription_Standard = this._responsiveState.standard$.subscribe(this.updateView.bind(this));
+                this._subscription_Standard = this._responsiveState.standard$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
             if (this.set_active_subscriptions.ie) {
-                this._subscription_IE_Version = this._responsiveState.ieVersion$.subscribe(this.updateView.bind(this));
+                this._subscription_IE_Version = this._responsiveState.ieVersion$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
 
             if (this.set_active_subscriptions.sizes) {
-                this._subscription_custom_sizes = this._responsiveState.ancho$.subscribe(this.updateView.bind(this));
+                this._subscription_custom_sizes = this._responsiveState.ancho$.subscribe(
+                    this.updateView.bind(this)
+                );
             }
         }
     }
@@ -185,13 +201,35 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
     }
 
     private updateView(value: any): void {
-        const showBoolean = this._directive === 'sizes' ?
-            (
-                (typeof this._sizes_grid_state.min === 'undefined' || value >= this._sizes_grid_state.min) &&
-                (typeof this._sizes_grid_state.max === 'undefined' || value <= this._sizes_grid_state.max)
-            ) :
-            !!this._others_grid_state && this._others_grid_state.indexOf(value) !== -1;
+        const showBoolean =
+            this._directive === 'sizes'
+                ? (typeof this._sizes_grid_state.min === 'undefined' ||
+                      value >= this._sizes_grid_state.min) &&
+                  (typeof this._sizes_grid_state.max === 'undefined' ||
+                      value <= this._sizes_grid_state.max)
+                : this.otherGridStateVisible(value);
 
         this.showHide(this._showWhenTrue ? showBoolean : !showBoolean);
     }
+
+    private otherGridStateVisible(value: string): boolean {
+        if (!this._others_grid_state) return false;
+        if (this._others_grid_state.indexOf(value) !== -1) return true;
+        if (['lg', 'xl'].indexOf(value) !== -1 && this._others_grid_state.indexOf('lgUp') !== -1) {
+            return true;
+        }
+        if (
+            ['md', 'lg', 'xl'].indexOf(value) !== -1 &&
+            this._others_grid_state.indexOf('mdUp') !== -1
+        ) {
+            return true;
+        }
+        if (
+            ['sm', 'md', 'lg', 'xl'].indexOf(value) !== -1 &&
+            this._others_grid_state.indexOf('smUp') !== -1
+        ) {
+            return true;
+        }
+        return false;
+    }
 }
diff --git a/src/@directives/bootstrap/bootstrap-directives.ts b/src/@directives/bootstrap/bootstrap-directives.ts
index c11ef6c..7a5b897 100644
--- a/src/@directives/bootstrap/bootstrap-directives.ts
+++ b/src/@directives/bootstrap/bootstrap-directives.ts
@@ -42,9 +42,27 @@ export class LgDirective extends RESPONSIVE_BASE<any> {
     ) {
         super(templateRef, viewContainer, _responsiveState, cd, platformService);
         this.setGrid(this._state, 'bootstrap');
-        console.log('LgDirective');
     }
 }
+
+@Directive({
+    selector: '[lgUp]',
+})
+export class LgUpDirective extends RESPONSIVE_BASE<any> {
+    protected _state = 'lgUp';
+    protected _showWhenTrue = true;
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
+    ) {
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
+    }
+}
+
 @Directive({
     selector: '[md]',
 })
@@ -64,6 +82,25 @@ export class MdDirective extends RESPONSIVE_BASE<any> {
     }
 }
 
+@Directive({
+    selector: '[mdUp]',
+})
+export class MdUpDirective extends RESPONSIVE_BASE<any> {
+    protected _state = 'mdUp';
+    protected _showWhenTrue = true;
+
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
+    ) {
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
+    }
+}
+
 @Directive({
     selector: '[sm]',
 })
@@ -83,6 +120,25 @@ export class SmDirective extends RESPONSIVE_BASE<any> {
     }
 }
 
+@Directive({
+    selector: '[smUp]',
+})
+export class SmUpDirective extends RESPONSIVE_BASE<any> {
+    protected _state = 'smUp';
+    protected _showWhenTrue = true;
+
+    constructor(
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+        _responsiveState: ResponsiveState,
+        cd: ChangeDetectorRef,
+        platformService: PlatformService
+    ) {
+        super(templateRef, viewContainer, _responsiveState, cd, platformService);
+        this.setGrid(this._state, 'bootstrap');
+    }
+}
+
 @Directive({
     selector: '[xs]',
 })
@@ -101,6 +157,7 @@ export class XsDirective extends RESPONSIVE_BASE<any> {
         this.setGrid(this._state, 'bootstrap');
     }
 }
+
 @Directive({
     selector: '[showItBootstrap]',
 })
diff --git a/src/@directives/bootstrap/index.ts b/src/@directives/bootstrap/index.ts
index e1fbebe..a0df532 100644
--- a/src/@directives/bootstrap/index.ts
+++ b/src/@directives/bootstrap/index.ts
@@ -6,23 +6,29 @@
  */
 import { Provider } from '@angular/core';
 import {
-  XlDirective,
-  LgDirective,
-  MdDirective,
-  SmDirective,
-  XsDirective,
-  ShowItBootstrapDirective,
-  HideItBootstrapDirective
+    HideItBootstrapDirective,
+    LgDirective,
+    LgUpDirective,
+    MdDirective,
+    MdUpDirective,
+    ShowItBootstrapDirective,
+    SmDirective,
+    SmUpDirective,
+    XlDirective,
+    XsDirective,
 } from './bootstrap-directives';
 
 export * from './bootstrap-directives';
 
 export const BOOTSTRAP_DIRECTIVES: Provider[] = [
-  XlDirective,
-  LgDirective,
-  MdDirective,
-  SmDirective,
-  XsDirective,
-  ShowItBootstrapDirective,
-  HideItBootstrapDirective
+    XlDirective,
+    LgDirective,
+    LgUpDirective,
+    MdDirective,
+    MdUpDirective,
+    SmDirective,
+    SmUpDirective,
+    XsDirective,
+    ShowItBootstrapDirective,
+    HideItBootstrapDirective,
 ];

From 4022cb6e8c818c2dca246c998031c5231ef39bfa Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 16:13:44 +0200
Subject: [PATCH 8/9] version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ec5ae69..3d549e1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
     "name": "@stefanski/ngx-responsive",
-    "version": "9.0.8",
+    "version": "9.0.9",
     "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
     "scripts": {
         "start": "ng serve --aot",

From c6d2946b93d5fc5f2f23733b6668d72c4ede0458 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt <s.schmidt@civit.de>
Date: Tue, 6 Apr 2021 16:28:29 +0200
Subject: [PATCH 9/9] lgUp etc doku

---
 README.md | 688 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 353 insertions(+), 335 deletions(-)

diff --git a/README.md b/README.md
index 9f43256..2c20bd8 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ npm i ngx-responsive@6.0.0 --save
 npm i ngx-responsive@5.0.8 --save
 ```
 
-- Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)
+-   Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)
 
 ### If you use Angular 4 in your project use ng2-responsive.
 
@@ -40,360 +40,377 @@ npm i ngx-responsive@5.0.8 --save
 npm i ng2-responsive --save
 ```
 
-- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)
+-   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
+-   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
-  ```
+```bash
+npm i ngx-responsive --save
+```
+
 #### 2. Bootstrap the service
 
-  - #### With default breaking points
+-   #### 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
+```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: `
-      <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>
-    `
-  })
-  ```
+  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: `
+    <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 *lgUp>I'll show you if I'm a lg screen size or larger.</p>
+    <p *md>I'll show you if I'm a md screen size.</p>
+    <p *mdUp>I'll show you if I'm a md screen size or larger.</p>
+    <p *sm>I'll show you if I'm a sm screen size.</p>
+    <p *smUp>I'll show you if I'm a sm screen size or larger.</p>
+    <p *xs>I'll show you if I'm a xs screen size.</p>
+  `
+})
+```
 
 #### 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 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
+    #### 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
+    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
-  <div [responsive-window]="'parent'">
-      <p *responsive="{ sizes:{  window: 'parent', min:900, max:1400} }">...</p>
-  </div>
-  ```
+    ```html
+    <div [responsive-window]="'parent'">
+        <p *responsive="{ sizes:{  window: 'parent', min:900, max:1400} }">...</p>
+    </div>
+    ```
 
-  #### 3.1.2 Second syntax
+    #### 3.1.2 Second syntax
 
-  Define a reference to the parent element
+    Define a reference to the parent element
 
-  ```html
+    ```html
     <div responsive-window #myContainerRef="container">
         <p *responsive="{ sizes: { min:900, max:1400 } } ; container:myContainerRef">...</p>
     </div>
-  ```
-
-  Or:
-
-  ```html
-  <div responsive-window #myContainerRef="container">
-    <ng-template [responsive]="{ sizes:{ min:900, max:1400 } }" [responsiveContainer]="myContainerRef">
-        <p>....</p>
-    </ng-template>
-  </div>
-  ```
-
-- #### 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: `
-      <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>
-    `
-    })
-  ```
-
-- #### 3.3 One function detect
-
-  - #### With Bootstrap Screen sizes
-
-  ```typescript
-    @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>
-      `
-      })
-  ```
+    ```
 
-  - #### With multiple combinations of bootstrap screen sizes and show / hide options
-    - #### Strings Multiple combinations = "['xs','sm','md','lg','xl']"
+    Or:
 
-      ```typescript
-      @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>
-          `
-      })
-      ```
-
-      - #### With Devices Screen sizes
-
-      ```typescript
-      @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>
-            `
-      })
-      ```
+    ```html
+    <div responsive-window #myContainerRef="container">
+        <ng-template
+            [responsive]="{ sizes:{ min:900, max:1400 } }"
+            [responsiveContainer]="myContainerRef"
+        >
+            <p>....</p>
+        </ng-template>
+    </div>
+    ```
 
-  - #### With multiple devices detect combinations: show / hide options.
-    - #### Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"
+-   #### 3.2 New Detection of multiple functions at once.
 
-      ```typescript
-      @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>
-          `
-      })
-      ```
-
-      - #### With Standard Devices detect
-
-      ```typescript
-        @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>
-            `
-          })
-      ```
-
-  - #### 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: `
-            <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>
-          `
-      })
-      ```
+    All combinations
 
-      - #### With orientation device
+    ```typescript
+      *responsive="{
+        bootstrap: ['xl','lg','md','sm','xs','lgUp','mdUp','smUp'],
+        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}
+      }"
+    ```
 
-      ```typescript
-      @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>
-          `
-      })
-      ```
+    \*Example in component
 
-      - #### With custom sizes and show / hide options
-
-      ```typescript
-      @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>
-          `
+    ```typescript
+    @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>
+      `
       })
-      ```
+    ```
 
-  - #### Responsive-window being window by default or any element set using the Responsive Window directive.
+-   #### 3.3 One function detect
 
-    - #### With browser detection.
+    -   #### With Bootstrap Screen sizes
 
-      ```typescript
+    ```typescript
       @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>
-          `
-      })
-      ```
-
-      - #### With multiple browsers detect combinations: show / hide options.
-        - #### Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"
-
-        ```typescript
-        @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>
-          `
+        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>
+        `
         })
-        ```
-
-        - #### With Internet Explorer Version detection.
-
-        ```typescript
-        @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>
-          `
-        })
-        ```
-
-      - #### 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: `
-            <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 userAgent info directive:
-        Get the device, browser, os version and more from the user agent navigator in one event object.
-
-        ```html
-        <user-agent-info (info)="thisUserAgent($event)"></user-agent-info>
-        ```
+    ```
+
+    -   #### 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: `
+                  <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>
+                `
+            })
+            ```
+
+            -   #### With Devices Screen sizes
+
+            ```typescript
+            @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>
+                  `
+            })
+            ```
+
+    -   #### With multiple devices detect combinations: show / hide options.
+
+        -   #### Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"
+
+            ```typescript
+            @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>
+                `
+            })
+            ```
+
+            -   #### With Standard Devices detect
+
+            ```typescript
+              @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>
+                  `
+                })
+            ```
+
+    -   #### 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: `
+                  <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>
+                `
+            })
+            ```
+
+            -   #### With orientation device
+
+            ```typescript
+            @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>
+                `
+            })
+            ```
+
+            -   #### With custom sizes and show / hide options
+
+            ```typescript
+            @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>
+                `
+            })
+            ```
+
+    -   #### Responsive-window being window by default or any element set using the Responsive Window directive.
+
+        -   #### With browser detection.
+
+            ```typescript
+            @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>
+                `
+            })
+            ```
+
+            -   #### With multiple browsers detect combinations: show / hide options.
+
+                -   #### Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"
+
+                ```typescript
+                @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>
+                  `
+                })
+                ```
+
+                -   #### With Internet Explorer Version detection.
+
+                ```typescript
+                @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>
+                  `
+                })
+                ```
+
+            -   #### 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: `
+                    <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 userAgent info directive:
+
+                Get the device, browser, os version and more from the user agent navigator in one event object.
+
+                ```html
+                <user-agent-info (info)="thisUserAgent($event)"></user-agent-info>
+                ```
 
 #### 4. FORMAT OF USER AGENT INFO OBJECT
 
@@ -443,34 +460,35 @@ Description of the object given by the `(info)` event of the directive `user-age
 
 # NEXT STEPS
 
-- Unit test and e2e.
-- Create a documentation page.
-- Work in demo page
-- Directive css classes:
+-   Unit test and e2e.
+-   Create a documentation page.
+-   Work in demo page
+-   Directive css classes:
 
 ```html
-<h1 *responsive-css="{
+<h1
+    *responsive-css="{
   bootstrap: {xl: 'micssclassxl', lg: 'micssclasslg'},
   orientation:{landscape: 'micssclasslandscape'}
-}"></h1>
-
+}"
+></h1>
 ```
 
-- animations show/hide in directives
+-   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
+-   Manu Cutillas
+-   Christophe HOARAU
+-   Kamil Breguła
+-   Janne Julkunen
+-   phransyz
+-   Michael Burger
+-   Alyssa Brunswick
+-   Quentin
+-   Thomas Christensen
+-   lydemann
+-   MattSenter
 
 # License