Detecting internet connection status in Angular application — ng-connection-service

It is a common requirement to detect internet connection status in running Angular application. We might want to show a message — “you are offline”, we might want to load cached data or we would user to take to “offline” page (route). Also as soon as internet connection is restored, we would like to make application functional without any user interaction.

We can achieve desired feature using window.ononline and window.onoffline events.

I have published an Angular service package — ng-connection-service in npm repository which can be installed in Angular application.

You can install service via npm command:

npm i ng-connection-service

Here is the npm package library.

Usage:

  1. Inject ConnectionService in Angular component's constructor.
  2. Subscribe to monitor() method to get push notification whenever internet connection status is changed.

Demo:

GitHub repository

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store