Why my global loader interceptor is not working correctly in angular12? I have an interceptor whose job is just to show loader when http request starts and hide when http request ends. So for that I tried this so far
loader.interceptor.ts
@Injectable({ providedIn: 'root' })
export class LoaderInterceptor implements HttpInterceptor {

 constructor(private _us: UtilService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this._us.showLoader();
  return next.handle(req).pipe(
    finalize(() => this._us.hideLoader())
  );
 }
}

util.service.ts
  isLoading = new BehaviorSubject<boolean>(false);

  showLoader() {
    this.isLoading.next(true);
    console.log(this.isLoading.value);
  }

  hideLoader() {
    this.isLoading.next(false);
  }

layout.componet.html
<div class="wrapper w-100">
   <cl-spinner [show]="isLoading"></cl-spinner>
<!-- Navbar -->
<app-header></app-header>
<!-- /.navbar -->

<!-- Main Sidebar Container -->
<app-sidebar></app-sidebar>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper p-3">
   <router-outlet></router-outlet>
</div>
<!-- /.content-wrapper -->

<!-- Main Footer -->
  <app-footer></app-footer>

 <!-- Control Sidebar -->
 <app-control-sidebar></app-control-sidebar>
 <!-- /.control-sidebar -->

</div>

layout.component.ts
ngAfterContentChecked() {
    this.us.isLoading.subscribe((val: any) => {
      console.log('value from subscriber : ',val)
      if (val != this.isLoading) {
this.isLoading = val;
this.cdr.detectChanges();
      }
   });
}

spinner.component.html
 <div class="cl-loader-wrapper" *ngIf="show">
   <div class="d-flex justify-content-center">
      <div class="spinner-border loader-content"  role="status">
<span class="sr-only">Loading...</span>
      </div>
   </div>
 </div>

spinner.copmonent.ts
  @Input() show: boolean;

It's printing like this in console

but the problem is that it's not showing loader at all because inside layout.component.ts inside of subscriber of isLoading observable it always gets false value in subscriber but i am passing true to the BehaviourSubject of isLoading so it should show the loader. But still loader is not showing. Where is a miss in this flow?