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.

ng-connection-service

Usage:

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