コンポーネントのテンプレートにプロパティバインディングを追加する

このチュートリアルレッスンではテンプレートにプロパティバインディングを追加する方法とコンポーネントに動的データを渡すための使用方法を紹介します。

何を学ぶか

• アプリケーションのHomeテンプレートにデータバインディングが追加されます。
• アプリケーションがHomeからHousingLocationにデータを送れるようになります。

inputプロパティのコンセプト概要

このレッスンでは、プロパティバインディングを使ってテンプレート内のプロパティに値を渡し、親コンポーネントから子コンポーネントへデータを共有する方法を続けて学びます。

プロパティバインディングを使うと、Angularテンプレート内で変数をInputプロパティに結びつけることができます。こうして渡されたデータはInputに動的にバインドされます。

より詳しい説明は、ガイドのプロパティバインディングを参照してください。

1. Homeテンプレートを更新する

   このステップでは、<app-housing-location>タグにプロパティバインディングを追加します。

   コードエディタで、

   1. src/app/home/home.tsに移動します

   2. @Componentのテンプレートプロパティで、以下のコードと同じ内容になるよう更新します。

      housingLocationプロパティバインディングを追加する

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location [housingLocation]="housingLocation" />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      

      コンポーネントタグにプロパティバインディングを追加する際には、[attribute] = "value"という構文を使います。これは割り当てた値を文字列ではなくコンポーネントクラスのプロパティとして扱うようAngularに指示するためのものです。

      右辺の値はHomeコンポーネントのプロパティ名です。

2. コードが正しく動作することを確認する

   1. 変更を保存し、アプリケーションにエラーがないことを確認します。
   2. 次のステップに進む前に、エラーがあれば修正します。

このレッスンで扱った内容について、さらに詳しく知りたい場合は次のページをご覧ください: