Input and Output - Communication Between Components

Components communicate like samurai - passing orders down (@Input) and reports up (@Output).

@Input - Receiving Data (Orders from the Shogun)

1// child.component.ts
2import { Component, Input } from '@angular/core';
3
4@Component({
5  selector: 'app-samurai-card',
6  standalone: true,
7  template: \`
8    <div class="card">
9      <h3>{{ name }}</h3>
10      <p>Level: {{ level }}</p>
11    </div>
12  \`
13})
14export class SamuraiCardComponent {
15  @Input() name = '';
16  @Input() level = 1;
17  @Input({ required: true }) clan!: string;  // Required input
18}

Usage in the parent:

1<app-samurai-card
2  [name]="'Musashi'"
3  [level]="10"
4  [clan]="'Niten'">
5</app-samurai-card>

@Output - Sending Events (Report to the Shogun)

1// child.component.ts
2import { Component, Output, EventEmitter } from '@angular/core';
3
4@Component({
5  selector: 'app-attack-button',
6  standalone: true,
7  template: \`
8    <button (click)="onAttack()">⚔️ Attack!</button>
9  \`
10})
11export class AttackButtonComponent {
12  @Output() attacked = new EventEmitter<number>();
13
14  onAttack(): void {
15    const damage = Math.floor(Math.random() * 100);
16    this.attacked.emit(damage);
17  }
18}

Usage in the parent:

1<app-attack-button (attacked)="handleAttack($event)"></app-attack-button>
2<p>Last damage: {{ lastDamage }}</p>

1// parent.component.ts
2export class BattleComponent {
3  lastDamage = 0;
4
5  handleAttack(damage: number): void {
6    this.lastDamage = damage;
7    console.log(\`Dealt \${damage} damage!\`);
8  }
9}

Complete Example

1// Samurai list with selection capability
2
3@Component({
4  selector: 'app-samurai-list',
5  standalone: true,
6  imports: [SamuraiCardComponent],
7  template: \`
8    @for (samurai of samuraiList; track samurai.id) {
9      <app-samurai-card
10        [name]="samurai.name"
11        [level]="samurai.level"
12        [clan]="samurai.clan"
13        (selected)="onSelect($event)">
14      </app-samurai-card>
15    }
16
17    @if (selectedSamurai) {
18      <p>Selected: {{ selectedSamurai.name }}</p>
19    }
20  \`
21})
22export class SamuraiListComponent {
23  samuraiList = [
24    { id: 1, name: 'Musashi', level: 10, clan: 'Niten' },
25    { id: 2, name: 'Kojiro', level: 9, clan: 'Ganryū' }
26  ];
27
28  selectedSamurai: any = null;
29
30  onSelect(samurai: any): void {
31    this.selectedSamurai = samurai;
32  }
33}