🐣

Angularの公式チュートリアルをやっていく　その７ - Add property binding to components

2023/06/11に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

このページ英語やんけ

ちょっと見てみたのですが、これ以降はすべて英語みたいですね。
何という事でしょう。

まあ、このまま続けていきます。
英語のドキュメント読みながら実装進めていくのは、別に初めてという訳でもないので大丈夫でしょう。

HomeComponentのテンプレートのタグを更新する（Update tag in the HomeComponent tempalte）

home.component.tsファイルのtemplateを更新します。

<app-housing-location>タグに[属性]="値" を付与することで、そのタグを実装している子コンポーネントに値を渡すことができるようです（この場合はhousing-location.component.tsファイルのHousingLocationComponentクラスですね）。

下記のようにhome.component.tsを更新します。

home.component.ts

  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { HousingLocationComponent } from '../housing-location/housing-location.component';
  import { HousingLocation } from '../housinglocation';
  
  @Component({
    selector: 'app-home',
    standalone: true,
    imports: [CommonModule, HousingLocationComponent],
    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></app-housing-location>
+       <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
      </section>
    `,
    styleUrls: ['./home.component.css'],
  })
  export class HomeComponent {
    housingLocation: HousingLocation = {
      id: 9999,
      name: 'Test Home',
      city: 'Test city',
      state: 'ST',
      photo: 'assets/example-house.jpg',
      availableUnits: 99,
      wifi: true,
      laundry: false,
    };
  }

変更してエラーも出なかったので大丈夫そうです。

エラーが起きて上手くいかない場合は、次のことが考えられます。

変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

何か間違いがないか、今一度確認してみましょう。

そして、このAdd property binding to componentsはこれで終わりですね。
結構1ページ1ページ短いですね。
これなら別にzennの記事を分割しなくてもよかったかもしれない……

これにてAdd property binding to componentsは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その６ - Add inputs to components
→　次へ　Angularの公式チュートリアルをやっていく　その８ - Add dynamic values to templates

このページ英語やんけ

HomeComponentのテンプレートのタグを更新する（Update tag in the HomeComponent tempalte）

Discussion