troubleshooting Question

Trying to show spinner while waiting on api response in Angular

Avatar of Jason Livengood
Jason LivengoodFlag for United States of America asked on
HTMLChromeAngularWeb Browsers
6 Comments1 Solution66 ViewsLast Modified:
I am new to Angular. Using Anglar 9.  I would like to add a spinner to my application while waiting for the response to an api call. What's the best way to do this ? Currently I am trying to use ngIf on my html elements while setting a boolean variable in my component. If showSpinner is true I want to show the spinner while hiding the dicv my html form resides in.  It just doesn't seem to want to work. Sometimes nothing happens. Sometimes I get an error saying "cannot read property 'pipe' of undefined" . It seems I have to turn chrome caching off quite a bit. Below is my code . Any advice would be most appreciated. - Jason

<div *ngIf= "showSpinner" id="spinner" class="centered">
<div *ngIf= "!showSpinner" id="add-moratoriums">
  <select id="ddlstate" formControlName="state" name="ddlstate" (change)="getISOLocations($">
                <option value="" selected >--Select--</option>
                <option *ngFor="let st of stCodes" [value]="st.stateAbbreviation">

Open in new window

my component
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Observable, of, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
import { ISOLocations } from '../shared/models/moratorium-models/ISOLocations';
import { Moratorium } from '../shared/models/moratorium-models/Moratorium';
import { MoratoriumLocation } from '../shared/models/moratorium-models/MoratoriumLocation';
import { MoratoriumReason } from '../shared/models/moratorium-models/MoratoriumReason';
import { MoratoriumSystem } from '../shared/models/moratorium-models/MoratoriumSystem';
import { StateCodes } from '../shared/models/moratorium-models/StateCodes';
import { DataService } from '../shared/services/data/data.service';
import { MoratoriumService } from '../shared/services/moratorium/moratorium.service';

  selector: 'add-moratoriums',
  templateUrl: './add-moratoriums.component.html',
  styleUrls: ['./add-moratoriums.component.scss'],

export class AddMoratoriumsComponent implements OnInit {

 showSpinner:boolean = false;

constructor(private moratoriumService: MoratoriumService, private router:Router, private dataservice: DataService) { }

//Here I try to set it my variable to true (show the spinner), then make the api call, then set the the spinner back to false..
  getISOLocations(state: string): void {

        .subscribe((data) => {
          this.isoLocs = data;



Open in new window

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros