Internet Connection Status in Angular

Internet Connection Status in Angular 2|4|5|6|7|8 is the topic that we are going to implement in this article.

During creating an application we often need to know if the user’s internet connection status is online or offline.

So that we could write application logic if we have to load the cached data first or redirect the user on an offline page and show him a message.

This required feature can be achieved by events called window.online and window.offline.

Let’s dive into the code and understand the whole process in an easy way.

If you don’t have Angular or Node running on your computer, you can install it by reading or easy tutorial here.

• Node.js Installation Guide
• Angular Installation Guide

Open the editor that you are familiar with, For me, I am using Visual Studio Code and create a new project using Angular CLI.

Detect Internet Connection Status in Angular in 3 Simple Steps

Step 1. Open app.component.ts file and replace the code given below:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { fromEvent, Observable, Subscription } from 'rxjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

    public onlineEvent: Observable<Event>;
    public offlineEvent: Observable<Event>;
    public subscriptions: Subscription[] = [];

    public connectionStatusMessage: string;
    public connectionStatus: string;

    constructor() { }

    ngOnInit(): void {

        this.onlineEvent = fromEvent(window, 'online');
        this.offlineEvent = fromEvent(window, 'offline');

        this.subscriptions.push(this.onlineEvent.subscribe(event => {
            this.connectionStatusMessage = 'Connected to internet! You are online';
            this.connectionStatus = 'online';
        }));

        this.subscriptions.push(this.offlineEvent.subscribe(e => {
            this.connectionStatusMessage = 'Connection lost! You are offline';
            this.connectionStatus = 'offline';
        }));
    }

    ngOnDestroy(): void {
        this.subscriptions.forEach(subscription => subscription.unsubscribe());
    }
}

Step 2. Now open connection-status.ts file and place the below code:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'app-connection-status',
    templateUrl: './connection-status.component.html',
    styleUrls: ['./connection-status.component.scss']
})
export class ConnectionStatusComponent implements OnInit {

    @Input() onlineStatusMessage: string;
    @Input() onlineStatus: string;

    constructor() { }

    ngOnInit() {
    }

}

Step 3. Now in app.component.html file place the code where you want to show the internet connection status message. This is the file that will handle to show the message Online or Offline.

<app-connection-status [onlineStatusMessage]="connectionStatusMessage" [onlineStatus]="connectionStatus">
</app-connection-status>

That’s it, you have successfully implemented the functionality, How to detect internet connection status in Angular.

Now let’s check on the browser by running the Angular Application.

Compile the application using ng serve command and browse the URL ‘http://localhost:4200/’.

Note: If you want to use the new port and not 4200 you can do that by simply serving the application using command ng serve –port=4000 or any port number which you like.

Just like the above video open developer console window by pressing F12 in your computer and click on the Network tab.

Now toggle the Offline checkbox to see the status message.

Conclusion

It is very simple to show the Internet connection Status in an Angular application.

If you follow the instruction carefully as guided above you will find your desired result.

Finally, Detect Internet Connection Status in Angular tutorial is over. Hope you liked it.

Please fill free to share your thought in the comment box.