🐣

Angularの公式チュートリアルをやっていく　その４ - Create housing location component

2023/06/11に公開

Angular

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

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

HousingLocationComponent の作成

まずは、HousingLocationComponentを作成するためのコマンドを実行しましょう。
実行場所はfirst-appフォルダです。

ng generate component HousingLocation --standalone --inline-template --skip-tests

実行結果

CREATE src/app/housing-location/housing-location.component.ts (350 bytes)
CREATE src/app/housing-location/housing-location.component.css (0 bytes)

正常に実行されてhousing-locationフォルダーとその直下にコンポーネントファイルが生成されました。

アプリケーションを一度ビルドして、生成されたコンポーネントが正常に機能するか確かめます。

ng serve

問題なくブラウザが表示されたので、生成されたコンポーネントは正常に機能しているようです。
ここで上手くビルドできずエラーとなってしまったら、HousingLocationComponentの生成が上手くいっていない可能性がありますので、一度生成されたファイルを消して再度生成するか、エラー文を読んで対処しましょう。

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

生成した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';
  
  @Component({
    selector: 'app-home',
    standalone: true,
-   imports: [CommonModule],
+   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>
+     </section>
    `,
    styleUrls: ['./home.component.css'],
  })
  export class HomeComponent {}

変更を保存すると、アプリケーション自動で再ビルドされ http://localhost:4200/ の表示が変化します。
housing-location works!の文字列が増えていますね！

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

変更したファイルを保存していない
変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

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

コンポーネントのスタイルを追加

HousingLocationComponentにスタイルを追加します。

下記のようにhousing-location.component.cssのコードを更新します。

housing-location.component.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("/assets/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;
+ }

ブラウザを確認してみますが、特に変化はありませんね。

今回追加したCSSのクラスはまだtemplateで使用されていないので、これから必要になってくるのでしょう。

これにてCreate housing location componentは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その３ - Create home component
→　次へ　Angularの公式チュートリアルをやっていく　その５ - Create an interface

HousingLocationComponent の作成

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

コンポーネントのスタイルを追加

Discussion