title: How do I detect change to ngModel on a select tag (Angular 2)?
body: <p>I am attempting to detect a change on <code>ngModel</code> in a <code>&lt;select&gt;</code> tag. In Angular 1.x, we might solve this with a <code>$watch</code> on <code>ngModel</code>, or by using <code>ngChange</code>, but I've yet to understand how to detect a change to <code>ngModel</code> in Angular 2.</p>
  
  <p><strong>Full Example</strong>: <a href="http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info" rel="noreferrer">http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info</a></p>
  
  <pre><code>import {Component, View, Input, } from 'angular2/core';
  import {FORM_DIRECTIVES} from 'angular2/common';
  
  @Component({
      selector: 'my-dropdown'
  })
  @View({
      directives: [FORM_DIRECTIVES],
      template: `
          &lt;select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" &gt;
              &lt;option *ngFor="#option of options"&gt;{{option}}&lt;/option&gt;
          &lt;/select&gt;
          {{selection}}
      `
  })
  export class MyDropdown {
      @Input() options;
  
      selection = 'Dog';
  
      ngOnInit() {
          console.log('These were the options passed in: ' + this.options);
    }
  
    onChange(event) {
      if (this.selection === event) return;
      this.selection = event;
      console.log(this.selection);
    }
  
  }
  </code></pre>
  
  <p>As we can see, if we select a different value from the dropdown, our <code>ngModel</code> changes, and the interpolated expression in the view reflects this.</p>
  
  <p>How do I get notified of this change in my class/controller?</p>