title: Why is HTML not updating after HTTP get request executes?
body: <p>I have a search field that receives some value to search and populates an array. If the value the user provides is invalid a boolean is set to true, displaying an error message and the input's outline color changes to red.</p>
  
  <p>I have a function that receives the value provided and makes an <code>HTTP</code> get request. Inside the <code>.subscribe()</code> function I update the error message and change the input's outline color to red.</p>
  
  <p>I've searched for similar problems and found that most of the cases involved people not updating variables inside the subscription, however that is not the case with my code.</p>
  
  <p><strong>MyComponent.component.ts</strong></p>
  
  <pre><code>constructor(public rest: RestService) { }
  
  private onCreateNewRequest(value: any) {
    let message = "Required!";
    if (value === undefined || value === "" || value.length &lt; 0) {
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
      this.setNewRequestInputInvalid()
    } else {
      this.getOrderByNumber(this.setNewRequestInputInvalid, value);
    }
  }
  
  private getOrderByNumber(callback, value: string) {
    let message = "Invalid Order!";
    this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) =&gt; {
      if (Object.entries(orderNrData).length !== 0) {
        this.onCreateReturn(orderNrData);
      } else {
        callback();
        this.setErrorMessage(message);
        this.setIsFormInvalid(true);
      }
    }, error =&gt; {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
    });
  }
  
  private setErrorMessage(message: string) {
    this.errorMessage = message;
  }
  
  private setIsFormInvalid(status: boolean) {
    this.isFormInvalid = status;
  }
  
  private setNewRequestInputInvalid() {
    document.getElementById('new-request-input-id').style['border-color'] = 'red';
  }
  </code></pre>
  
  <p><strong>MyComponent.component.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-2 d-flex align-items-center"&gt;Order: &lt;/div&gt;
    &lt;div class="col-8"&gt;
      &lt;input class="form-control align-middle new-request-input-class" id="new-request-input-id" type="text" placeholder="Ex: EU030327" aria-label="Search" (input)="resetValidator()" (keyup.enter)="onCreateNewRequest(searchInput.value)" #searchInput&gt;
    &lt;/div&gt;
    &lt;div class="col-2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-2"&gt;&lt;/div&gt;
    &lt;div class="col-8 error-label-col" id="error-label-id" *ngIf="isFormInvalid"&gt;
      &lt;small&gt;{{getErrorMessage()}}&lt;/small&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Rest.service.ts</strong></p>
  
  <pre><code>private extractData(res: Response) {
    let body = res;
    return body || {};
  }
  
  getOrderByNumber(order_nr): Observable&lt;any&gt; {
    return this.http.get(endpoint + 'orders/number/' + order_nr, httpOptions).pipe(
              map(this.extractData));
  } 
  </code></pre>
  
  <p>My code successfully changes the input's outline color to red but somehow fails to change <code>isFormInvalid</code> to true. Because of this, the <code>*ngIf</code> won't trigger and the message is never shown to the user.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>If I use <code>ChangeDetectorRef</code> after I change <code>isFormInvalid</code> everything works as expected...</p>
  
  <pre><code>constructor(private ref: ChangeDetectorRef) { }
  
  private getOrderByNumber(callback, value: string) {
    let message = "Invalid Order!";
    this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) =&gt; {
      if (Object.entries(orderNrData).length !== 0) {
        this.onCreateReturn(orderNrData);
      } else {
        callback();
        this.setErrorMessage(message);
        this.setIsFormInvalid(true);
        this.ref.detectChanges(); // here
      }
    }, error =&gt; {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
      this.ref.detectChanges(); // here
    });
  }
  </code></pre>
  
  <p>Why is Angular only detecting these changes if I force it to detect them? Also, is this a good practice?</p>