Nibble Plum Meringue

    ng-network-status
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    ng-network-status

    NG-NETWORK-STATUS

    Code Climate Issue Count

    NPM NPM

    ng-network-status will help you to add events when app is going online/offline.

    Examples

    ng-network-status-debian


    ng-network-status-android

    Usage

    Take a look at the example project

    Install package

    npm install --save ng-network-status

    Add NgNetworkStatusModule to your AppModule

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    import { NgNetworkStatusModule } from 'ng-network-status'; // <-- HERE
     
    import { AppComponent } from './app.component';
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        NgNetworkStatusModule // <-- and HERE
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Use NetworkStatusService in your components

    import { Component, OnInit } from '@angular/core';
     
    // Import NetworkStatusService
    import { NetworkStatusService } from 'ng-network-status';
     
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [ NetworkStatusService ]
    })
    export class AppComponent implements OnInit {
     
      networkStatus = "Online";
     
      // Inject NetworkStatusService instance
      constructor(private networkStatusService: NetworkStatusService) {}
     
      ngOnInit() {
        // Register health check
        this.networkStatusService.healthCheck();
        // Subscribe on network status change event
        this.networkStatusService.isOnline.subscribe(isOnline => {
          this.networkStatus = isOnline ? "Online" : "Offline";
        });
      }
     
    }

    Available options

    healthCheck method signature

    public healthCheck(interval: number, options: Options);

    You can configure interval and grayscale effect options.

    this.networkStatusService.healthCheck(500, {
      grayscale: {
        enabled: false
      }
    });

    Default option values

    Default interval is 1000ms and default options is

    defaultOptions = {
      grayscale: {
        enabled: true,
        animationDuration: 0.3,
        percentage: 0.9
      }
    };

    License

    ng-network-status is released under the MIT License.

    Install

    npm i ng-network-status

    DownloadsWeekly Downloads

    8

    Version

    0.2.3

    License

    MIT

    Last publish

    Collaborators

    • saka7