I’m using Angular 17 and I have a noob question. In my component’s template, the table’s footer has a couple of buttons and a spinner, which has visibility: hidden at the beginning:

    <ng-container matColumnDef="created_on">
      <th mat-header-cell *matHeaderCellDef>Created On</th>
      <td mat-cell *matCellDef="let row">{{row.created_on}}</td>
      <td mat-footer-cell ...>
        <div class="tfooter">
          <mat-paginator
            ...
          >
          </mat-paginator>
          <div class="btn-actions">
            <mat-spinner
              diameter="35"
              strokeWidth="4"
              [style.visibility]="isDeleting ? 'show' : 'hidden'"
            >
            </mat-spinner>
            <button
              ...
            >
              Switch DB
            </button>
            <button
              mat-flat-button
              color="warn"
              (click)="doStuff()"
            >
              Do Stuff
            </button>
          </div>
        </div>
      </td>
    </ng-container>

Here is the component:

@Component({
  selector: 'app-change-db',
  templateUrl: './change-db.component.html',
  styleUrl: './change-db.component.css'
})
export class ChangeDbComponent implements OnInit, AfterViewInit {
  ...
  isDeleting: boolean = false

  ...
doStuff() {
    this.isDeleting = true

    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '250px',
      data: { db: this.getSelectedDb(), answer: false }
    });

    // if the user clicks away from dialog, result will be undefined
    dialogRef.afterClosed().subscribe((result: DialogData) => {
     if (result?.answer) {
       this.isDeleting = true
       this.mysqlService.dropDb({
         dbname: result.db
       }).subscribe({
         next: () => {
           ...
           this.isDeleting = false
           this.loadData()
         },
         error: (err: Error) => {
           ...
           this.isDeleting = false
         }
       })
     }
    });
  }
}

As you can see the component has a method dropDb() which (now just for testing purposes) immediately change isDeleting to true. However, the property seems to be not detected by Angular change detection system, as the UI doesn’t show the spinner.
Could you give some hints about what I’m doing wrong? Thanks