Provided correct value of service into "UserAgentInfoDirective". Minor refactoring, types improved. Fixed configuration type, which should be provided for "ResponsiveDirective".

.gitignore

@@ -40,3 +40,4 @@ testem.log
 /.chrome
 /.git
 yarn.lock
+/examples/.vscode/settings.json

examples/package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser-dynamic": "~9.1.6",
     "@angular/router": "~9.1.6",
     "core-js": "^3.6.5",
-    "ngx-responsive": "9.0.2-beta",
+    "ngx-responsive": "./../dist",
     "rxjs": "~6.5.5",
     "tslib": "^1.11.2",
     "zone.js": "~0.10.3"

examples/src/app/app.component.html

@@ -17,11 +17,19 @@ <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-c
     <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
   </li>
 </ul>
+
 <div *xl>HELLO XL</div>
 <div *lg>HELLO LG</div>
 <div *md>HELLO MD</div>
 <div *sm>HELLO SM</div>
 <div *xs>HELLO XS</div>
+
+<div *responsive="xlPattern">HELLO XL PATTERN</div>
+<div *responsive="lgPattern">HELLO LG PATTERN</div>
+<div *responsive="mdPattern">HELLO MD PATTERN</div>
+<div *responsive="smPattern">HELLO SM PATTERN</div>
+<div *responsive="xsPattern">HELLO XS PATTERN</div>
+
 <user-agent-info (info)="thisUserAgent($event)"></user-agent-info>
 
 <router-outlet></router-outlet>

examples/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import {
   IeInfoRx, ResponsiveSizeInfoRx, OrientationInfoRx, DeviceStandardInfoRx,
   DeviceInfoRx,
-  UserAgentInfoRx, BrowserInfoRx,
+  UserAgentInfoRx, BrowserInfoRx, IResponsivePattern,
 } from 'ngx-responsive';
 // tslint:disable-next-line:ordered-imports
 import { OnInit, OnDestroy } from '@angular/core';
