How to bubble angular2 custom event

Question

Parent template:

<ul> <tree-item [model]="tree" (addChild)="addChild($event)"></tree-item> </ul> 

Tree Element 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> 

In the above example, the parent receives the addChild event only from the root tree of the element (the immediate child). Is it possible to bubble the addChild event from any tree? I am using angular 2.0.0-rc.0.

Answer 1

Events from EventEmitter do not support bubbling.

You can use element.dispatchEvent() to fire a DOM event that is bubbling, or use a generic service such as a message bus.

See also https://angular.io/docs/ts/latest/cookbook/component-communication.html