I am looking for a way to track changes in an element that is bound to my component. This element's value might change due to asynchronous calls, such as promises. In JavaScript, I typically use $scope.$watch to monitor the changes in the binding element and execute a callback function when it changes so I can work with the updated value.
Here's an example in JS:
$scope.$watch('myCtrl.myLayout', function (newVal, oldVal) {
console.log('Layout is:');
console.log(_this.myLayout);
});
angular.module('blocks.ui')
.component('myForm', {
templateUrl: 'app/blocks/UI/form.html',
controller: myForm,
controllerAs: 'myCtrl',
bindings: {
myLayout: '='
}
});
My question is, how can I achieve the same functionality using "clean" TypeScript syntax? I am aware that I can inject $scope and implement $scope.$watch in TypeScript in the same manner.
Thank you.