14. model() — 親と子で値を双方向に同期する

親から受け取った値を子側からも書き換えたいときは、model() を使います。value = model(0) と宣言すると、子は value() で読み、value.set() や value.update() で書き換えられます。親はテンプレートで [(value)]="score" と書くだけで、どちらの変更ももう一方へ自動で反映されます。

実務での典型例は、評価の星、数量の増減ボタン、開閉式パネルのように「子の中で操作が完結するが、最新の値は親も知りたい」部品です。inputで受け取りoutputで返す2つの宣言が、model() ひとつにまとまります。

便利な反面、双方向の同期は多用するとデータの流れが追いにくくなります。基本は input() と output() の一方向で設計し、フォーム部品のような値の編集が主役の部品に限って model() を使うのがバランスのよい方針です。

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

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

@Component({
  selector: 'app-rating',
  template:
    '<button (click)="addStar()">★を増やす</button>' +
    '<span>現在: {{ value() }}</span>',
})
export class RatingComponent {
  // 読み書き両方できる入力。親と双方向に同期する
  value = model(0);

  addStar() {
    this.value.update((v) => v + 1); // 親側の値も一緒に更新される
  }
}

// 親側は [( )] で双方向バインディングする:
// <app-rating [(value)]="score" />

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