Angular ngx-spinner not showing

Question

I need to show the spinner till the data is fetch from the httpclient. But the spinner is not showing.

I just need to show spinner or loader until the data comes from API so user can see the data is loading. Is there any problem in my .html ?.

It's showing when I'm filtering data but not showing when the page is loading .

    import { Component, OnInit } from '@angular/core';
    import { ApiService } from 'app/services/api/api.service';
    import { map } from 'rxjs/operators';
    import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { NgxSpinnerService } from 'ngx-spinner';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map'

    @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
    })
    export class HomeComponent {

      clientData: Observable<any>;
      data: any  = []; 
      status: any = [];
      countunsettled: any;
      countsettled: any;
      sums: any;

      policy_id:Set = new Set();

       constructor(private modalService: NgbModal, private api:ApiService, public httpClient: HttpClient, private spinner: NgxSpinnerService) { 

       this.getClaims();
      }

      userFilter: any = { policy_id:'', claim_no:'', member_name:'', status:'', company_id: ''};

    openDeal(deletecontent,x){
       this.selectedDeal = x;
        this.dealModal= this.modalService.open(deletecontent, x);
        this.dealModal.result.then(r=>{
        }, err=> console.log(err))
    }

     getClaims(){
           this.spinner.show();

     if(this.userFilter.company_id){
       let url = 'xyz.com.pk'+this.userFilter.company_id;
     }else{
       let url = xyz.com.pk.php?offset=0&limit=100';

      }

     this.clientData = this.httpClient.get(url).
     subscribe(data => {
       console.log(data);
       this.spinner.hide();

       this.data = data.records;
       this.data.forEach(d => this.policy_id.add(d.policy_id));

     var status = 'settled';
     var status2 = 'submitted';

     var countsettled = this.data.filter((obj) => obj.status === status).length;
     var countunsettled = this.data.filter((obj) => obj.status === status2).length;

     console.log(countsettled);
     this.countsettled = countsettled;
     console.log(countunsettled);
     this.countunsettled = countunsettled;

     const sum1 = this.data.filter(item => item.status === 'settled')
                     .reduce((acc, item) => acc + Number(item.approved_value), 0);
                     console.log(sum1);
                     this.sum1 = sum1;

     const sum2 = this.data.filter(item => item.status === 'submitted')
                     .reduce((acc, item) => acc + Number(item.approved_value), 0);
                     console.log(sum2);
                     this.sum2 = sum2
         }
      }
    }

html template:

<ngx-spinner></ngx-spinner>

it's not showing any error and also not showing the spinner.

Answer 1

I faced this issue when I upgraded from 11 to 13.
Here are the steps you need to take:

1. In package.json file:

 "dependencies": {
    ...
    "ngx-spinner": "^13.1.1",
    ...

Or click here for installation.

2. In angular.json file:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "styles": [
              "node_modules/material-design-icons/iconfont/material-icons.css",
              "node_modules/ngx-spinner/animations/ball-circus.css", // This wasn't required in version 11.
              "src/styles.scss" 
            ],

3. In app.module.ts file:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { NgxSpinnerModule } from "ngx-spinner";
...
          imports: [
                    MatModule,
                    NgxSpinnerModule,
                    CommonModule
          ],
          exports: [
                    MatModule,
                    NgxSpinnerModule,
...
schemas:[CUSTOM_ELEMENTS_SCHEMA] // This is new to version 13 as well,

4. In home.component.ts file:

import { NgxSpinnerService } from 'ngx-spinner';
...
constructor (private spinnerService: NgxSpinnerService, ...){...}
...
//wherever show needed:
this.spinnerService.show();

//wherever you want to hide the spinner:
this.spinnerService.hide();

5. In the html file:

...
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="large" color="#fff" type="ball-circus" [fullScreen] = "true"></ngx-spinner>
...

The older versions have slightly different setup. Since I upgraded from version 11 to 13, the spinner stopped working. It took me a day to find out this setup that works for version 13.

Ref: https://www.npmjs.com/package/ngx-spinner

Answer 2

You need to call spinner.show() in ngAfterViewInit; if not in here, this.spinner is undefined

ngAfterViewInit(): void { this.spinner.show(); }