[Fixed] Change and grey out button until Observable Broadcasts successfull

Issue

component.html

    <button mat-raised-button color="primary" type="submit">
        <mat-icon>account_box</mat-icon>
        <span *ngIf="!loading">&nbsp;&nbsp;&nbsp;Register</span>
        <span *ngIf="loading">&nbsp;&nbsp;&nbsp;Processing Request</span>
    </button>

component.ts

this.auth.register(this.registerUser).subscribe(
    (success) => {
      this.loading = true;
    },
    (err) => {
      this.success = false;
      this.warning = err.error.message;
      this.loading = false;
    },
    () => {
      this.success = true;
      this.warning = null;
      this.loading = false;          
    }
  );

I want to change the Register button to Processing request and grey it out until the observable finishes broadcasting.

Currently, nothing changes even when loading is false.

Solution

Try:

    <button [disabled]="loading" mat-raised-button color="primary" type="submit">
        <mat-icon>account_box</mat-icon>
        <span *ngIf="!loading">&nbsp;&nbsp;&nbsp;Register</span>
        <span *ngIf="loading">&nbsp;&nbsp;&nbsp;</span>
    </button>

and in code:

this.loading = true
this.auth.register(this.registerUser)
  .pipe(finalize(() => this.loading = false)
  .subscribe(
    (success) => {
      // ....
    }
  );