Table of Contents
Outputs provide a mechanism for a child component to emit events up to its parent component.
This post covers Angular 2 and up
In the parent component's template, define event bindings as part of the child component's selector. A binding should point to a method defined in the parent component's class that takes action on the data received from the child. <^>$event<^> contains the payload emitted from the child:
[label Parent component template: story.component.html]
<selected-story (selectStory)="getStory($event)">
</selected-story>
[label Parent component class: story.component.ts]
export class StoryComponent {
story: string = '';
In the child component, import <^>Output<^> and <^>EventEmitter<^> from <^>@angular/code<^> and define your outputs with the <^>@Output<^> decorator like this:
[label Child component class: selected-story.component.ts]
import { Component, Output, EventEmitter } from '@angular/core';
//...
export class SelectedStoryComponent {
story: string;
@Output() selectStory = new EventEmitter<string>();
Our <^>EventEmitter<^> object has an <^>emit()<^> method that pushes the event up to the parent component.
Now in the child component's template, you can define event bindings that will emit back up to the parent:
[label Child component template: selected-story.component.html]
<input #storyChoice placeholder="Your fav story">
<button (click)="onSelectStory(storyChoice.value)">
