ngx-network-status

🌐 Angular Network Status

A lightweight Angular library to detect actual internet connectivity by pinging a backend endpoint — not just relying on navigator.onLine.

🚀 Why This Library?

• navigator.onLine is unreliable — it only checks local connection, not real internet access.
• This library actively pings a backend server to verify actual connectivity.
• Exposes a clean RxJS Observable (isOnline$) to subscribe from any component or service.
• Fully compatible with Angular v13 and above.

---

📦 Installation

npm install angular-network-status

⚙️ Setup

1. Import HttpClientModule in your AppModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // ...
  ],
})
export class AppModule {}

2.Use the NetworkStatusService in your component

import { Component } from '@angular/core';
import { NetworkStatusService } from 'angular-network-status';

@Component({
  selector: 'app-root',
  template: `
    <p *ngIf="isOnline$ | async; else offline">You are online</p>
    <ng-template #offline><p>You are offline</p></ng-template>
  `,
})
export class AppComponent {
  isOnline$ = this.networkStatusService.isOnline$;

  constructor(private networkStatusService: NetworkStatusService) {}
}

🧪 How It Works

• Starts a timer loop every 3 seconds

• Pings the configured backend endpoint (default: /api/ping)

• If response is 200, emits true, else false

• Keeps emitting changes only when status flips (distinctUntilChanged)

✅ API

isOnline$ : Observable<boolean>

Subscribe to this to get real-time connectivity status.

💡 Roadmap / Future Ideas

• Detect slow internet & emit custom message (e.g., "Slow Connection Detected")

• Support multi-ping strategies

• Angular signals support (v17+)

🛡️ License

Let me know if you want to replace Sourav with your actual GitHub handle or real name.