Input dan Output adalah cara komponen berkomunikasi di Angular.

@Input() — Data dari Parent ke Child

// child.component.ts
@Component({
  selector: "app-card",
  template: `<h2>{{ title }}</h2>`,
})
export class CardComponent {
  @Input() title = ""
}

// parent template
// <app-card [title]="'Judul Card'" />

@Output() — Event dari Child ke Parent

// child.component.ts
export class ButtonComponent {
  @Output() clicked = new EventEmitter<string>()

  onClick() {
    this.clicked.emit("Halo dari child!")
  }
}

// parent template
// <app-button (clicked)="handleClick($event)" />