Angularでヘッダーメニューを追加する手順

Angular + Node.js + Visual Studio Code 開発環境構築手順で作成したプレーンな状態の Angularプロジェクトに、ヘッダーメニューを追加しました。
ソースコードは GitHub で公開しています。

修正前後の画面
1. 修正前
2. 修正後
ヘッダーメニューコンポーネント作成
追加変更したソースコード解説
実装した環境

修正前後の画面

修正前

修正後

ヘッダーメニューが追加されている。

ヘッダーメニューコンポーネント作成

VS Code のターミナルで下記コマンドを実行


> ng generate component headermenu

> ng generate component headermenu

headermenuコンポーネントが追加された。

※作成したコンポーネントを削除したい場合、コンポーネントフォルダ（headermenuフォルダ）を削除するだけで良い。

追加変更したソースコード解説

Angular/Src2_AddHeader/src/app/app.component.html

アプリケーションのメインテンプレートに、headermenuを追加。


<app-headermenu></app-headermenu>

<app-headermenu></app-headermenu>

Angular/Src2_AddHeader/src/app/app.component.ts

アプリケーションのメインテンプレートに、headermenuコンポーネントの参照を追加。


import { HeadermenuComponent } from "./headermenu/headermenu.component";

import { HeadermenuComponent } from "./headermenu/headermenu.component";


  imports: [RouterOutlet, HeadermenuComponent],

imports: [RouterOutlet, HeadermenuComponent],

Angular/Src2_AddHeader/src/app/headermenu/headermenu.component.html

headermenuコンポーネントに、<header>要素とメニュー要素を追加。


<header>
  <nav>
    <h1>アプリケーションヘッダー</h1>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<nav>

<h1>アプリケーションヘッダー</h1>

<ul>

<li><a href="#">お問い合わせ</a></li>

</ul>

</nav>

</header>

Angular/Src2_AddHeader/src/app/headermenu/headermenu.component.scss

headermenuのスタイルを追加。ChatGPTに適当に作ってもらったスタイル。


header {
  background-color: #333;
  color: white;
  padding: 10px 20px;

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      margin: 0;
    }

    ul {
      list-style: none;
      display: flex;

      li {
        margin-left: 20px;

        a {
          color: white;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

header {

background-color: #333;

color: white;

padding: 10px 20px;

nav {

display: flex;

justify-content: space-between;

align-items: center;

h1 {

margin: 0;

}

ul {

list-style: none;

display: flex;

li {

margin-left: 20px;

a {

color: white;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

Angular/Src2_AddHeader/src/app/headermenu/headermenu.component.spec.ts

※「ng generate component」コマンドで作成した時点から変更ないので省略。

Angular/Src2_AddHeader/src/app/headermenu/headermenu.component.ts