ng-connection-service
v13.0.2
Published
Detects active internet connection, and API server status in Angular application.
Downloads
28,249
Maintainers
Readme
ng-connection service
Monitor active internet connection reactively in Angular and Ionic applications
- Detects whether browser has an active internet connection or not in Angular application.
- Detects whether your API Server is running or not in Angular application.
Version support
| Version | Angular supported versions | |---------|-----------------| | 13.0.0 | v16-v17 | | 9.0.3 | v9-v15 | | 1.0.4 | <=v8 |
Note This library is updated to support most of the Angular versions, Stay tuned for updates.
Install
You can get it on npm.
npm install ng-connection-service --save
You can get it on yarn.
yarn add ng-connection-service
Setup
- Import
HttpClientModule
andConnectionServiceModule
into your applicationAppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ConnectionServiceModule } from 'ng-connection-service';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
ConnectionServiceModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Usage - Check only internet connection status
- Inject
ConnectionService
in Angular component's constructor, subscribe tomonitor()
method.
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ConnectionService, ConnectionServiceOptions, ConnectionState } from 'ng-connection-service';
import { Subscription, tap } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
title = 'demo';
status!: string;
currentState!: ConnectionState;
subscription = new Subscription();
constructor(private connectionService: ConnectionService) {
}
ngOnInit(): void {
this.subscription.add(
this.connectionService.monitor(options).pipe(
tap((newState: ConnectionState) => {
this.currentState = newState;
if (this.currentState.hasNetworkConnection) {
this.status = 'ONLINE';
} else {
this.status = 'OFFLINE';
}
})
).subscribe()
);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
Usage - Check YOUR API Server connection status
- Inject
ConnectionService
in Angular component's constructor, subscribe tomonitor()
method. HerehasInternetConnection
boolean property informs if given server URL passed viaheartbeatUrl
property is reachable or not.
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ConnectionService, ConnectionServiceOptions, ConnectionState } from 'ng-connection-service';
import { Subscription, tap } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
title = 'demo';
status!: string;
currentState!: ConnectionState;
subscription = new Subscription();
// Note: if you prefer inject()
// connectionService = inject(ConnectionService);
constructor(private connectionService: ConnectionService) {
}
ngOnInit(): void {
const options: ConnectionServiceOptions = {
enableHeartbeat: false,
heartbeatUrl: 'https://localhost:4000',
heartbeatInterval: 2000
}
this.subscription.add(
this.connectionService.monitor(options).pipe(
tap((newState: ConnectionState) => {
this.currentState = newState;
if (this.currentState.hasNetworkConnection && this.currentState.hasInternetAccess) {
this.status = 'ONLINE';
} else {
this.status = 'OFFLINE';
}
})
).subscribe()
);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
- Note that we have passed configuration object to
monitor()
function to watch application server status.
const options: ConnectionServiceOptions = {
enableHeartbeat: false,
heartbeatUrl: 'https://localhost:5000',
heartbeatInterval: 2000
}
Demos
You can find demos in GitHub repository under directory projects/demo/
.
- Angular v9 Demo
- Angular v10 Demo
- Angular v11 Demo
- Angular v12 Demo
- Angular v13 Demo
- Angular v14 Demo
- Angular v15 Demo
- Angular v16 Demo
- Angular v17 Demo
API
You can configure the service using ConnectionServiceOptions
configuration variable.
Following options are available;
/**
* Instance of this interface could be used to configure "ConnectionService".
*/
export interface ConnectionServiceOptions {
/**
* Controls the Internet connectivity heartbeat system. Default value is 'true'.
*/
enableHeartbeat?: boolean;
/**
* Url used for checking Internet connectivity, heartbeat system periodically makes "HEAD" requests to this URL to determine Internet
* connection status. Default value is "//internethealthtest.org".
*/
heartbeatUrl?: string;
/**
* Interval used to check Internet connectivity specified in milliseconds. Default value is "30000".
*/
heartbeatInterval?: number;
/**
* Interval used to retry Internet connectivity checks when an error is detected (when no Internet connection). Default value is "1000".
*/
heartbeatRetryInterval?: number;
/**
* HTTP method used for requesting heartbeat Url. Default is 'head'.
*/
requestMethod?: 'get' | 'post' | 'head' | 'options';
}
Demo
Contributors
Thank you to the following contributors who have helped improve this project by submitting pull requests:
- @anandkushwaha064: Upgraded library to v16-17
- @yildiraymeric: Upgraded library to v7
License
MIT License © Balram Chavan