CODEWITHSUNDEEP
angular
moris62
moris62

Reputation: 1045

loading spinner does show even if its true condition in angular

I have a loader which is simple :

 <div *ngIf="loadingSpinner" class="k-i-loading"></div>

on top of my .ts class i set it false:

public loadingSpinner:boolean=false;

i want it to be set to true when the following function is hit:

       <div class="card" (click)="SendToBank()">
          <div *ngIf="loadingSpinner" class="k-i-loading"></div>
         </div>

in my function In the beginning i set it to true to start showing until the data is fetched from the back end and once its done set it to false again,where im doing wrong that i cant see the spinner after function is hit?

        SendToBank(){

    this.loadingSpinner=true;
    this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
      .pipe(retryWhen(_ => {
        this.showIt=true
        return interval(1000)
      }))
      .subscribe(result => {result
      console.log(result);
      this.qrcodelink=result["qrCodeLink"];
      this.loadingSpinner=false;
      })

    }

Upvotes: 0

Views: 1917

Answers (1)

Mr.UV
Mr.UV

Reputation: 100

You can please verify that this "SendToBack" function is getting called on click? Also, I don't see any code inside

<div *ngIf="loadingSpinner" class="k-i-loading"></div>

So it is just an empty div tag maybe that's why you are not seeing anything.

also you can try to use

SendToBank(){

this.loadingSpinner=true;
this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
  .pipe(retryWhen(_ => {
    this.showIt=true
    return interval(1000)
  }))
  .subscribe(result => {result
  console.log(result);
  this.qrcodelink=result["qrCodeLink"];
  setTimeout(() => {
      this.loadingSpinner=false;
  }, 5000);
  
  })

}

if none of these works then kindly provide the the code of that class "k-i-loading". i would like to help.

Upvotes: 1

Related Questions