I had this online/offline observable and I needed it on my component. This was the snippet I used to show things dependent on my online/offline state:

<div *ngIf="(online$ | async) != false">
  Hi, I'm online!
<div *ngIf="(online$ | async) === false">
  Oops, I'm offline

For this, I use the Network class from @ngx-pwa/offline. This is my Home component:

import {Component} from '@angular/core';
import {Network} from "@ngx-pwa/offline";

  selector: 'app-home',
  templateUrl: 'home.page.html'
export class HomePage {
  public online$ = this.network.onlineChanges;

    protected network: Network
  ) {




Saved you some valuable time?

Buy me a drink 🍺