Angular CLI環境の構築とPrimeNGの導入

1. Angular CLIのインストール

最新版Angular CLIをグローバルにインストールします：

npm install -g @angular/cli

インストール後、バージョン確認を行います：

ng version

公式ドキュメント（Built-in Directives）で*ngIfや*ngForなどのディレクティブ構文を確認できます。

2. 新規アプリケーションの生成

以下のコマンドでスタンドアロンなプロジェクトを作成します：

ng new angular-primeng-demo --routing=true --style=scss

作成後、プロジェクトへ移動して開発サーバーを起動：

cd angular-primeng-demo<br>ng serve

デフォルトポート http://localhost:4200 でアプリケーションが動作します。

3. ルーティングの設定

ホームコンポーネントを生成します：

ng g c pages/home

app.module.tsにコンポーネントを登録：

import { NgModule } from '@angular/core';<br>import { BrowserModule } from '@angular/platform-browser';<br>import { AppRoutingModule } from './app-routing.module';<br>import { AppComponent } from './app.component';<br>import { HomePageComponent } from './pages/home/home-page.component';<br><br>@NgModule({<br>  declarations: [AppComponent, HomePageComponent],<br>  imports: [BrowserModule, AppRoutingModule],<br>  bootstrap: [AppComponent]<br>)<br>export class AppModule {}

app-routing.module.tsにルート定義を追加：

import { Routes, RouterModule } from '@angular/router';<br>import { HomePageComponent } from './pages/home/home-page.component';<br><br>const appRoutes: Routes = [<br>  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },<br>  { path: 'dashboard', component: HomePageComponent }<br>];<br><br>@NgModule({<br>  imports: [RouterModule.forRoot(appRoutes)],<br>  exports: [RouterModule]<br>})<br>export class AppRoutingModule {}

4. 再利用可能なUIコンポーネントの作成

ヘッダー用の再利用コンポーネントを生成：

ng g c shared/header --skip-tests

生成されたshared/headerコンポーネントは、<app-header></app-header>タグで呼び出せます。必要に応じてapp.module.tsまたは機能モジュール内で宣言してください。

5. コンポーネント間通信の実装

親→子：@Input()によるデータ渡し
親コンポーネント（例：home-page.component.ts）からタイトル文字列を子コンポーネントへ渡す：

<app-header [headerTitle]="'ダッシュボード'"></app-header>

子→親：@Output() + EventEmitterによるイベント通知
子コンポーネント内にボタンを配置し、クリック時にIDを発行：

// header.component.ts<br>import { Component, Input, Output, EventEmitter } from '@angular/core';<br><br>@Component({<br>  selector: 'app-header',<br>  template: `<button (click)="onSelect(123)">選択</button>`<br>})<br>export class HeaderComponent {<br>  @Input() headerTitle!: string;<br>  @Output() itemSelected = new EventEmitter<number>();<br><br>  onSelect(id: number): void {<br>    this.itemSelected.emit(id);<br>  }<br>}

親コンポーネントではイベントを受信：

<app-header<br>  [headerTitle]="'ダッシュボード'"<br>  (itemSelected)="handleSelection($event)"><br></app-header>

6. PrimeNGライブラリの導入

必要なパッケージをインストール：

npm install primeng primeicons @angular/animations

app.module.tsにアニメーションモジュールを追加：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';<br><br>@NgModule({<br>  imports: [<br>    BrowserModule,<br>    BrowserAnimationsModule,<br>    // その他のモジュール<br>  ]<br>})

angular.jsonのstyles配列にテーマCSSを追加：

"styles": [<br>  "node_modules/primeicons/primeicons.css",<br>  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",<br>  "node_modules/primeng/resources/primeng.css"<br>]

※LaraテーマはPrimeNG v14+で推奨。旧バージョンのNovaテーマはnova-light/theme.cssを使用。

7. PrimeNGコンポーネントのカスタマイズ

Shadow DOMを越えてスタイルを適用するには::ng-deep（非推奨だが現時点の実用的手段）またはViewEncapsulation.Noneを活用します。例としてPanelMenuのリンク色変更：

// header.component.scss<br>:host ::ng-deep .p-panelmenu .p-panelmenu-header a {<br>  background-color: #4a5568;<br>  color: #e2e8f0;<br>  font-weight: 500;<br>}

より現代的な方法としては、グローバルスタイル（styles.scss）への記述や、テーマ変数の上書きも可能です。

8. 常見のエラー対応

• CDK依存エラー（例：Cannot find module '@angular/cdk/scrolling'）
  → npm install @angular/cdk @angular/material を実行
• ngModel未定義エラー
  → app.module.tsのimportsにFormsModuleを追加：import { FormsModule } from '@angular/forms';
• テンプレート構文の誤り（ng-if, ng-forなど）
  → 正しい構文は*ngIf, *ngFor（アスタリスク付き）です。