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
and ConnectionServiceModule
into your application AppModule
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 to monitor()
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 to monitor()
method. Here hasInternetConnection
boolean property informs if given server URL passed via heartbeatUrl
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();
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/
.
API
You can configure the service using ConnectionServiceOptions
configuration variable.
Following options are available;
export interface ConnectionServiceOptions {
enableHeartbeat?: boolean;
heartbeatUrl?: string;
heartbeatInterval?: number;
heartbeatRetryInterval?: number;
requestMethod?: 'get' | 'post' | 'head' | 'options';
}
Demo
Working demo
Contributors
Thank you to the following contributors who have helped improve this project by submitting pull requests:
License
MIT License © Balram Chavan