How to watch component binding change using Angular component

Question

How can I listen to angular component binding change and perform actions?

angular.module(\'myapp\')
    .component(\'myComponent\', {
        templateUrl: \'         


        

Answer 1

You can add the $onChanges method to the controller

$onChanges(changesObj) is called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form.

Following example handles canChange change event.

angular.module('app.components', [])
.component('changeHandler', {
  controller: function ChangeHandlerController() {
    this.$onChanges = function (changes) {
      if (changes.canChange) 
       this.performActionWithValueOf(changes.canChange);
    };
  },
  bindings: {
    canChange: '<'
  },
  templateUrl: 'change-handler.html'
});

Requires AngularJS >= 1.5.3 and works only with one-way data-binding (as in the example above).

Docs: https://docs.angularjs.org/guide/component

Reference: http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html