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.

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