I have created the following code to loop through components and display their children:
parent.component.ts
tree = [
{
id: 1,
name: 'test 1'
}, {
id: 2,
name: 'test 2',
children: [
{
id: 3,
name: 'test 3'
}
]
}
]
nodeClicked(event) {
console.log(event);
}
parent.component.html
<app-child [tree]="tree" (nodeEmitter)="nodeClicked($event)"></app-child>
child.component.ts
@Input() tree;
@Output() nodeEmitter = new EventEmitter();
clickToEmit() {
this.nodeEmitter.emit(1);
}
child.component.html
<ul>
<li *ngFor="let node of tree">{{ node.name }}</li>
<button (click)="clickToEmit()">Click Me!!!</button>
<app-child [tree]="node.children" (nodeEmitter)="nodeClicked($event)"></app-child>
</ul>
However, I am encountering an issue:
I can receive the emitted event in parent.component.html, but
I am unable to receive the emitted event from child.component.html back to
parent.component.html.
An error is appearing indicating that nodeClicked is not defined in child.component.ts.
Can anyone point out what mistake I might be making here? I have spent several hours trying to resolve this problem.
Thank you for any assistance provided. :-)