@output

@Input.md is a way to pass something from parent to child, and then @output.md is a way pass something from child to parent.

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);
  }
}
 

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('🐢')
  }
}