Angular module for tracking "network status change" events
MIT License
ng-network-status will help you to add events when app is going online/offline.
Take a look at the example project
npm install --save ng-network-status
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 { }
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";
});
}
}
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 interval is 1000ms
and default options is
defaultOptions = {
grayscale: {
enabled: true,
animationDuration: 0.3,
percentage: 0.9
}
};
ng-network-status is released under the MIT License.