0Pricing
Angular Academy · レッスン

カスタム双方向バインド可能プロパティ

独自の双方向バインド可能な入力を公開します。

「カスタム双方向バインド可能プロパティ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

カスタム双方向バインディング

任意のコンポーネントプロパティを双方向バインディング可能にできます。Angularでは、従来の@Inputと@Outputのペア、または最新のmodel()シグナルという2つの方法を利用できます。

命名規則

双方向バインディングを機能させるには、Output名をInput名にChangeサフィックスを付けた名前にする必要があります。たとえば、InputがsizeならOutputはsizeChangeです。

Inputの宣言

まず、親から設定できる通常のInputを用意します。

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

対応するOutputの宣言

Changeサフィックスを付けた名前で@OutputのEventEmitterを追加します。

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

更新時のイベント発行

コンポーネント内で値を変更したら、プロパティを更新し、新しい値を発行して親との同期を保ちます。

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

親からのバインディング

これで親から、独自のプロパティに対してバナナ・イン・ア・ボックス構文を使用できるようになります。

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Input/Outputの完全な例

ここでは、従来のAPIを使った、双方向バインディングに対応するカスタムコンポーネントの完全な例を紹介します。

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

最新のmodelアプローチ

model()を使えば、同じ動作をより短く記述できます。InputとOutputのペアは自動的に作成されます。

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

2つのアプローチの比較

従来のペアは明示的で、どこでも使用できます。一方、model()は簡潔でシグナルベースです。どちらも親に同じ[(value)]バインディングを公開します。

複数の双方向プロパティ

コンポーネントでは、複数のプロパティを双方向バインディング可能にできます。それぞれでinput/inputChangeの規約に従います。

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

アプローチの選択

新しいコードでは、簡潔でシグナルと統合できるmodel()を優先してください。細かな制御が必要な場合やシグナルを使用しない場合は、明示的なInput/Outputのペアを使用します。

理解度チェック

カスタムの双方向バインディング可能なプロパティについての理解度を確認しましょう。

まとめ

カスタム双方向バインディングには、InputとinputChangeという名前のOutputが必要で、更新のたびに値を発行します。最新のmodel()シグナルを使えば、このペアが自動的に作成されるため、新しいコードでは簡潔な選択肢となります。

よくある質問

「カスタム双方向バインド可能プロパティ」レッスンは無料ですか？

はい。「カスタム双方向バインド可能プロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「カスタム双方向バインド可能プロパティ」で何を学びますか？

独自の双方向バインド可能な入力を公開します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「カスタム双方向バインド可能プロパティ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. プロパティバインディングとイベントバインディングの復習
  2. ngModelによる双方向バインディング
  3. model() Signal入力
  4. カスタム双方向バインド可能プロパティ
← Angular Academyに戻る