In this article, we are going to see if the internet is disconnected while working with your application. This is useful if we want to check whether the internet connection is there or not.

For example, if we are working on a real-time chat basis application and the user is disconnected, then we can show their status just by checking it.


  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed

Step 1

Create a new Angular project using the following NPM command:

Step 2

 Let’s install ng-connection-service using the following NPM command:

After installing the package, we just need to import it in our module, so open app.module.ts file and import the following code:

Step 3

 Open the file app.module.ts and paste the below code:

Step 4

 Now, open the app.component.ts file and add the following code in this file:

Here on this page, we need to inject ConnectionService in Angular’s component constructor. Second, we need to subscribe to the monitor() method to get a push notification whenever the internet status is changed. 

Step 5

 The next step is to open the app.component.html file and paste the below code:

Now with this step, our coding part is done. It’s time for the Output:


Type the below code to build and run the application:

You can see it shows the following image when the connection is there. Once we disconnect, the internet automatically detects it and the page will change.


In this article, we have seen how to identify the internet connection status in an angular application.

Please give your valuable feedback/comments/questions about this article. Please let me know how to improve it.

Source link

Write A Comment