[Fixed] Angular 2 How to Bubble Custom Events


Parent template:

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

Tree item template:

    <span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Child</span>
  <ul *ngFor="let m of model.children">
    <tree-item [model]="m"></tree-item>

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.


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

Leave a Reply

(*) Required, Your email will not be published