I want to implement a spinner for my Angular 7 application's HTTP requests. To achieve this, I have created an HttpInterceptor class, a loader service, a loader component, and a Subject to manage the state of the spinner (whether it should be shown or hidden). However, I am facing an issue with the communication between the loader service and the loader component.
The HttpInterceptor appears to be functioning correctly as it is outputting true and false states to the console (see code snippet below). However, there seems to be a discrepancy in the implementation of the loader service and loader component. I have used an ngIf directive to toggle the visibility of the spinner based on the state of the Subject.
Here is the LoaderService:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoaderService {
isLoading = new Subject<boolean>();
show() {
console.log('true');
this.isLoading.next(true);
}
hide() {
console.log('false');
this.isLoading.next(false);
}
constructor() { }
}
And here is the LoaderComponent:
import { Component, OnInit } from '@angular/core';
import {LoaderService} from '../loader.service';
import { Subject } from 'rxjs';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
isLoading: Subject<boolean> = this.loaderService.isLoading;
constructor(private loaderService: LoaderService) { }
ngOnInit() {
}
}
<div *ngIf="isLoading | async" class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Currently, the spinner is not displaying or hiding properly. The console only shows 'true' when the loading starts and 'false' when it ends. I have included the loader selector in the app.component.html file, so everything should be set up correctly. Can you spot any mistakes in my implementation?