Use the async pipe on an observable in Angular

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>
<div *ngIf="(online$ | async) === false">
  Oops, I'm offline
</div>

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";

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

  constructor(
    protected network: Network
  ) {
  }

}