How to show spinner in angular 6

Question

I am new to angular and web development but able to design various web pages and got data from the server using HTTP client module.

While getting data from server I

Answer 1

You can use ng4-loading-spinner

Execute npm i ng4-loading-spinner --save

Import module to your application root module

import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

Make an import entry

 imports: [ Ng4LoadingSpinnerModule.forRoot() ]

Include spinner component to your root level component.

<ng4-loading-spinner> </ng4-loading-spinner>

use show() and hide() inside subscribe callback

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 constructor(
        private spinnerService: Ng4LoadingSpinnerService
    ) { }
    userLogin() {

        this.spinnerService.show();
            console.log('logging in');
            this.eService.signIn(this.user_name, this.password)
            .subscribe(
                data => {
                    console.log(data);
                   this.admin = data;
                   if ( this.admin.firstLogin === true) {
                       // go to update admin password
                   } else {
                    this.router.navigate(['/dashboard']);
                    }
                   localStorage.setItem('isLoggedin', 'true');
                 },
               ()=>this.spinnerService.hide();
            );
        }

Live Demo

Answer 2

Add the spinner into your HTML code, like so:

<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->

Then, in your Typescript, you need to create a variable called loading, and set it like so:

userLogin() {
    console.log('logging in');
    this.loading = true; // Add this line
    this.eService.signIn(this.user_name, this.password)
    .subscribe(
        data => {
            console.log(data);
           this.loading = false; // And this one
           this.admin = data;
           if ( this.admin.firstLogin === true) {
               // go to update admin password
           } else {
            this.router.navigate(['/dashboard']);
            }
           localStorage.setItem('isLoggedin', 'true');
         }
    );
}

This will set loading to true while the service is in action

Answer 3

For those who still search for loading spinner in angular, please feel free to look at:

• if you need only initial loading just have a look: How To Style Angular Application Loading With Angular CLI Like a Boss by Tomas.

• if you would like to check all the four ways of loading spinner here you go:

  The Four ways to Create Loading Spinners in an Angular App by Cristian.