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.

Dependents (0)

Package Sidebar

Install

npm i ng-network-status

Weekly Downloads

8

Version

0.2.3

License

MIT

Last publish

Collaborators

  • saka7