Angular2 emit event up to the DOM tree

Question

I have 3 Components to manage a tree: Panel, Tree and Node.

Panel contains a Tree

@Component({
  selector: 'panel',
  template: `
    <input type="button" (click)="createNode()" value="new node">
    <input type="button" (click)="createChild()" value="new child">
    <input type="button" (click)="deleteNode()" value="delete node">
    <tree [tree]="myTree"></tree>
    Selected node: {{selectedNode | json}}
  `,
  directives: [Tree]
})
export class Panel {
  public selectedNode;
  constructor() {}
}

Tree contains one or more Nodes (root nodes)

@Component({
  selector: 'tree',
  template: `<node *ngFor="#n of tree" [node]="n"></node>`,
  directives: [Node]
})
export class Tree {
  @Input() tree;
  constructor() {}
}

and one Node in turn could contain one or more Nodes (child nodes)

@Component({
  selector: 'node',
  providers: [],
  template: `
    <p (click)="onSelect(node)">{{node.name}}</p>
    <div class="subTree">
      <node *ngFor="#n of node.children" [node]="n"></node>
    </div>
  `,
  directives: [Node]
})
export class Node {
  @Input() node;
  constructor() {}

  onSelect(node) {
    console.log("Selected node: " + node.name);
  }
}

Panel is a Component that allows to edit the Tree by adding and removing Node to the Tree. What I'm trying to do is update a variable "selectedNode" inside Panel every time I click on a Node in the Tree.

The handler of the click event is inside the Node component, here I would like to inform the Panel that a Node is clicked and then update the above variable.

Here is a simplified Plunkr of what I've done so far

I investigated on several possible solutions without finding anything that fits my needs. I know @Output-EventEmitter mechanism allows to send an event to the parent component, but in my case the parent of the Node is the Tree (in case of root nodes) or another Node (child nodes).

In AngularJS I used $emit to send an event when a Node was clicked and $on to catch it in Panel and update the selectedNode variable. In Angular2 the $emit $broadcast $on event mechanism is no more available. How can I reach my goal? Any suggestion, even not event-based, is appreciated.

score 3 · Accepted Answer · edited May 23 '17 at 12:02

3

Events fired by EventEmitter don't bubble at all. A workaround is to use an EventBus service instead.

See also Global Events in Angular 2 and Delegation: EventEmitter or Observable in Angular2

edited May 23 '17 at 12:02

Community

1
1

answered Jan 18 '16 at 16:16

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Jan 18 '16 at 23:58

I have created a general pub-sub sample here that you can look at as well.

The idea is to use Subjects from RxJs. Subjects can be used as both Observer and Observable. This allows me to both emit and subscribe to values via the same service.

import {Subject } from 'rxjs/Subject';
import {Customer} from './customer';
export class CustomerEventEmitter extends Subject<Customer>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

//Consume
this.service.Stream.subscribe(...);

//Produce
this.service.Stream.emit(customer);

Here is a demo of it in action: http://www.syntaxsuccess.com/angular-2-samples/#/demo/pub-sub

Full article:

http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0

Angular2 emit event up to the DOM tree

2 Answers2

Linked