Ngx Network Status Reporter

A lightweight Angular library that monitors network status and exposes it as a computed signal. It handles both browser online/offline events and actual internet connectivity checks.

npm install @wamlib/ngx-network-status-reporter

Setup

Add the provider to your app.config.ts:

import { provideNetworkStatusReporter } from '@wamlib/ngx-network-status-reporter';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNetworkStatusReporter(),
    // ... other providers
  ]
};

Basic usage in Template

import { NgxNetworkStatusReporter } from '@wamlib/ngx-network-status-reporter';

export class AppComponent {
  readonly networkStatusReporter = inject(NgxNetworkStatusReporter);
  readonly status = this.networkStatusReporter.networkStatus;
}

@if (status() === 'offline') {
  <div class="offline-banner">
    You are currently offline. Some features may be unavailable.
  </div>
}

Usage in Component Logic

You can use the networkStatus signal to perform actions when the status changes.

import { NgxNetworkStatusReporter } from '@wamlib/ngx-network-status-reporter';

export class DataService {
  readonly #networkStatusReporter = inject(NgxNetworkStatusReporter);

  constructor() {
    effect(() => {
      const status = this.#networkStatusReporter.networkStatus();
      if (status === 'reconnected') {
        this.syncData();
      }
    });
  }

  private syncData() {
    // Logic to sync data when connection is restored
  }
}

Status Types

The networkStatus signal emits one of the following values:

• 'online': The browser is online and internet connectivity is verified.
• 'offline': The browser is offline or internet connectivity is unreachable.
• 'reconnected': The connection has just been restored after being offline.