not able render loading on route change and in http request

[DeveBj]

Hi All,

Am using ngx-loading in my application, and trying to achieve the loading on every route change as well as the http request,
am using the ngx-loading in app.html and created a loader service with custom http interceptor, but in change route am unable to see the loader, but in http request am getting loader which is not rendering in that page rather it's coming in top of that page

kindly please help me to resolve it, Thanks in advance

App.html

<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'"
*ngIf="isLoading | async"

<svg:g ngx-facebook-preset></svg:g>

<div class="container-fluid no-overflow">
  <div class="row">
    <div class="header no-overflow" *ngIf="!login">
      <app-header></app-header>
    </div>
    <div class="navigation" *ngIf="!login">
      <app-nav></app-nav>
    </div>
    <div class="mainbox" [ngStyle]="{ width: login ? '100%' : '96%', height: login ? '100vh' : '' }">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Custom Http Interceptor

`import { Injectable } from "@angular/core";
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { finalize } from "rxjs/operators";
import { LoaderService } from 'src/app/shared-module/api-services/loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
constructor(public loaderService: LoaderService) { }
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
this.loaderService.show();
return next.handle(req).pipe(
finalize(() => this.loaderService.hide())
);
}
}
`
Loader.service.tc

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class LoaderService { isLoading = new Subject<boolean>(); show() { this.isLoading.next(true); } hide() { this.isLoading.next(false); } }
I have attached the loader image below