Check internet connection in web using Angular 4

We don't need any libraries for this however public onlineOffline: boolean = navigator.onLine; will do the trick but this is just a one time check. We need to treat this value as an observable so whenever the online status change we are updated. For this rxjs will help.

Import these

import { Observable, Observer, fromEvent, merge } from 'rxjs';import { map } from 'rxjs/operators';

Add this method

  createOnline$() {    return merge<boolean>(      fromEvent(window, 'offline').pipe(map(() => false)),      fromEvent(window, 'online').pipe(map(() => true)),      new Observable((sub: Observer<boolean>) => {        sub.next(navigator.onLine);        sub.complete();      }));  }

Subscribe to this event from your constructur or ngOnInit

this.createOnline$().subscribe(isOnline => console.log(isOnline));

Note: Im using Angular 8.1 and rxjs 6.5.2

You do not have to use any library for this, you can use navigator global object like window. You can use in in angular4

public onlineOffline: boolean = navigator.onLine;

I created a class called NetworkConnection which checks status of network connection. Here is code sample

import { Observable } from 'rxjs/Observable';import 'rxjs/add/observable/fromEvent';export enum ConnectionStatusEnum {  Online,  Offline}export class NetworkConnection {  public static status: ConnectionStatusEnum = ConnectionStatusEnum.Online;  private static online$: Observable<string>;  private static offline$: Observable<string>;  public static init() {    NetworkConnection.online$ = Observable.fromEvent(window, 'online');    NetworkConnection.offline$ = Observable.fromEvent(window, 'offline');    NetworkConnection.online$.subscribe(e => {      console.log('Online');      NetworkConnection.status = ConnectionStatusEnum.Online;    });    NetworkConnection.offline$.subscribe(e => {      console.log('Offline');      NetworkConnection.status = ConnectionStatusEnum.Offline;    });  }  constructor() {    NetworkConnection.init();  }}new NetworkConnection();

And you can use it like

import { NetworkConnection, ConnectionStatusEnum } from './ConnectionStatus';....if(NetworkConnection.status == ConnectionStatusEnum.Offline) {    // do something}....

Additionally, if you want to check connection to internet, you can periodically ping sites like www.google.com instead of online/offline events. OR combination of both the approaches.