Avatar of Jason Livengood
Jason Livengood
Flag for United States of America

asked on 

Trying to show spinner while waiting on api response in Angular

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($event.target.value)">
                <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

HTMLChromeAngularWeb Browsers

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon