アプリケーションのHousingLocationコンポーネントを作成する

このチュートリアルレッスンではHousingLocationコンポーネントをAngularアプリケーションに追加する方法を紹介します。

何を学ぶか

  • アプリケーションに新しいコンポーネントHousingLocationが追加され、そのコンポーネントがアプリケーションに追加されたことを確認するメッセージを表示します。

  1. HousingLocationを作成する

    このステップでは、アプリケーションの新しいコンポーネントを作成します。

    IDEのターミナルペインで、

    1. プロジェクトのディレクトリで、first-appディレクトリを開きます。

    2. 新しくHousingLocationを作成するために、次のコマンドを実行します

      ng generate component housingLocation

    3. アプリケーションをビルドし、開発サーバーを起動するために、次のコマンドを実行します。

      ng serve

      NOTE: このステップはローカル環境でのみ実施します!

    4. ブラウザを開き、http://localhost:4200にアクセスしてアプリケーションを確認します。

    5. アプリケーションがエラーなくビルドされていることを確認します。

      HELPFUL: 新しいコンポーネントを追加しましたが、まだアプリケーションのどのテンプレートにも組み込んでいませんので、前のレッスンと同様の表示になります。

    6. 次のステップに進む間も、ng serveはそのまま実行し続けておきます。

  2. アプリケーションのレイアウトに新しいコンポーネントを追加する

    このステップでは、新しいコンポーネントHousingLocationをアプリケーションのHomeに追加し、レイアウトに表示されるようにします。

    IDEの編集ペインで:

    1. エディタでhome.tsを開きます。

    2. home.tsのインポート文に次の行を追加して、HousingLocationをインポートします。

      HousingLocationをsrc/app/home/home.tsにインポートする

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';

@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 />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

    3. 次に、@Componentメタデータのimportsプロパティの配列にHousingLocationを追加してを更新します。

      HousingLocationをsrc/app/home/home.tsのimports配列に追加する

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';

@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 />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

    4. コンポーネントがHomeのテンプレートで使える状態になりました。@Componentメタデータのtemplateプロパティに<app-housing-location>タグを追加して更新します。

      src/app/home/home.ts内のコンポーネントのテンプレートにHousingLocationを追加する

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';

@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 />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

  3. コンポーネントにスタイルを追加する

    このステップでは、HousingLocation用にあらかじめ用意されたスタイルをアプリケーションにコピーし、アプリケーションが正しく表示されるようにします。

    1. src/app/housing-location/housing-location.cssを開き、下記のスタイルをファイルに貼り付けますします。

      NOTE: ブラウザでは、src/app/housing-location/housing-location.tsのstyles配列に記載可能です。

      HousingLocationのCSSスタイルをsrc/app/housing-location/housing-location.cssに追加する

      .listing {
  background: var(--accent-color);
  border-radius: 30px;
  padding-bottom: 30px;
}
.listing-heading {
  color: var(--primary-color);
  padding: 10px 20px 0 20px;
}
.listing-photo {
  height: 250px;
  width: 100%;
  object-fit: cover;
  border-radius: 30px 30px 0 0;
}
.listing-location {
  padding: 10px 20px 20px 20px;
}
.listing-location::before {
  content: url('/public/location-pin.svg') / '';
}

section.listing a {
  padding-left: 20px;
  text-decoration: none;
  color: var(--primary-color);
}
section.listing a::after {
  content: '\203A';
  margin-left: 5px;
}

    2. コードを保存し、ブラウザに戻り、エラーなくビルドされていることを確認してください。"housing-location works!"というメッセージが画面に表示されるはずです。次のステップに進む前にエラーがあれば修正してください。

      ロゴを表示するhome-appのブラウザ画面に、テキストをフィルターする入力ボックス、検索ボタンおよびメッセージ'housing-location works!'が表示されている

SUMMARY: このレッスンでは、アプリケーションの新しいコンポーネントを作成し、アプリケーションのレイアウトに追加しました。