0Pricing
Angular Academy · レッスン

プロパティバインディングとイベントバインディングの復習

コンポーネントへのデータ入力とイベント出力をバインドします。

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

データフローの2つの方向

Angularのテンプレートでは、データが2方向に移動します。プロパティバインディングはデータをDOMに渡し、イベントバインディングはユーザーの操作をコンポーネントに送り返します。

補間

二重中括弧を使った補間では、コンポーネントの値がテキストとして表示されます。これはコンポーネントからビューへの一方向のバインディングです。

<p>{{ title }}</p>

// component
title = "Dashboard";

プロパティバインディングの構文

角括弧を使うと、コンポーネントの値を要素またはコンポーネントのプロパティにバインドできます。右側の式が評価され、その結果が代入されます。

<img [src]="imageUrl" [alt]="caption">

// component
imageUrl = "/logo.png";
caption = "Logo";

コンポーネントのInputへのバインディング

プロパティバインディングを使うと、子コンポーネントの@Inputプロパティにも値を渡せます。

<app-user [name]="userName"></app-user>

// parent component
userName = "Ada";

属性とプロパティの違い

プロパティバインディングの対象はHTML属性ではなく、DOMのプロパティです。属性そのものを扱う場合は、attr.プレフィックスを使用します。

<button [attr.aria-label]="label">Save</button>

イベントバインディングの構文

丸括弧を使うと、DOMイベントをコンポーネントのメソッドにバインドできます。イベントが発生すると、そのメソッドが実行されます。

<button (click)="save()">Save</button>

// component
save() { console.log("saved"); }

$eventオブジェクト

特殊な$event変数は、イベントのペイロードをハンドラーに渡します。

<input (input)="onInput($event)">

// component
onInput(e: Event) {
  this.text = (e.target as HTMLInputElement).value;
}

コンポーネントのOutputへのバインディング

イベントバインディングでは、EventEmitterを介して発行される子コンポーネントの@Outputイベントも監視できます。

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) { this.count = value; }

2つのバインディングの組み合わせ

同じプロパティにプロパティバインディングとイベントバインディングを組み合わせることが、双方向バインディングの基礎です。次に詳しく見ていきます。

<input [value]="name" (input)="name = $event.target.value">

クラスとスタイルのバインディング

専用のプロパティバインディングを使うと、コンポーネントの状態に応じてクラスやスタイルを切り替えられます。

<div [class.active]="isActive"
     [style.color]="textColor">
  Item
</div>

宣言的なテンプレートを保つ

バインディングによって、データとビューの関係を宣言的に保てます。バインドされた値が変わると、AngularがDOMを自動的に更新します。

理解度チェック

プロパティバインディングとイベントバインディングについての理解度を確認しましょう。

まとめ

プロパティバインディング[prop]はデータをビューに渡し、イベントバインディング(event)は操作を送り返し、補間はテキストを表示します。同じ値にプロパティバインディングとイベントバインディングを組み合わせると、双方向バインディングを設定できます。

よくある質問

「プロパティバインディングとイベントバインディングの復習」レッスンは無料ですか？

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

「プロパティバインディングとイベントバインディングの復習」で何を学びますか？

コンポーネントへのデータ入力とイベント出力をバインドします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「プロパティバインディングとイベントバインディングの復習」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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