I've been attempting to incorporate a spinner into my application, but unfortunately, the spinner isn't showing up.
Despite checking the console and terminal for errors, there doesn't seem to be any indication as to why the spinner is not appearing.
loader.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
display(value: boolean) {
this.status.next(value);
}
}
app.module.ts
I imported LoadService and included it in the providers array.
app.component.ts
import { LoaderService } from './services/loader.service';
export class AppComponent {
//for the spinner
showLoader: boolean;
//LoaderService is for the spinner
constructor(private loaderService: LoaderService) { }
//for the spinner
ngOnInit() {
this.loaderService.status.subscribe((val: boolean) => {
this.showLoader = val;
});
}
}
app.component.html
<router-outlet>
<div *ngIf="showLoader">
<mat-spinner></mat-spinner>
</div>
</router-outlet>
custom.component.ts
import { LoaderService } from '../services/loader.service';
export class SurveyresultsComponent implements OnInit {
constructor(private loaderService: LoaderService) { }
ngOnInit() {
//http call starts
this.loaderService.display(true);
//http call ends
this.loaderService.display(false);
}
}