@Inputおよび@Outputはどのようにコンポーネント通信を実現しますか？

// child: UserCardComponent
import { Component, Input } from "@angular/core";

@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
  @Input() user!: User;        // receives data from the parent
  @Input() showEmail = false;  // with a default
}

<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>

// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-user-card",
  template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
  @Output() deleted = new EventEmitter<number>(); // declares an output event

  onDelete() {
    this.deleted.emit(this.user.id); // emit with a payload
  }
}

<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>

Parent ──[user]──────────────→ Child   (@Input: data down)
Parent ←──(deleted)=removeUser─ Child   (@Output: events up)

name = input<string>();          // signal-based @Input (newer Angular)
deleted = output<number>();      // signal-based @Output