How to wait for binding in Angular 1.5 component (without $scope.$watch)

I had a similar issue, I did this to avoid calling the component until the value I am going to send is ready:

<form-selector ng-if="asyncValue" forms="asyncValue" ></form-selector>

javascript angularjs components

You could use the new lifecycle hooks, specifically $onChanges, to detect the first change of a binding by calling the isFirstChange method. Read more about this here.

Here's an example:

<div ng-app="app" ng-controller="MyCtrl as $ctrl">  <my-component binding="$ctrl.binding"></my-component></div><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script><script>  angular    .module('app', [])    .controller('MyCtrl', function($timeout) {      $timeout(() => {        this.binding = 'first value';      }, 750);      $timeout(() => {        this.binding = 'second value';      }, 1500);    })    .component('myComponent', {      bindings: {        binding: '<'      },      controller: function() {        // Use es6 destructuring to extract exactly what we need        this.$onChanges = function({binding}) {          if (angular.isDefined(binding)) {            console.log({              currentValue: binding.currentValue,               isFirstChange: binding.isFirstChange()            });          }        }      }    });</script>

Expand snippet