Spinner Angular material does not work in synchronous calls

Asked

Viewed 106 times

1

I have a synchronous call new SyncRequestClient().post<HistoricoModel,Response>(solrRequest, request); and I need a spinner created for that call. Appear before the call is made and disappear after the call using the Angularmaterial component <mat-progress-spinner> or <mat-spinner>, but it doesn’t work, the spinner never appears.

html code:

<mat-spinner *ngIf="spinnerVisible"></mat-spinner>

Component.

public spinnerVisible: boolean = false;

 public sendGetDocumentosAllPages(pesquisa, tipo) {
    this.spinnerVisible = true;
    response = new SyncRequestClient().get<Response>(solrRequest);
    this.spinnerVisible = false;
    return response;
}

Query takes time to execute, but spinner never appears

angular typescript angular-material

  • That code of yours is completely synchronous

  • Yes, so it is not possible to add a spinner. Or is there a way? I think it doesn’t work because it can only one action at a time, that’s it ?

  • it doesn’t work because this synchronous code is practically instaneo , to work you have to turn into asincrono to wait for the call

1 answer

2

As you were told in the comments, your code is synchronous - that is to say: it will not wait for nothing to end, it will simply run the script statements until its end.

to be asyncrono (which is like saying, wait for statements to return until you pass to the next statement) you will have to change the function to async function and use the await:

public spinnerVisible: boolean = false;

async sendGetDocumentosAllPages(pesquisa, tipo) {
  this.spinnerVisible = true;
  const syncReqCli = new SyncRequestClient();
  const response = await syncReqCli.get<Response>(solrRequest);
  this.spinnerVisible = false;
  return response;
}

of course, assuming new SyncRequestClient().get returns a Promise.

Browser other questions tagged angular typescript angular-material

You are not signed in. Login or sign up in order to post.