Simple Way To Fetch the Internet Connection Status for Your Angular Application

In this article, I will show you how you can detect the status of your internet connectivity for your angular application using these simple steps. This guide is helpful when you want to record data in offline/online mode and want to push it to your server when the internet connectivity is engaged.

For an instance, the real-time chat feature! It requires to show a green dot when the user is available, and red when the user is disconnected from the platform or internet.

Another example, I am always wondering about is, “How Facebook is managing a user’s status?” when I was in University! I thought it might be rocket science. After doing some research I came to know about how they are managing the flags. It's a very silly and simple way! Read this article further, you will also understand.

You will need the following things before moving ahead:

• Visual Code Studio (Open source) — For the coding purpose
• Basic Knowledge of Angular and Typescript
• Node js & Npm manager - A project set up for your Angular Application

Once you are done with the above Prerequisites, you can follow up on the below steps.

Step 1: You can install angular CLI, to prepare a basic project skeleton.

npm install -g @angular/cli

Step 2: Create a new project for your workspace.

ng new <your_app_name>

It will create a basic skeleton or structure for your project.

Step 3: Install third-party package/library

It will handle operations to check the status of your internet connection, whether it is online or offline.

npm i ngx-online-status

-OR-

npm install ngx-online-status --save

Step 4: Import library to your module.ts file to use its functionality

After running the above command you just need to open your app.module.ts file as shown below.

import { OnlineStatusModule } from ‘ngx-online-status’;

Also, add OnlineStatusModule to your imports array given inside @ngmodule.

Your app.module.ts will be looks something like this,

Step 5: Initiate instance in your component.ts file and use the functionality.

Your app.component.ts will look something like this, read the comments given for the method.

Explanation: Here we are injecting the dependency of ngx-online-status in the constructor. After that, we need to monitor the status of the internet connectivity, whether it is online or offline. On change of the internet connection, it will trigger the status instance and update its value to 1 or 0.

• 1 means online
• 0 means offline

Step 6: Update your component.html file to visualize online/offline events

As an output, you can show with color combination Green and Red for Online and Offline respectively or you can put text, notification, alert, or highlights on the base of the value of status.

Here is your app.component.html sample file.

That’s it, Bingo 👏👏👏! You made it work! Cool!

Once you are able to receive the value for the status you can send it to thebackend using your Rest APIs and manage your chat application to show whether a user is online or offline.

To test and run your application you can hit ng serve or npm start command. Turn off your internet connection and observe the screen. After that, turn on your internet connection and observe the screen. It will show Green or Red highlights on the top.

You can check out the project from the below links: Stackblitz editor | Live Demo | Github

Disclaimer: If you access NPM, Stackblitz, or Github links, I will not get a single penny when the links are accessed.

Wrapping up

This article will be helpful for you to detect the internet connectivity of your device. What are your thoughts about this article, feel free to write below in the comments section.

References:

[1] Npm ngx-online-status — Third-party library to detect internet connection

[2] Stackblitz — Live demo prepared by Author

[3]Github Repository — Demo Source code

Get my stories in your feeds by subscribing to me, or become a vocal+ member to read all stories of thousands of other writers, participate in all challenges and get a payout with low fees and less payout threshold on Vocal Media.

© All rights reserved — Rakshit Shah 2021

Others cannot copy, distribute, or perform your work without my permission.

Originally published on Medium.