{{announcement.body}}
{{announcement.title}}

How to Detect the Internet Connection Status in an Angular Application

DZone 's Guide to

How to Detect the Internet Connection Status in an Angular Application

Allowing a user to see if their device is connected to the internet often betters user experience. See just how to do that in an Angular app.

· Web Dev Zone ·
Free Resource

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:

TypeScript
 




x


 
1
ng new connection  



Step 2

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

TypeScript
 




x


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

TypeScript
 




xxxxxxxxxx
1


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



Step 3

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

TypeScript
 




xxxxxxxxxx
1
17


 
1
import { BrowserModule } from '@angular/platform-browser';  
2
import { NgModule } from '@angular/core';  
3
  
4
import { AppComponent } from './app.component';   
5
import {ConnectionServiceModule} from 'ng-connection-service';  
6
  
7
@NgModule({  
8
  declarations: [  
9
    AppComponent  
10
  ],  
11
  imports: [  
12
    BrowserModule,
13
    ConnectionServiceModule  
14
  ],  
15
  bootstrap: [AppComponent]  
16
})  
17
export class AppModule { }  



Step 4

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

TypeScript
 




xxxxxxxxxx
1
24


1
import { Component } from '@angular/core';  
2
import { ConnectionService } from 'ng-connection-service';  
3
  
4
@Component({  
5
  selector: 'app-root',  
6
  templateUrl: './app.component.html',  
7
  styleUrls: ['./app.component.css']  
8
})  
9
export class AppComponent {  
10
  isConnected = true;  
11
  noInternetConnection: boolean;  
12
  
13
  constructor(private connectionService: ConnectionService) {  
14
    this.connectionService.monitor().subscribe(isConnected => {  
15
      this.isConnected = isConnected;  
16
      if (this.isConnected) {  
17
        this.noInternetConnection=false;  
18
      }  
19
      else {  
20
        this.noInternetConnection=true;  
21
      }  
22
    })  
23
  }  
24
}  



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:

TypeScript
 




xxxxxxxxxx
1


1
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.

Topics:
angular, angular 8, angular cli, node js, tutorial, visual stuio, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}