(2018) Updated Code for RxJS6 Compatibility

This code snippet is specifically designed to work with Angular 2. It's important to note the differences from AngularJS, as $scope and $apply are no longer present. However, thanks to RxJS, handling these changes is made easier. This code has been tested on Chrome 53:

Template:

<p>{{online$ | async}}</p>

Component:

import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Component({ /* ... */ })
export class MyComponent {
  online$: Observable<boolean>;

  constructor() {
    this.online$ = merge(
      of(navigator.onLine),
      fromEvent(window, 'online').pipe(mapTo(true)),
      fromEvent(window, 'offline').pipe(mapTo(false))
    );
  }
}

Consider the Meaning of 'Offline' in Your Context!

An offline status can manifest differently based on the circumstances. For example, being unplugged from an ethernet cable or having a slow EDGE connection may have similar effects on your application. Even if technically not offline, a poor wireless signal can pose significant challenges in detection.

In this code, a value of false indicates complete offline status, while true does not guarantee a reliable connection.

Initially, the solution provided by j2L4e didn't deliver the desired outcome for me when I tested it on Chrome. I made a slight tweak by encapsulating my boolean in brackets within the ngIf statement, and that did the trick.

<md-icon class="connected" mdTooltip="No Connection" *ngIf="!(isConnected | async)">signal_wifi_off</md-icon>

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

@Component({
  selector: 'toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
  isConnected: Observable<boolean>;

  constructor() {
    this.isConnected = Observable.merge(
      Observable.of(navigator.onLine),
      Observable.fromEvent(window, 'online').map(() => true),
      Observable.fromEvent(window, 'offline').map(() => false));
  }

  ngOnInit() {

  }
}

Upon my investigation, I have discovered that the navigator object is similar to the global window object. I successfully utilized it in angular2 and experienced no issues.

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template:`
navigator.onLine
{{onlineFlag}}

`
})
export class AppComponent {
  public onlineFlag =navigator.onLine;
}

To achieve this using Angular 6+ and Rxjs 6+, you can follow the steps below:

import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

online$: Observable<boolean>;

constructor() {
  this.online$ = merge(
    of(navigator.onLine),
    fromEvent(window, 'online').pipe(mapTo(true)),
    fromEvent(window, 'offline').pipe(mapTo(false))
  )
}

To see a live demonstration, click here (toggle network in dev tools)

Ensure Safe Listening to Network States

The solutions provided above are effective, but they do not adhere to a safe approach.

1. It is recommended not to reference browser-dependent objects like window directly; always verify the platform first.

2. Additionally, functionality such as monitoring Network Connection should be encapsulated within a service.

Below is an example of ConnectionService which allows subscription to listen for network states in compliance with rxjs 6 guidelines.

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(mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = empty();
}



 }

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

In your component, you can subscribe to monitor() to listen for changes or directly utilize it in HTML using an async pipe.

Need a simple solution for Angular 9 that is user-friendly and convenient? Check out the guide provided here along with the solutions discussed on this thread:

1) Start by creating a new component:

ng g c NoConnection

no-connection.component.ts

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { HttpClient }    from '@angular/common/http';

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

  isConnectionAvailable: boolean = navigator.onLine; 

  constructor(private httpClient: HttpClient) { 
      window.addEventListener('online', () => {
        this.isConnectionAvailable = true
    });

    window.addEventListener('offline', () => {
        this.isConnectionAvailable = false
    });
  }

  ngOnInit(): void {
  }

}

no-connection.component.html (customize as desired)

<div>

    <p style.color = "{{ isConnectionAvailable  ? 'green' : 'red'}}"> {{ isConnectionAvailable  ? 'Online' : 'Offline'}} </p>  

    <!-- https://stackoverflow.com/questions/13350663/greyed-out-waiting-page-in-javascript#answer-13350908 -->
    <div id="blackout" class="noselect" style.display = "{{isConnectionAvailable ? 'none' : 'block'}}">
        <br><br><br><br><br>
        <p>No Internet connection!</p>
        <br>
    </div>

</div>

no-connection.component.css

#blackout {
    width:100%;
    height:100%; /* make sure you have set parents to a height of 100% too*/
    position: absolute;
    left:0; top:0;
    z-index:10; /*just to make sure its on top*/

    opacity: 0.5; 
    background-color:#333; 
    text-align: center;

    font-size:25px; 
    color: white;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */                               
}

2) Incorporate the new component wherever needed - starting from the root component:

app.component.html

<div>

    <app-no-connection></app-no-connection>

    <app-main></app-main>

</div> 

Here's a simple trick you can use.

This works for angular 5 and newer versions.

 constructor(){
    setInterval(()=>{
       if(navigator.onLine){
         //code to execute when online
       }else{
        //code to execute when offline
       }
    }, 100)
 }

Add this code to the constructor of your app.component.ts or your app bootstrap without needing any external libraries.

import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ConnectivityInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // checking for internet connectivity
        if (!window.navigator.onLine) {
            // throw a HttpErrorResponse error if no internet connection is detected
            // this will end the function execution here
            return Observable.throw(new HttpErrorResponse({ error: 'Internet connection required.' }));

        } else {
            // otherwise, continue with the normal request
            return next.handle(request);
        }
    }
}