Detects active internet connection, and API server status in Angular application.
npm install ng-connection-service> * 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.
> Note This library is updated to support most of the Angular versions, Stay tuned for updates.
You can get it on npm.
```
npm install ng-connection-service --save
You can get it on yarn.
``
yarn add ng-connection-service
* Import HttpClientModule and ConnectionServiceModule into your application AppModule
`ts
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 { }
`
in Angular component's constructor, subscribe to monitor() method.
`ts
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 to monitor() method. Here hasInternetConnection boolean property informs if given server URL passed via heartbeatUrl property is reachable or not.
`ts
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.`ts
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 DemoAPI
You can configure the service using
ConnectionServiceOptions configuration variable.
Following options are available;`ts
/**
* 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';}
``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
MIT License © Balram Chavan