Solved: 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

html

<div *ngIf= "showSpinner" id="spinner" class="centered">
    <app-loading></app-loading>
</div>
<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">
                            {{st.stateAbbreviation}}
                </option>
            </select>
</div>

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';



@Component({
  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 {
    this.showSpinner=true;
    this.getLocations(state);
    this.showSpinner=false;
  }

  getLocations(state:string){
    this.EmptyISOLocArrays();
    this.moratoriumService.getISOLocations(state)
      .pipe(
        takeUntil(this.ngUnsubscribe))
        .subscribe((data) => {
          this.isoLocs = data;
          this.getISOLocationCounties(data);
        });

  }

}

Open in new window