Mmmm output...

Mmmm output…

Getting stuff out of nested components

Components emit event other components can subscribe to.

Data to cross boundaries is included as a param to the Event.

The event can be declared in the Class

import { EventEmitter, Output, Component /*..plus others..*/ } from '@angular/core';
// ...
@Component({
  // Note: The `events` is depreciated in rc-1 so *don't use it*. See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
  // events: ['selection']
})
export class NestedComponent{
  // ...
  @Output() onSelection: EventEmitter = new EventEmitter();
  // ...
  methodThatWillFireTheEvent(event) {
    console.log(event);
    this.onSelection.next({'selectionId': 1});
  }
}

Then call a different function on the container

<nested-component (onSelection)="parentMethod($event)"></nested-component>