How to Check Internet Connection in Angular Application
Published: 2023-08-05 10:44:47

Today in the article, we will create a demo app for how to check the internet connection in angular application either it is connected to the system or not. It's a very common requirement to check the internet connection in any web application or mobile application. Implementing such functionalities makes our app more user-friendly.

 

We might want to show alert  "you are online/offille" and show the cached data to load. And whenever connects show the alert to the user.  The same task can also be achieved with only javascript only using **window.ononline** and window.onoffline events


### Get Started

We will use here a npm package called **npm-connection-service.** So at first create the basic app with below command.

``````npm new internet-connection-check``````

Once angular application is created move  to that folder and run the application with ng serve. After that we can see our app over the browser on the link: http://localhost:4200


### Install npm-connection-service package of npm

``````npm i ng-connection-service --save``````

This module exposes a service which we can use to detect the internet connection in our system. 

 

Now we will import the service into our component by adding below line in our app.component.ts file.

``````import { ConnectionService } from 'ng-connection-service'``````

Once importing the service in our component we will add the code in the class constructor which will do the actual job for showing the alert in our demo when internet connects of disconnets.

Now the app.component.ts will look like:

``````import { Component,OnInit } from '@angular/core';
import { ConnectionService } from 'ng-connection-service';
 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
 
export class AppComponent {
title = 'internet-connection-check';
status = 'ONLINE'; //initializing as online by default
isConnected = true;
 

constructor(private connectionService:ConnectionService){
this.connectionService.monitor().subscribe(isConnected => {
this.isConnected = isConnected;
if(this.isConnected){
this.status = "ONLINE";
} else {
this.status = "OFFLINE"
}
alert(this.status);
});
}
ngOnInit(){
 
}
 
}``````

In the above file we have performed mainly two main task:

1. Injected ConnectionService in Angular component constructor.

2. Subscribed to monitor() method to get notified whenever the internet connection is changed.

 

### Run the App

Run the app by typing **ng serve** over terminal, And test the app. Once you disconnect the internet connection then you will get alert of OFFLINE message, Simillarly when you connect the connection back alert will come on browser again of message ONLINE.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayrl76z262iwsasj3s02.png)


### Conclusion

So in this demo, We  learnt how to check internet connection in angular application.

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful to understand how to check internet connection in angular application.

Let me know your thoughts over the email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share with your friends.
 
This article is originally posted over [jsonworld](jsonworld.com)