Detect change to ngModel on a select tag Angular 2

Question

I am attempting to detect a change on ngModel in a  lt select gt  tag  In Angular 1 x  we might solve this with a  watch on ngModel  or by using ngChange  but I ve yet to understand how to detect a change to ngModel in Angular 2   Full Example  http   plnkr co edit 9c9oKH1tjDDb67zdKmr9 p info  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            As we can see  if we select a different value from the dropdown  our ngModel changes  and the interpolated expression in the view reflects this   How do I get notified of this change in my class controller

User · Answer

I have stumbled across this question and I will submit my answer that I used and worked pretty well. I had a search box that filtered and array of objects and on my search box I used the (ngModelChange)="onChange($event)"

in my .html

<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search">

then in my component.ts

reSearch(newValue: string) {
    //this.searchText would equal the new value
    //handle my filtering with the new value
}

User · Answer

Update   Separate the event and property bindings    lt select  ngModel   selectedItem   ngModelChange   onChange  event   gt      onChange newValue        console log newValue       this selectedItem   newValue      don t forget to update the model here            do other stuff here         You could also use    lt select   ngModel    selectedItem   ngModelChange   onChange  event   gt    and then you wouldn t have to update the model in the event handler  but I believe this causes two events to fire  so it is probably less efficient     Old answer  before they fixed a bug in beta 1   Create a local template variable and attach a  change  event    lt select   ngModel    selectedItem   item  change   onChange item value   gt    plunker  See also How can I get new selection in  quot select quot  in Angular 2

[javascript] Detect change to ngModel on a select tag (Angular 2)

Examples related to javascript

Examples related to angular