How to stop loading spinner in angular 11

Question

I have added loading spinner in my app. and I want to stop it when PDF is display. I have added code to stop loading but it's not workable. how to solve this issue.

pdf.component.html

<section>
    <div style='position: relative; height: 100%;'>
        <pdf-viewer style="width: 20px" [src]="pdfsrc+data[0].pdf_name" [render-text]="true" style="display: block;" [rotation]="0"
            [original-size]="false" [show-all]="true" [fit-to-page]="true" [zoom]="0" [zoom-scale]="'page-width'" [stick-to-page]="false"
            [render-text]="true" [external-link-target]="'blank'" [autoresize]="true" [show-borders]="false"></pdf-viewer>
    </div>
</section>
<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">
    <p style="color: rgb(33, 221, 118)">Be Patince PDF is loaded. </p>
</ngx-spinner>

pdf.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from '../api.service';
import { NgxSpinnerService } from "ngx-spinner";

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.css']
})
export class PdfComponent implements OnInit {

  constructor(private aroute: Router, private formBuilder: FormBuilder, private SpinnerService: NgxSpinnerService, private api: ApiService, private activeRoute: ActivatedRoute, private route: Router) {

  }
  data: any;
  //totalPages:any;
  submitted = false;
  ngOnInit(): void {
    this.SpinnerService.show();
    window.scrollTo(0, 0);
    this.api.tbl_report_pdf_data_one(this.activeRoute.snapshot.params.pdfid).subscribe((res) => {
      this.data = res;
  this.SpinnerService.hide();
    })
page: number = 1;
  isLoaded: boolean = false;
  pdfsrc: any = "assets/uploads/";

Answer 1

this should be very simple, just use isLoaded in your HTML:

<ngx-spinner *ngIf="!isLoaded" bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">
    <p style="color: rgb(33, 221, 118)">Be Patince PDF is loaded. </p>
</ngx-spinner>

and

this.api.tbl_report_pdf_data_one(this.activeRoute.snapshot.params.pdfid).subscribe((res) => {
  this.data = res;
  this.isLoaded = true;
})