title: how to force change detection in angular 2+
body: <p>I have a component as follows:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'app',
      moduleId: module.id,
      template: `
          &lt;input [value]="a" (change)="onValidateOfA($event)" /&gt;
  `,
  
  })
  export class AppComponent implements OnInit {
  
      a: number = 10;
  
      constructor() { }
  
      ngOnInit() {
      }
  
      onValidateOfA(e: any) {
          let t = e.target.value * 1;
          if (t &lt; 10) {
              t = this.a;
          }
          this.a = t;
      }
  }
  </code></pre>
  
  <p>The logic is simple.  I would like to switch to previous value in the textbox when the user types any value less than 10.  The value gets changed in variable "a", but not getting reflected in textbox (using property binding).  The value in textbox does not always represent the same value in 'a' (or how to force as such in this case).</p>
  
  <p>I am kind of learning detection changes in Angular and would like to resolve the problem using that rather than trying to solve the problem in a very different approach.</p>
  
  <p>I tried to follow everything mentioned at following:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2">How to force a component&#39;s re-rendering in Angular 2?</a></li>
  <li><a href="https://stackoverflow.com/questions/42982784/understanding-change-detection-in-angular-2">Understanding change detection in angular 2</a></li>
  </ul>
  
  <p>But with no luck or I am missing something (no error, just simply the same problem). </p>