To showcase the code snippets below:
var app = angular.module('app', [])
// navigation template
app.component('onChanges', {
bindings: {
name: '<'
},
template: '<h1>{{$ctrl.greeting}}</h1><br><h2>{{origin}}</h2> ',
controller: function($scope) {
$scope.origin = 'international';
this.$onChanges = function(obj) {
if (obj.name && this.name) {
var prefix;
(obj.name.currentValue.toLowerCase() === 'thomas') ?
prefix = 'Howdy ': prefix = 'Hello ';
this.greeting = prefix + this.name;
(prefix === 'Hello ' || !prefix) ? $scope.origin = 'american': $scope.origin = 'australian';
}
// if the name is undefined clear greeting
if (!this.name) {
this.greeting = ''
}
};
$scope.$watch('$scope.origin', function() {
console.log("I am here");
})
}
});
Adjusted Post: I have implemented $scope.$watch to monitor changes in $scope.origin. Can you spot any errors in my approach? Feel free to check out the Plunker link provided: https://plnkr.co/edit/DDZeTHQIji4FJnyhpQAJ?p=preview
New Version: My dilemma resembles a common challenge faced by users of Angular 1.5 or 1.6 components. Interestingly, I haven't stumbled upon a Stack Overflow query addressing this issue.
In this scenario, $ctrl.origin does not receive data from the parent component, unlike $ctrl.name which is passed from the parent to the child component.
Based on my understanding: The $onChanges function can exclusively monitor $ctrl.name - data inflowing into the component from an external source such as the parent component.
My inquiry: How can I track changes in local data of a component like $ctrl.origin - data not transmitted from a parent component? It would be beneficial to provide an example.
We appreciate your insights on the best practices for achieving this task.
Access our Plunker demonstration via this link: https://plnkr.co/edit/DDZeTHQIji4FJnyhpQAJ?p=info