title: Angular 2 listen on model change
body: <p>How can I listen for changes on ngModel ?
  The problem: is that if i link (change) or (click) event to the element, in the given function when I access the model, its still not changed. If I add setTimeout of 500ms than I can the changed model. Any idea how can I get the real changed object without setTimeout which is very bad way ?
  Code in the html:</p>
  
  <pre><code>&lt;input type="checkbox" (click)="autoJoinToggle()" [(ngModel)]='active.bookmark.autoJoin'&gt; Autojoin
  </code></pre>
  
  <p>Code in the component:</p>
  
  <pre><code> console.log(this.active.bookmark.autoJoin) // returns the current value (before the change)
   setTimeout(() =&gt; {console.log(this.active.bookmark.autoJoin);}, 500); //returns the value after the change
  </code></pre>
  
  <p>I cannot do this with Angular Control because I need the model binded and the "active" object does not exist in first place, and if I want to update the value of the control after "active" is defined, I need to listen on changes on the "active" object (which changes overtime). The same problem is with local variable and @ViewChild -> I still need to know when "active" changes so I update the local variable too.</p>
  
  <p>Here is a gif as well:
  <a href="https://i.stack.imgur.com/QYCsL.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/QYCsL.gif" alt="enter image description here"></a></p>