HttpClient & Rxjs

I am working on a case where during a network connection we sometimes might have a limited internet connectivity where we unable to get response from the server or failed response as HttpError. I hereby trying to ping the URL every second to check whether we are getting response or not, for this

I am trying this code, this is working fine in online method but when i am turning my internet of is doesn't return me false value.

fetch-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Posts } from './posts';
import { Observable, interval, throwError, of } from 'rxjs';
import { take, exhaustMap, map, retryWhen, retry, catchError, tap, mapTo, } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FetchDataService {

  public url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private _httpClient: HttpClient) { }

  getData() {
    const ob = interval(1000);
    return ob.pipe(
      exhaustMap(_ => {
        return this._httpClient.get<Posts[]>(this.url, { observe: 'response' });
      }),
      map(val => {
        if (val.status === 200)
          return true;
        throw val;
      }),
      retryWhen(errors => {
        return errors.pipe(map(val => {
          if (val.status === 0)
            return false;
        }))
      })
    );
  }


  // private handleError(error: HttpErrorResponse) {
  //   if (error.error instanceof ErrorEvent) {
  //     // A client-side or network error occurred. Handle it accordingly.
  //     console.error('An error occurred:', error.error.message);
  //   } else {
  //     // The backend returned an unsuccessful response code.
  //     // The response body may contain clues as to what went wrong,
  //     console.error(
  //       `Backend returned code ${error.status}, ` +
  //       `body was: ${error.error}`);
  //     if (error.status !== 200)
  //       return of(false);
  //   }
  //   // return an observable with a user-facing error message
  //   return throwError(
  //     'Something bad happened; please try again later.');

  // };

}

pulldata.component.html

import { Component, OnInit } from '@angular/core';
import { FetchDataService } from '../fetch-data.service';
import { Observable } from 'rxjs';
import { Posts } from '../posts';

@Component({
  selector: 'app-pulldata',
  templateUrl: './pulldata.component.html',
  styleUrls: ['./pulldata.component.css']
})
export class PulldataComponent implements OnInit {

  public data;
  public error = '';

  constructor(private _fecthDataServe: FetchDataService) { }

  ngOnInit() {
    this._fecthDataServe.getData().subscribe(val => {
      this.data = val;
      console.log(this.data);
    });

  }

}

what would be the best solution to check the internet connectivity in this manner?