CODEWITHSUNDEEP
angularspinner
Umaiz Khan
Umaiz Khan

Reputation: 1227

Angular ngx-spinner not showing

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.

Upvotes: 9

Views: 37742

Answers (7)

Vishwa Perera
Vishwa Perera

Reputation: 1

Make to use the correct version of ngx-spinner based on your angular version. If you have angular 15 but you've installed the latest version of ngx-spinner, then you'll get an error.

Here's all ngx-spinner versions: https://www.npmjs.com/package/ngx-spinner?activeTab=versions

Install via:

npm i ngx-spinner@<YOUR_VERSION_HERE>

Upvotes: 0

Noob
Noob

Reputation: 2807

If after the setup you see an overlay but not the animation itself, restart the application. The animation should appear after that.

Upvotes: 3

Pramod Patil
Pramod Patil

Reputation: 2763

Got the same issue and the simple solution is whatever animation type you use in html, make sure you have added CSS for same in angular.json

For eg: HTML:

<ngx-spinner
bdColor="rgba(0, 0, 0, 0.8)"
size="medium"
color="#fff"
type="line-spin-fade" // type
[fullScreen]="false"
><p style="color: white">Loading...</p>
</ngx-spinner>

angular.json / project.json(NX)

"node_modules/ngx-spinner/animations/line-spin-fade.css" //use same type css

Upvotes: 0

Dev Gaud
Dev Gaud

Reputation: 844

I had to make changes in this part of @abbas solution

"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" 
        ],

Adding CSS file's path to styles didn't work for me. so, I had to import this in styles.scss like this

@import "~ngx-spinner/animations/ball-circus.css";

Upvotes: 4

Abbas Hosseini
Abbas Hosseini

Reputation: 747

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.

  1. 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" 
            ],
  1. 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,
  1. 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();
  1. 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

Upvotes: 21

dasunse
dasunse

Reputation: 3089

Try this. Example in the stackblitz

In your typescript file

import { NgxSpinnerService } from "ngx-spinner";
constructor(private spinner: NgxSpinnerService) { }

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

    setTimeout(() => {
         this.spinner.hide();
    }, 2000);
}

Upvotes: 1

RyanChouTaipei
RyanChouTaipei

Reputation: 91

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

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

Upvotes: 6

Related Questions