How can you detect network connectivity in Angular 2?

Question

I am trying to write a component that will detect whether the app is online or offline so it can trigger another event. Is there a built-in function that can be leveraged?

BeetleJuice · Accepted Answer · 2018-09-10T04:25:53.193

To listen to and react to change, you need an event handler. In Angular, Observables are best
To be notified of the app coming online or going offline, rely on the online/offline events
```
online$ = fromEvent(window, 'online');
offline$ = fromEvent(window, 'offline');
```

Chain your other events to these:

online$.subscribe(e => this.syncWithServer());

Also see this article about navigator.onLine. Note that browsers don't implement this event uniformly. In some cases, "online" just means that the browser is connected to a local network, not the internet. To get more reliable information, you may need to test by trying to ping a remote server when the event fires.

online$ = fromEvent(window, 'online').pipe(
            switchMap(e => this.pingServer()),
            filter(e => e)
          );

offline$ = fromEvent(window, 'offline').pipe(
            switchMap(e => this.pingServer()),
            filter(e => !e)
          );

Where pingServer will make a remote request and return an observable that emits true when the request is successful, or false otherwise.

to get rid of `Observable.fromEvent is not a function error` ; you should subscribe to `formEvent` itself. .... I use: `fromEvent(window, 'offline').subscribe(() => {this.isOnline = false})` — tabebqena, Sep 05 '18 at 13:43
Thanks. This answer was published about a year ago. I've updated it to use RxJS 6 syntax (pipeable operators) — BeetleJuice, Sep 10 '18 at 04:30
@BeetleJuice I am using `HttpInterceptor` to check the internet connectivity, but not able to use your code can you explain a bit like where to add those function and observable — Prashant Pimpale, Nov 06 '18 at 15:07

score 6 · Answer 2 · edited Apr 03 '21 at 11:23

Safe Approach to listen to network states

Answers given above works well but are not considered safe approach.

1.Browser dependent objects should not be referenced directly, always check for platform.

2.Furthermore functionality like Network Connection must be encapsulated into a service.

Below is the ConnectionService which can be subscribed to listen network states. It follows the rxjs 6 style.

Complete Code

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Observable, fromEvent, merge, EMPTY } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
import { mapTo } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {

  private connectionMonitor: Observable<boolean>;

  constructor(@Inject(PLATFORM_ID) platform) {
if (isPlatformBrowser(platform)) {
  const offline$ = fromEvent(window, 'offline').pipe(startWith(!window.navigator.onLine), mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(startWith(window.navigator.onLine), mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = EMPTY;
}



 }

  monitor(): Observable<boolean> {
    return this.connectionMonitor;
  }
}

in component, you may listen by subscribing to monitor() or directly into HTML using async pipe.

This is the best answer. Relying on online or offline only is not enough (e.g. switching Dev Tools to offline will not change the online$ only the offline$, so the merge is required). Binding the component is as easy as `connection.monitor() | async`. Thanks. — Alexei - check Codidact, Oct 31 '20 at 16:53
I had to pipe initial values (nothing is emitted on first load): `startWith(!window.navigator.onLine)` and `startWith(window.navigator.onLine)` respectively. — Alexei - check Codidact, Oct 31 '20 at 16:59

score 4 · Answer 3 · answered Apr 17 '18 at 11:30

4

export class HomeComponent implements OnInit {
   public isOnline : boolean = navigator.onLine;
}

answered Apr 17 '18 at 11:30

Amin Najafi

41
3

score 1 · Answer 4 · answered Oct 16 '19 at 07:13

Another solution with basic javascript functions. Use this below code in app.component.ts file

constructor() {
    window.addEventListener("online", () => {
        alert ("Your browser is working online.");
    });
    window.addEventListener("offline", () => {
        alert ("Your browser is working offline.");
    });
}

How can you detect network connectivity in Angular 2?

4 Answers4