How to Detect the Internet Connection Status in an Angular Application

Introduction

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.

Prerequisites

• 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:

ng new connection  

Step 2

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

x

npm i ng-connection-service  

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

xxxxxxxxxx

import {ConnectionServiceModule} from 'ng-connection-service';  

Step 3

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

xxxxxxxxxx

import { BrowserModule } from '@angular/platform-browser';  

import { NgModule } from '@angular/core';  

import { AppComponent } from './app.component';   

import {ConnectionServiceModule} from 'ng-connection-service';  

@NgModule({  

  declarations: [  

    AppComponent  

  ],  

  imports: [  

    BrowserModule,

    ConnectionServiceModule  

  ],  

  bootstrap: [AppComponent]  

})  

export class AppModule { }  

Step 4

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

xxxxxxxxxx

import { Component } from '@angular/core';  

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

@Component({  

  selector: 'app-root',  

  templateUrl: './app.component.html',  

  styleUrls: ['./app.component.css']  

})  

export class AppComponent {  

  isConnected = true;  

  noInternetConnection: boolean;  

  constructor(private connectionService: ConnectionService) {  

    this.connectionService.monitor().subscribe(isConnected => {  

      this.isConnected = isConnected;  

      if (this.isConnected) {  

        this.noInternetConnection=false;  

      }  

      else {  

        this.noInternetConnection=true;  

      }  

    })  

  }  

}  

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:

• HTML

   

  
  

  
  

  
  

  
  

  xxxxxxxxxx

  1

  
  

  
  

   

  1

  <div *ngIf="noInternetConnection" style="text-align: center;">    

  2

      <h1>THERE IS NO INTERNET CONNECTION</h1>    

  3

      <img width="111px" src="assets/images/no.wifi_.png" alt="Wifi Connecred" />    

  4

  </div>    

  5

  <div *ngIf="!noInternetConnection" style="text-align: center;">     

  6

      <h1>INTERNET CONNECTION IS THERE</h1>    

  7

      <img width="111px" src="assets/images/wifi.png" alt="Wifi Disconnected" />    

  8

  </div>    

  
  

  
  

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:

xxxxxxxxxx

ng serve -o  

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.

Conclusion

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.