12. input() — 親から値を受け取る

親コンポーネントから子へデータを渡すには、子側で input() を宣言します。task = input.required<string>() と書くと、親はテンプレートで [task]="値" の形で値を渡せます。受け取った値はシグナルなので、子のテンプレートでは task() と関数として読みます。

実務では「親がデータを持ち、子は受け取って表示する」という役割分担が基本です。required を付けた入力は渡し忘れるとコンパイルエラーになるため、必須のデータには必ず付けましょう。省略可能な入力には input('low') のようにデフォルト値を持たせます。

input() はシグナルベースの新しいAPIで、以前の @Input() デコレータを置き換えるものです。親が新しい値を渡せば子の表示も自動で更新されるので、子側で受け取り直す処理を書く必要はありません。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-task-item',
  // 受け取った値はシグナルなので task() と関数として読む
  template: '<li>{{ task() }} (優先度: {{ priority() }})</li>',
})
export class TaskItemComponent {
  // 親から必ず渡してもらう入力
  task = input.required<string>();
  // 省略可能な入力にはデフォルト値を持たせる
  priority = input('low');
}

// 親側のテンプレートでの使い方:
// <app-task-item [task]="taskName" priority="high" />

公式ドキュメントで詳しく ↗