Issue
Parent template:
<ul>
<tree-item [model]="tree" (addChild)="addChild($event)"></tree-item>
</ul>
Tree item template:
<li>
<div>{{model.name}}
<span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
</div>
<ul *ngFor="let m of model.children">
<tree-item [model]="m"></tree-item>
</ul>
</li>
For above example, parent receives addChild event only from the root tree-item (immediate child). Is it possible to bubble up addChild event from any tree-item?
I am using angular 2.0.0-rc.0.
Solution
Events from EventEmitter
don’t support bubbling.
You can either use element.dispatchEvent()
to fire a DOM event that bubbles, or use a shared service like a message bus.
See also https://angular.io/docs/ts/latest/cookbook/component-communication.html