How to call function each time model changes in angular 2?

If you select custom component internally uses form input(s), I would leverage the ngModelChange event on it / them:

<select [ngModel]="..." (ngModelChange)="triggerUpdate($event)">…</select>

or the valueChanges observable of corresponding controls if any. In the template:

<select [ngFormControl]="myForm.controls.selectCtrl">…</select>

In the component:

myForm.controls.selectCtrl.valueChanges.subscribe(newValue => {
  (...)
});

So my question is if there's something similar to $scope.$watch where I can watch if the value of input property model changes

If model is a JavaScript primitive type (Number, String, Boolean), then you can implement ngOnChanges() to be notified of changes. See cookbook example and lifecycle doc, OnChanges section.
Another option is to use a setter and a getter. See cookbook example.

If model is a JavaScript reference type (Array, Object, Date, etc.), then how you detect changes depends on how the model changes:

  • If the model reference changes (i.e., you assign a new array, or a new object, etc.), you can implement ngOnChanges() to be notified of changes, just like for primitive types.
  • However, if the model reference doesn't change, but some property of the model changes (e.g., the value of an array item changes, or an array item is added or removed, or if an object property value changes), you can implement ngDoCheck() to implement your own change detection logic.
    See lifecycle doc, DoCheck section.

Tags:

Angular