New Reactive Services and other features.

Breacking Changes in V5.0.3

• New method to set the custom config:

  • v4.0.1

   import { NgModule } from '@angular/core'
   import { ResponsiveModule, ResponsiveConfig } from 'ngx-responsive'
   ...
   let 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 // allow to debounce checking timer
    };
  
    export function ResponsiveDefinition(){ 
            return new ResponsiveConfig(config);
    };
   ...
  @NgModule({
      imports: [
        ResponsiveModule
      ],
      declarations: [
        AppComponent
      ],
      providers:[{
       provide: ResponsiveConfig, 
       useFactory: ResponsiveDefinition }]
  })
  export class AppModule { }
  

  • v5.0.3

   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 { }
  

New Features in V5.0.3:

• Reactive services that expose changes through observables:

  • BrowserInfoRx
  • IeInfoRx
  • DeviceInfoRx
  • DeviceStandardInfoRx
  • OrientationInfoRx
  • ResponsiveSizeInfoRx
  • UserAgentInfoRx

  Example:
  We initialize the service and we subscribe to the event changes:

  1. Inject the service in the constructor:

      constructor(
          public browserInfoRx: BrowserInfoRx
      ) {}
  
  

  2. Connet to the reactive service:

      ngOnInit(): void {
          this.browserInfoRx.connect();
      }
  
  

  3. And subscribe to the events service:

    this.browserInfoRx.getBrowser.subscribe((data) => {
      console.log('this.browserInfoRx.getBrowser ===>', data);
    }, (err) => {
      console.log('Error', err);
    });
  
  

  or :

  ngOnInit(): void {
      this.browserInfoRx.connect().subscribe((data) => {
      console.log('this.browserInfoRx.getBrowser ===>', data);
    }, (err) => {
      console.log('Error', err);
    });
  }
  
  

  4. And remove yours subscriptions:

  ngOnDestroy(): void {
      this.browserInfoRx.disconnect();
  }
  

Methods to subscribe to the observables for each of the reactive services:

• BrowserInfoRx -> getBrowser -> BrowserInfoRx.getBrowser

• IeInfoRx -> getIE -> IeInfoRx.getIE

• DeviceInfoRx -> getDevice -> DeviceInfoRx.getDevice

• DeviceStandardInfoRx -> getStandardDevice -> DeviceStandardInfoRx.getStandardDevice

• OrientationInfoRx -> getOrientation -> OrientationInfoRx.getOrientation

• ResponsiveSizeInfoRx -> getResponsiveSize -> ResponsiveSizeInfoRx.getResponsiveSize

• UserAgentInfoRx -> getUserAgent -> UserAgentInfoRx.getUserAgent