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:

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:

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

Step 3

 

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

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 3 

 

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

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 4

 

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

<div *ngIf="noInternetConnection" style="text-align: center;">
    <h1>THERE IS NO INTERNET CONNECTION</h1>
    <img width="111px" src="assets/images/no.wifi_.png" alt="Wifi Connecred" />
</div>
<div *ngIf="!noInternetConnection" style="text-align: center;">
    <h1>INTERNET CONNECTION IS THERE</h1>
    <img width="111px" src="assets/images/wifi.png" alt="Wifi Disconnected" />
</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:

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.