Trigger custom event without eventEmitter in angular2

Your basic problem is that custom events don't bubble in Angular.

Since your menu looks like this:

<div>
   <ng-content></ng-content>
</div>
<sub-menu *ngFor="let subMenu of subMenus" [items]="subMenu.items"></sub-menu>

Any event triggered within sub-menu in the template above won't automatically be available outside outside of sub-menu.

So, if you want the customEvent from within your sub-menu template to be available outside of sub-menu, you have to manually propagate the event through. Something like:

<div>
   <ng-content></ng-content>
</div>
<div class="here">
  <sub-menu *ngFor="let item of items" label="item.label" (submenuCustomEvent)="menuCustomEvent.emit($event)"></sub-menu>
</div>

where submenuCustomEvent is an EventEmitter property of sub-menu and menuCustomEvent is an EventEmitter property of menu.

EDIT:

That means that your sub-menu has to look something like:

@Component({
  .....
  template: `   
    <menu-elem *ngFor="let item of items" 
         [label]="item.label"
         (customEvent)="submenuCustomEvent.emit($event)
    >
    </menu-elem>
   `
})
export class Submenu {
    .....
   @Output()
   submenuCustomEvent = new EventEmitter();
    ....
}

and your menu becomes:

@Component({
  .....
  template: `   
    <div>
      <ng-content></ng-content>
    </div>
    <sub-menu *ngFor="let subMenu of subMenus" 
       [items]="subMenu.items"
       (submenuCustomEvent)="menuCustomEvent.emit($event)"
    >
    </sub-menu>
   `
})
export class Menu {
    .....
   @Output()
   menuCustomEvent = new EventEmitter();
    ....
}  

So, the template that you're using your menu now looks like:

<menu (menuCustomEvent)="superCoolEvent($event)">
  <menu-elem label="Action 1" (customEvent)="superCoolEvent($event)"></menu-elem>
  <menu-elem label="Action 2" (customEvent)="superCoolEvent2($event)"></menu-elem>
  <menu-elem label="Action 3" (customEvent)="superCoolEvent3($event)"></menu-elem>
</menu>

Points to note:

• If you need to distinguish which menu-elem nested within sub-menu emitted the event, you might have to add some additional information to the event emitted by submenuCustomEvent.

• I named the event emitters for menu and sub-menu differently in my example to highlight the difference, but you can use the same event emitter name in your code (i.e. call all the nested event emitters onClick)

• A service might help in this scenario to avoid the manual wiring up of event emitters through the component hierarchy. Using a service, your top level component that's using menu can be directly notified if a menu-elem within sub-menu is clicked, without having the intermediate event propagation

• Finally, you are using a custom onClick event. But if you use the browser click event directly, you could avoid the manual propagation since browser click events DO propagate. However, you don't have control over the shape of the emitted event, so there is that limitation.

Your answer is as below

  <custom-component *ngFor="let item of items" label="item.label" (customEvent)="eventHandler($event)"></custom-component>

The corresponding code should be in component-x ts file

eventHandler(event){
   this.customEvent.emit(..)
}

This will trigger the customEvent() in your custom-component as in this line

<custom-component (customEvent)="reallyCoolEvent($event)"></custom-component>

So this method

reallyCoolEvent(event){
   ///here is your emitted object from component-x
}

I am not sure if I understood you fully. However, you can inject a reference of Parent component to child and use parent's eventemiiter.

 constructor(private myParent: Parent) {}

 go() {
    this.myParent.custometEvent.emit(data);
 }