Angular 10Bootstrap 4.5Javascriptrxjs

Angular 10 check internet connection

angular 10 check internet connection

Hello to all, welcome to therichpost.com. In this post, I will let you know, Angular 10 check internet connection.

Angular checking internet is working or not.

Post Working:

In this post, with help rxjs fromevent, I am getting internet status into my angular 10 application. I have used bootstrap and jquery for user notification and making good looking working example.

Here is the working code snippet for Angular 10 check internet connection:

1. Firstly we need to run below commands for fresh angular 10 setup and we should have latest nodejs installed on our systems:

npm install -g @angular/cli //Setup Angular10 atmosphere

ng new angularl10 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angular10 //Go inside the Angular 10 Project

 

2. Secondly, we need to run below commands to have bootstrap, jquery modules into our angular 10 application but you can forget this step because I am doing this for good user practice:

npm install --save bootstrap

npm install jquery --save

npm install popper.js --save

 

3. Now, we need to add below code inside our angular.json file to get styles and scripts:

...
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [  "node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

 

4. Now you need to add below code into your src/app/app.component.ts file to get and set the rxjs events:

...
declare var $: any;
import { Observable, Observer, fromEvent, merge } from 'rxjs';
import { map } from 'rxjs/operators';
...

export class AppComponent {
...
 
  //function to check the internet connection
  therichpost$() {
    return merge<boolean>(
      fromEvent(window, 'offline').pipe(map(() => false)),
      fromEvent(window, 'online').pipe(map(() => true)),
      new Observable((sub: Observer<boolean>) => {
        sub.next(navigator.onLine);
        sub.complete();
      }));
}

ngOnInit(){
  this.therichpost$().subscribe(isOnline => this.checkinterent = isOnline);

  //checking internet connection
  if(this.checkinterent == true)
  {

    //show success alert if internet is working
    $('.toastonline').toast('show')
  }
  else{

   //show danger alert if net internet not working
    $('.toastoffline').toast('show')
  }

}

 

5, In the end, we need to add below code inside our src/app/app.component.html file to get the final output:

<div class="container text-center">
  <h1 class="mt-5 mb-5">Angular 10 </h1>

  <!--Toast for working -->
  <div class="toast toastonline" data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto text-primary">Hurray!!</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
      Your Internent is working.
    </div>
  </div>

  <!--Toast for not working -->
  <div class="toast toastoffline" data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto text-primary">OOPS!!</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
      Your Internent is not working.
    </div>
  </div>
</div>

 

This is it friends and don’t forget to run ng serve command in the end to taste the final output on browser.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.