Version | Angular supported versions |
---|---|
13.0.2 | v16-v17 |
9.0.3 | v9-v15 |
1.0.4 | <=v8 |
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
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 { }
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();
}
}
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();
}
}
monitor()
function to watch application server status. const options: ConnectionServiceOptions = {
enableHeartbeat: false,
heartbeatUrl: 'https://localhost:5000',
heartbeatInterval: 2000
}
You can find demos in GitHub repository under directory projects/demo/
.
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';
}
MIT License © Balram Chavan