Issue
I want to have a spinner while I am waiting for my API to complete, but here I have a problem. When I press the button onSave
correctly I saw the spinner, but after my API has completed my spinner is still here. Why is it not working? I want to close the spinner after complete.
public onSave() {
this.isSaving = true
this.formService.entityForm.markAsPristine();
this.visaSubmitHandler.execute({ application: this.formService.entityForm.value }).subscribe({
next: (response: IApplicationCreateResponse) => {
this.stateRehydrationService.clearStateKey(this.formService.key);
this.visaSuccessHandler.execute({ application: response.entity });
},
error: (response: IApplicationCreateResponse) => {
this.formService.entityForm.markAsDirty();
try {
for (const error of response.errors) {
const propertyName = `${error.propertyName[0].toLowerCase()}${error.propertyName.slice(1)}`
const control = this.formService.entityForm.get(propertyName) as AbstractControl;
setErrors({ serverError: error.message }, control);
}
this.bottomSheet.open(DisplayErrorsComponent, { data: response.errors.map(e => e.message) });
} catch (e) {
console.error(e);
}
},
complete: () => {
this.isSaving = false
}
})
}
<div class="overlay" *ngIf="isSaving">
<div class="spinner-container">
<mat-spinner></mat-spinner>
</div>
</div>
Solution
The simple answer is that in your template the variable isSaving
still has the value true
.
Therefore,
- either the change detection is disabled by
OnPush
(in this case you do manualchangeDetectorRef.markForCheck()
right afterthis.isSaving = false;
) - or the observable
this.visaSubmitHandler.execute
does not complete (in this case you can dothis.isSaving = false;
in yournext:
block or ensure that your observable is closed.
Answered By - grenobnik
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.