Angular で コンポーネント を作ってみました。

コンポーネント？って言葉が普通に出てきました。
私にはこれまで日常会話で使ったことのない言葉です。

コンポーネントとは部品みたいな意味のようです。
プログラムを作るときは部品を作って、プラモデルみたいに組み合わせて完成させるイメージなのかと理解しました。

では、ちょっと進んでみます。

１．環境を準備します。

過去の記事で Angular アプリケーションを動かすところまでの環境を準備しています。

・以下のリンクを参照してください。

２．コンポーネントを作成します。

２－１．コマンドプロンプトを開きます。

（アウトプット）

２－２．Angular アプリケーションのディレクトリに移動します。

・コマンドプロンプトで以下のコマンドを実行します。
cd .\Angular\my-work

（アウトプット）

２－３．新しい汎用コンポーネントを作成するコマンドを実行します。

・コマンドプロンプトで以下のコマンドを実行します。
ng generate component header

（アウトプット）

２－３．app ディレクトリの直下に header が追加されています。

・エクスプローラで以下のディレクトリを参照します。
C:\Users\user\Angular\my-work\src\app

（アウトプット）

２－４．header ディレクトリの直下に以下のファイルが存在します。

・エクスプローラで以下のディレクトリを参照します。
C:\Users\user\Angular\my-work\src\app\header

（アウトプット）

３．プログラムを更新します。

３－１．app.component.ts に header コンポーネントをインポートします。

・以下のファイルを更新します。
C:\Users\user\Angular\my-work\src\app\app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
+ import { HeaderComponent } from './header/header.component';

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
  template: `
      <app-header></app-header>
  `
})
export class AppComponent {
-  title = 'my-work';
}

３－２．header.component.ts にテキストボックスとボタンを配置します。

・以下のファイルを更新します。
C:\Users\user\Angular\my-work\src\app\header\header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
-  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
+  template: `
+  <section>
+    <form>
+      <input type="text">
+      <button class="primary" type="button">Search</button>
+    </form>
+  </section>
+ `
})
export class HeaderComponent {

}

３－３．header.component.css を更新します。

・以下のファイルを更新します。
C:\Users\user\Angular\my-work\src\app\header\header.component.css

コンポーネント作成直後は .css ファイルは空で作成されています。

+ input[type="text"] {
+ border: solid 1px black;
+ padding: 10px;
+ border-radius: 8px;
+ margin-right: 4px;
+  display: inline-block;
+ width: 30%;
+ }
+
+ button {
+   padding: 10px;
+   border: solid 1px black;
+   background: darkglay;
+   color: black;
+   border-radius: 8px;
+ }

（アウトプット）

.css ファイルを更新しても何も変わらず、頭を悩ませました。
アプリケーションを再起動することで反映されました。

無事解決し、思ったとおりになりました。