cic-staff-client/src/app/shared/network-status/network-status.component.ts

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-network-status',
  templateUrl: './network-status.component.html',
  styleUrls: ['./network-status.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NetworkStatusComponent implements OnInit {
  noInternetConnection: boolean = !navigator.onLine;

  constructor(private cdr: ChangeDetectorRef) {
    this.handleNetworkChange();
  }

  ngOnInit(): void {}

  handleNetworkChange(): void {
    setTimeout(() => {
      if (!navigator.onLine !== this.noInternetConnection) {
        this.noInternetConnection = !navigator.onLine;
        this.cdr.detectChanges();
      }
      this.handleNetworkChange();
    }, 5000);
  }
}