Trouble understanding Angular components - angularjs

Question

I am trying to learn about Angular components but am having trouble getting them to work in a nested component configuration. Basically what I want to do is to have a parent component that periodically updates a value. I then want the inner child component to bind to the value in the parent and trigger a call to $onChanges when the value changes.
I made a jsFiddle demonstrating what I'm trying to accomplish. The parent component seems to be working and displaying the updated value, but for some reason the child component doesn't render at all. Here is the code I am using to accomplish this:
let app = angular.module('app', []);
class ParentController {
constructor($interval) {
this.value = 0;
$interval(() => this.value++, 1000);
}
}
let ParentComponent = {
controller: ParentController,
template: `<div>parent value: {{$ctrl.value}}</div>`
};
app.component('parent', ParentComponent);
class ChildController {
$onChanges(changesObj) {
console.log(changesObj);
}
}
let ChildComponent = {
bindings: {
value: '='
},
controller: ChildController,
require: {
parent: '^^parent'
},
template: `<div>child value: {{$ctrl.value}}</div>`
};
app.component('child', ChildComponent);
And the HTML:
<div ng-app="app">
<parent>
<child value="$ctrl.parent.value"></child>
</parent>
</div>
Am I doing something wrong or is what I'm trying to accomplish not possible?

Answer 1

The thing about components is that anything inside of them typically gets replaced unless you use the 'ng-transclude' directive.
To get your child element to appear, you need the following changes:
let ParentComponent = {
controller: ParentController,
transclude: true,
template: `<div>parent value: {{$ctrl.value}}</div><div ng-transclude></div>`
};
To clarify, you add transclude: true to the component object as well as an element with the ng-transclude directive within the template. Whatever element has the ng-transclude directive will have its contents replaced with whatever is in the <parent> tag.
This will only get your child component to render, you still have another error in your HTML being that you're trying to use
<child value="$ctrl.parent.value"></child>
Which, in the JavaScript, is equivalent to $scope.$ctrl.parent.value which is undefined.
Just change your HTML to:
<div ng-app="app">
<parent>
<child></child>
</parent>
</div>
And the child component to:
let ChildComponent = {
controller: ChildController,
require: {
parent: '^^parent'
},
template: `<div>child value: {{$ctrl.parent.value}}</div>`
};
And then you're all good!
EDIT (from comment):
In order to trigger a update call whenever the parent value changes, you would need to replace your ChildController with the following:
let ChildController = function (scope) {
scope.$watch('$ctrl.parent.value', function (newValue, oldValue) {
console.log(newValue);
});
};
This adds a watch on the child controller that will call the function each time the parent.value changes.

Answer 2

i have made som modifications to your code.
there is a different way of achieving what you want to do.
here is my code I will try to explain how it should be done.
let app = angular.module('app', []);
class ParentController {
constructor($interval) {
this.value = 0;
$interval(() => this.value++, 1000);
}
}
let ParentComponent = {
controller: ParentController,
//here is the important edit. loading child component inside the parent component
template: `<div>
parent value: {{$ctrl.value}}
<child value="$ctrl.value"></child>
</div>`
};
app.component('parent', ParentComponent);
class ChildController {
$onChanges(changesObj) {
if(changesObj.hasOwnProperty('value')){
this.value=changesObj.value.currentValue //this referes to current scope.
}
}
}
let ChildComponent = {
bindings: {
value: '<'
},
controller: ChildController,
require: {
//parent: '^^parent' no need for this. we will use $onChanges
},
template: `<div>child value: {{$ctrl.value}}</div>`
};
app.component('child', ChildComponent);
<div ng-app="app"><parent></parent></div>
things I have done in this code sample :
I have included component inside the parent component template
because what you want to do is load child inside parent. so added child inside the parent template.
Removed Require in child component definition because it would make your child component dependent on the parent component. there is a different use case where you must use the parent. it's best you use bindings and $onChanges to update data in a child from a parent,
added some validations to the $onChanges data.
if(changesObj.hasOwnProperty('value')){
this.value=changesObj.value.currentValue
}
you need to understand that the change obj is a simple change Object. it has multiple properties like is first change(), current value, OldValue etc.
you must always validate what you want from here.
also i am setting it to this.value which is the current scope.
we are not directly using the parent scope or binding scope variable. i am creating a new scope object which you will use to display the data. it will be populated by the binding object.
overall this is happening
1.parent interval updates parents scope
2.this.value is passed to child as Bindings
3.$onChanges validates bindings and assigns it to local scope this.value
4.child template renders this.value in the UI