モデル入力

モデル入力 は、コンポーネントが新しい値を別のコンポーネントに伝播できるようにする、特殊な入力です。

HELPFUL: モデル入力は現在開発者プレビューです。

コンポーネントを作成するときは、普通の入力を作成する方法と同様に、モデル入力を定義できます。

      import {Component, model, input} from '@angular/core';
@Component({...})
export class CustomCheckbox {
  // これはモデル入力です。
  checked = model(false);
  // これは普通の入力です。
  disabled = input(false);
}

2種類の入力はどちらも、値をプロパティにバインドすることを可能にします。ただし、モデル入力を使用すると、コンポーネントの作者はプロパティに値を書き込むことができます。

その他の点では、モデル入力を普通の入力と同じように使用できます。 computed や effect などのリアクティブコンテキストを含め、シグナル関数を呼び出して値を読み取ることができます。

      import {Component, model, input} from '@angular/core';
@Component({
  selector: 'custom-checkbox',
  template: '<div (click)="toggle()"> ... </div>',
})
export class CustomCheckbox {
  checked = model(false);
  disabled = input(false);
  toggle() {
    // 普通の入力は読み取り専用ですが、モデル入力には直接書き込むことができます。
    this.checked.set(!this.checked());
  }
}

コンポーネントがモデル入力に新しい値を書き込むと、 Angularはその入力に値をバインドしているコンポーネントに新しい値を伝播できます。これは、値が双方向に流れるため、双方向バインディング と呼ばれます。

シグナルによる双方向バインディング

書き込み可能なシグナルをモデル入力にバインドできます。

      @Component({
  ...,
  // `checked` はモデル入力です。
  // 括弧内角括弧構文（別名「バナナインボックス」）は、双方向バインディングを作成します。
  template: '<custom-checkbox [(checked)]="isAdmin" />',
})
export class UserProfile {
  protected isAdmin = signal(false);
}

上記の例では、CustomCheckbox は checked モデル入力に値を書き込むことができ、その値は UserProfile の isAdmin シグナルに伝播されます。このバインディングにより、checked と isAdmin の値が同期されます。バインディングは isAdmin シグナル自体を渡し、シグナルの値は渡さないことに注意してください。

プレーンなプロパティによる双方向バインディング

プレーンなJavaScriptプロパティをモデル入力にバインドできます。

      @Component({
  ...,
  // `checked` はモデル入力です。
  // 括弧内角括弧構文（別名「バナナインボックス」）は、双方向バインディングを作成します。
  template: '<custom-checkbox [(checked)]="isAdmin" />',
})
export class UserProfile {
  protected isAdmin = false;
}

上記の例では、CustomCheckbox は checked モデル入力に値を書き込むことができ、その値は UserProfile の isAdmin プロパティに伝播されます。このバインディングにより、checked と isAdmin の値が同期されます。

暗黙的な `change` イベント

コンポーネントまたはディレクティブでモデル入力を宣言すると、 Angularはそのモデルに対応する出力を自動的に作成します。出力の名前は、モデル入力の名前の後に「Change」が付加されたものです。

      @Directive({...})
export class CustomCheckbox {
  // これは、自動的に「checkedChange」という名前の出力を作成します。
  // テンプレートで `(checkedChange)="handler()"` を使用して購読できます。
  checked = model(false);
}

set または update メソッドを呼び出してモデル入力に新しい値を書き込むたびに、 Angularはこの変更イベントを発行します。