title: Angular 8 value won't update on view after change
body: <p>I have a small component in Angular with a method that (for now) sets a timeout and changes the value of a variable.</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, ChangeDetectionStrategy } from '@angular/core';
  
  @Component({
    selector: 'my-component',
    templateUrl: './my-view.html',
    styleUrls: ['./my-view.scss'],
    changeDetection: ChangeDetectionStrategy.Default
  })
  export class MyComponent {
  
    status: boolean = false;
  
    changeStatus(): void {
  
      setTimeout(() =&gt; {
        this.status = true;
      }, 1500);
    }
  }
  </code></pre>
  
  <p><strong>And the HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;form #myForm="ngForm"&gt;
      &lt;input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="Enter your code" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-md-5" (click)="changeStatus()"&gt;
      &lt;mat-icon aria-label="clear-all" *ngIf="!status"&gt;&amp;#xe042;&lt;/mat-icon&gt;
      &lt;a&gt;Change status&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col-md-7"&gt;
      &lt;button type="button" class="btn-flat app-btn-flat"&gt;Cancel&lt;/button&gt;
      &lt;button type="button" class="btn app-btn" [disabled]="myForm.invalid || myForm.pristine"&gt;Save&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I log the value of 'status' in the component. I get the new value of 'true' but it won't change on the view unless I focus the cursor on the input and then click anywhere outside it.</p>
  
  <p>Why is that happening? how can I solve it?</p>