DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Java String Templates Today
  • MLOps: Definition, Importance, and Implementation
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Write a Smart Contract With ChatGPT, MetaMask, Infura, and Truffle
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Detect the Internet Connection Status in an Angular Application

How to Detect the Internet Connection Status in an Angular Application

Siddharth Gajbhiye user avatar by
Siddharth Gajbhiye
CORE ·
Jul. 21, 20 · Tutorial
Like (5)
Save
Tweet
Share
10.88K Views

Join the DZone community and get the full member experience.

Join For Free

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.

application AngularJS Internet (web browser) Connection (dance)

Opinions expressed by DZone contributors are their own.

Trending

  • Java String Templates Today
  • MLOps: Definition, Importance, and Implementation
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Write a Smart Contract With ChatGPT, MetaMask, Infura, and Truffle

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: