Angular 8 Metronic binding not updating

Question

I started a project with Angular 8 Metronic.

I have a component with a form. I want spinner appears on submit click and disappear on API response. Here is a part of the component code :

@Component({
 selector: 'change-password',
 templateUrl: './change-password.component.html',
 styleUrls: ['./change-password.component.scss'],
})
export class ChangePasswordComponent implements OnInit, OnDestroy {

 isLoading: boolean = false;
 ...
 submit() {

  this.isLoading = true;
  
  this.utilisateurService
   .changePassword(changePasswordData).pipe(finalize(() => this.isLoading = false))
   .subscribe(() => {});
 }
        ...
}

<form class="kt-form" [formGroup]="changePasswordForm" autocomplete="off">
        ...
 <div class="kt-login__actions">
  <button (click)="submit()" 
  [ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': isLoading}">
   Submit
  </button>
 </div>
</form>

When I click on submit button, isLoading property is updated to true and spinner appears. When finalize() executes, isLoading property is updated to false but spinner do not disappear...

I don't understand.

I tried to use NgZone but same problem.

Any idea ?

Edit

I tried with tap and subscribe. Still the same problem. Problem is only for rendering. If I click on submit button again, isLoading property is false, as expected. But spinner still running.

Answer 1

You can resolve this problem, in the app.component.ts file changeDetection configuration set to Default.

Answer 2

If you want to do something when the observable completes then use the complete callback instead of finalize:

Answer 3

Quick checklist

1. Are you sure finalize is running and the boolean is changing?

   finalize is executed when the subscription is completed, not just emitting a value. There could be an issue with this.utilisateurService.changePassword(...) never completing the observable.

2. Does it work if you change finalize to tap?

   tap transparently performs actions or side-effects on every emission.

      this.utilisateurService
          .changePassword(changePasswordData)
          .pipe(tap(() => this.loading = false))
          .subscribe(() => { });

3. As a last resource: Does it work if you do not use the pipe and change the boolean inside the subscription?

      this.utilisateurService
          .changePassword(changePasswordData)
          .subscribe(() => { this.loading = false; });

Even when I work in a project with Angular 8 Metronic, this issue would be Angular not changing the render when a prop changes, that is battle-tested.