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

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

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

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

#### １．環境を準備します。
:::note info
過去の記事で Angular アプリケーションを動かすところまでの環境を準備しています。
:::
・以下のリンクを参照してください。

https://qiita.com/monotoneboy/items/0c4cb59c99ba285ac9b5

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

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

（アウトプット）
![2-1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/e03e8a9f-06ee-ae50-8fdf-e20e4874f22b.png)

##### ２－２．Angular アプリケーションのディレクトリに移動します。
・コマンドプロンプトで以下のコマンドを実行します。
`cd .\Angular\my-work`

（アウトプット）
![2-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/b00ee087-4080-88b7-a92d-53a816195f00.png)

##### ２－３．新しい汎用コンポーネントを作成するコマンドを実行します。
・コマンドプロンプトで以下のコマンドを実行します。
`ng generate component header`

（アウトプット）
![2-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/53939af2-7608-827c-02d0-ee3d7195b795.png)

##### ２－３．app ディレクトリの直下に header が追加されています。
・エクスプローラで以下のディレクトリを参照します。
`C:\Users\user\Angular\my-work\src\app`

（アウトプット）
![2-3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/25d8fb5e-eb20-4d5d-b9e4-3ad8a479df32.png)

##### ２－４．header ディレクトリの直下に以下のファイルが存在します。
・エクスプローラで以下のディレクトリを参照します。
`C:\Users\user\Angular\my-work\src\app\header`

（アウトプット）
![2-4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/1ae8dec9-2730-e5f1-bb5a-62f89ec5d584.png)

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

##### ３－１．app.component.ts に header コンポーネントをインポートします。
・以下のファイルを更新します。
`C:\Users\user\Angular\my-work\src\app\app.component.ts`

```diff
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`

```diff
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`

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

```diff
+ 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;
+ }
```

（アウトプット）
![3-3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/8c561f52-e64f-74d6-f0b9-74e772153822.png)

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

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