Angular Spinner

Question

How to use multiple ngx-spinner for two different services i.e. I am using a common spinner for loading in the interceptors and want to use another spinner for payment process which is a demo service where no Api call is made? Please suggest some ideas.

Answer 1

You could make a loading-service which it's only purpose it's to activate the loading spinner. The code could look something like this:

import { Injectable } from '@angular/core';

@Injectable(
{
    providedIn: 'root'
  }
)
export class LoadingServiceService {

  private loading: boolean = false

  constructor() { }

  public setLoading(value: boolean): void {
    this.loading = value
  }

  public isLoading(): boolean {
    return this.loading
  }
}

Then you could manage the loading state from different component. Keep in mind that in order to render the spinner you ahave to write it in every htmlfile you want to use it, and then inject this service.