Output

Similar to the concept of Input, but the other way around.

In the following example, the App component passes down a function, which is then used in the child to increment a value.

Child:

import {Component, Output, EventEmitter} from '@angular/core';
 
@Component({
  selector: 'app-child',
  styles: `.btn { padding: 5px; }`,
  template: `
    <button class="btn" (click)="addItem()">Add Item</button>
  `,
  standalone: true,
})
export class ChildComponent {
  @Output() addItemEvent = new EventEmitter<string>();
 
  addItem() {
    this.addItemEvent.emit('🐢');
  }
}

App component:

import {Component} from '@angular/core';
import {ChildComponent} from './child.component';
 
@Component({
  selector: 'app-root',
  template: `
    <app-child (addItemEvent)="addItem($event)" />
    <p>🐢 all the way down {{ items.length }}</p>
  `,
  standalone: true,
  imports: [ChildComponent],
})
export class AppComponent {
  items = new Array();
 
  addItem(item: string) {
    this.items.push(item);
  }
}