Output

• Exposes an EventEmitter property that emits events to the parent component
• Defined inside a component via the @Output decorator: @Output() someValue = new EventEmitter();
• Bind in parent template: <cmp (someValue)="handleValue()"></cmp>

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-component',
  template:
  `<button (click)="greet()">Greet Me</button>`
})
export class MyComponent {
  
  @Output() greeter = new EventEmitter();

  greet() {
    this.greeter.emit('Child greeting emitted!');
  }
}

And in the parent component, we can access the value as:

@Component({
  selector: 'app',
  template:
  `
  <div>
  <h1>{{greeting}}</h1>
  <my-component (greeter)="greet($event)"></my-component>
  </div>
  `
})
export class App {

  private greeting;

  greet(event) {
    this.greeting = event;
  }
}

---

Backlinks

• Component Driven Architecture