Check internet connection in web using Angular 4

Question

I am using Angular 4 for my application development. I need to check If the network connection is available for its have any Connection issue using Angular for. Is it possib

Answer 1

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;
  private static offline$: Observable;

  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.