What is running out of the ngZone in that case

Ionic Framework Ionic Angular
1

Hi all.

I’m having that piece of code outside the in html

<div class="diagnositcs-overlay ion-padding" [hidden]="hideDiagnosticsOverlay">
  <h3>Performing some diagnostics</h3>
  <br>
  <!-- Critical errors -->
  <div class="error" *ngIf="diagnostics.countErrors()[0] > 0">
    <p *ngFor="let message of diagnosticsErrorMessages">
      <ion-icon name="alert"></ion-icon> {{message.text}}
    </p>
  </div>
  <!-- Info errors (Show only if there are not any critical errors)  -->
  <div class="info" *ngIf="diagnostics.countErrors()[0] === 0 && diagnostics.countErrors()[1] > 0">
    <p *ngFor="let message of diagnosticsErrorMessages">
      <ion-icon name="information-circle"></ion-icon> {{message.text}}
    </p>
  </div>
  <!-- Waiting spinner -->
  <span *ngIf="showWaitingSpinner">
    Please wait a few seconds <ion-spinner name="dots"></ion-spinner>
  </span>
  
</div>

The thing is that in order for all these to be shown I have to run the following within the ngZone.

  this.zone.run( () => {this.hideDiagnosticsOverlay = false; this.showWaitingSpinner = true });

Why is this is happening? Since these variables are live within the angular component why I have to update them within ngZone?