Web applications need to be aware of the user's internet connectivity. By knowing whether the user is online or offline, you can provide a better user experience and handle network-related tasks accordingly. In this article, we'll explore how to get the internet status in an Angular app using a service file.

import { Injectable } from '@angular/core';
import { of, fromEvent, merge, map } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class NetworkStatusService {
  status$ = merge(
    of(navigator.onLine),
    fromEvent(window, 'online').pipe(map(() => true)),
    fromEvent(window, 'offline').pipe(map(() => false))
  );
}

The NetworkStatusService class contains a status$ property that is an Observable representing the internet status. It combines three sources of information to determine the status:

1. of(navigator.onLine): This creates an Observable that emits the current online status of the browser. It will emit true if the browser is online and false if it's offline.

2. fromEvent(window, 'online'): This creates an Observable that listens for the online event on the window object. When the browser goes online, it emits true.

3. fromEvent(window, 'offline'): Similarly, this creates an Observable that listens for the offline event on the window object. When the browser goes offline, it emits false.

By merging these three sources, the status$ Observable will emit the current internet status and update whenever the status changes.

the Example app:
https://stackblitz.com/edit/stackblitz-starters-thscwg?file=src%2Fnetwork-status.service.ts

Thanks to Sinan Ozturk. He handled the task. i just wrote a note for the future as reminder