@@ -13,6 +13,21 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, OnDestroy {
+  public readonly xsPattern: IResponsivePattern = {
+    bootstrap: 'xs'
+  };
+  public readonly smPattern: IResponsivePattern = {
+    bootstrap: 'sm'
+  };
+  public readonly mdPattern: IResponsivePattern = {
+    bootstrap: 'md'
+  };
+  public readonly lgPattern: IResponsivePattern = {
+    bootstrap: 'lg'
+  };
+  public readonly xlPattern: IResponsivePattern = {
+    bootstrap: 'xl'
+  };
   private _subscriptions: Subscription[] = [];
   constructor(
     public ieInfoRx: IeInfoRx,

examples/src/app/app.module.ts

@@ -23,6 +23,7 @@ const config: IResponsiveConfig = {
   imports: [
     BrowserModule,
     CommonModule,
+    AppRoutingModule,
     ResponsiveModule.forRoot(config)
   ],
   providers: [],

package.json

@@ -111,6 +111,7 @@
     "jest-preset-angular": "^8.0.0",
     "ts-loader": "^6.2.1",
     "rimraf": "2.6.2",
+    "rxjs": "~6.5.5",
     "tsickle": "^0.38.1",
     "ts-node": "~8.10.1",
     "tslint": "~6.1.2",

src/@core/constants/user-agent.constants.ts

@@ -4,11 +4,12 @@
  *
  * @license MIT
  */
+import { IUserAgent } from "../interfaces";
 
-export const USER_AGENT = {
+export const USER_AGENT: IUserAgent = {
     device: null,
     browser: null,
-    pixelratio: null,
+    pixelRatio: null,
     ie_version: {
         name: null,
         state: null

src/@core/interfaces/responsive.interfaces.ts

@@ -1,19 +1,21 @@
+import { TBootstraps, TBrowserNames, TDevices, TOrientations, TPixelRatios, TStandards, TIE_VERSIONS, TSizes } from "../types";
+
 export interface IResponsivePattern {
-    bootstrap?: string | string[];
-    browser?: string | string[];
-    device?: string | string[];
-    pixelratio?: string | string[];
-    orientation?: string | string[];
-    standard?: string | string[];
-    ie?: string | string[];
-    sizes?: number;
+    bootstrap?: TBootstraps | TBootstraps[];
+    browser?: TBrowserNames | TBrowserNames[];
+    device?: TDevices | TDevices[];
+    pixelRatio?: TPixelRatios | TPixelRatios[];
+    orientation?: TOrientations | TOrientations[];
+    standard?: TStandards | TStandards[];
+    ie?: TIE_VERSIONS | TIE_VERSIONS[];
+    sizes?: number | TSizes;
 }
 
 export interface IResponsiveSubscriptions {
     bootstrap?: boolean;
     browser?: boolean;
     device?: boolean;
-    pixelratio?: boolean;
+    pixelRatio?: boolean;
     orientation?: boolean;
     standard?: boolean;
     ie?: boolean;

src/@core/interfaces/user-agent.interfaces.ts

@@ -5,43 +5,57 @@
  * @license MIT
  */
 
+import {
+    TBrowserNames,
+    TDevices,
+    TGameDevices,
+    TIE_VERSIONS,
+    TLinuxOS,
+    TMobileDevices,
+    TosSystems,
+    TPixelRatios,
+    TSmartTv,
+    TTabletDevices,
+    TWindowsOS
+} from "../types";
+
 /**
  * @export IUserAgent
  */
 export interface IUserAgent {
-    device: string;
-    browser: string;
-    pixelratio: string;
+    device: TDevices;
+    browser: TBrowserNames;
+    pixelRatio: TPixelRatios;
     ie_version: {
-        name: string;
+        name: TIE_VERSIONS;
         state: boolean;
     };
     game_device: {
-        name: string;
+        name: TGameDevices;
         state: boolean;
     };
     smart_tv: {
-        name: string;
+        name: TSmartTv;
         state: boolean;
     };
     desktop: {
-        name: string;
+        name: TosSystems;
         state: boolean;
     };
     tablet: {
-        name: string;
+        name: TTabletDevices;
         state: boolean;
     };
     mobile: {
-        name: string;
+        name: TMobileDevices;
         state: boolean;
     };
     window_os: {
-        name: string;
+        name: TWindowsOS;
         state: boolean;
     };
     linux_os: {
-        name: string;
+        name: TLinuxOS;
         state: boolean;
     };
     bot: boolean;

src/@core/providers/platform-service/platform.service.ts

@@ -1,24 +1,24 @@
 
 
 import { Inject, PLATFORM_ID, Injectable } from '@angular/core';
-import { ResponsiveConfig } from '../responsive-config/responsive-config';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 
+import { ResponsiveConfig } from '../responsive-config/responsive-config';
+
 @Injectable()
 export class PlatformService {
+    public readonly isServer: boolean;
+    public readonly isBrowser: boolean;
 
-  isServer: boolean;
-  isBrowser: boolean;
-
-  constructor(
-    @Inject(PLATFORM_ID) private readonly _platformId,
-    @Inject(ResponsiveConfig) private responsiveConfig: ResponsiveConfig
-  ) {
-    this.isServer = isPlatformServer(_platformId);
-    this.isBrowser = isPlatformBrowser(_platformId);
-  }
+    constructor(
+        @Inject(PLATFORM_ID) private readonly _platformId,
+        @Inject(ResponsiveConfig) private readonly _responsiveConfig: ResponsiveConfig
+    ) {
+        this.isServer = isPlatformServer(this._platformId);
+        this.isBrowser = isPlatformBrowser(this._platformId);
+    }
 
-  public isEnabledForPlatform() {
-    return this.isBrowser || this.responsiveConfig.config.renderOnServer;
-  }
-}
+    public isEnabledForPlatform() {
+        return this.isBrowser || this._responsiveConfig.config.renderOnServer;
+    }
+}

src/@core/providers/responsive-base/responsive-base.ts

@@ -11,12 +11,14 @@ import {
     OnInit,
     OnDestroy,
     ChangeDetectorRef,
+    Directive,
 } 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';
 
+@Directive()
 export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
 
     private _noRepeat = 0;
@@ -39,7 +41,7 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
         bootstrap: false,
         browser: false,
         device: false,
-        pixelratio: false,
+        pixelRatio: false,
         orientation: false,
         standard: false,
         ie: false,
@@ -76,7 +78,7 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
                 this.set_active_subscriptions.browser = true;
                 break;
             case 'pixelratio':
-                this.set_active_subscriptions.pixelratio = true;
+                this.set_active_subscriptions.pixelRatio = true;
                 break;
             case 'ie':
                 this.set_active_subscriptions.ie = true;
@@ -100,15 +102,14 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
                 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));
             }
             if (this.set_active_subscriptions.device) {
                 this._subscription_Device = this._responsiveState.device$.subscribe(this.updateView.bind(this));
             }
 
-            if (this.set_active_subscriptions.pixelratio) {
+            if (this.set_active_subscriptions.pixelRatio) {
                 this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(this.updateView.bind(this));
             }
 
@@ -144,7 +145,7 @@ export abstract class RESPONSIVE_BASE<T> implements OnInit, OnDestroy {
                 this._subscription_Device.unsubscribe();
             }
 
-            if (this.set_active_subscriptions.pixelratio) {
+            if (this.set_active_subscriptions.pixelRatio) {
                 this._subscription_Pixel_Ratio.unsubscribe();
             }