Angular プロジェクトに Bootstrap を追加

Angular-CLI プロジェクトに Bootstrap を追加する方法

前提条件

• Angular-CLI がインストールされていること
• Node.js と npm (または yarn) がインストールされていること

ステップ 1: Bootstrap パッケージのインストール

ターミナルまたはコマンドプロンプトで、プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

npm install bootstrap --save

または、yarnを使用している場合は：

yarn add bootstrap

ステップ 2: Angular Materialのインポート

angular.jsonファイルを開き、styles配列に以下のエントリを追加します。

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

ステップ 3: Bootstrapのコンポーネントを使用

Angularコンポーネント内で、BootstrapのCSSクラスを使用してHTML要素をスタイル設定できます。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ti   tle = 'my-app';
}

<div class="container">
  <h1 class="text-center">Hello, Bootstrap!</h1>
  <button type="button" class="btn btn-primary">Click me</button>
</div>

ステップ 4: コンパイルして実行

プロジェクトをコンパイルして実行します。

ng serve

これで、ブラウザでプロジェクトを開くと、Bootstrapのスタイルが適用されたページが表示されます。

注意

• BootstrapのJavaScriptライブラリを使用したい場合は、angular.jsonのscripts配列にエントリを追加し、コンポーネント内でJavaScriptをインポートする必要があります。

Angular コンポーネント (app.component.ts)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ti   tle = 'my-app';
}

HTML テンプレート (app.component.html)

<div class="container">
  <h1 class="text-center">Hello, Bootstrap!</h1>
  <button type="button" class="btn btn-primary">Click me</button>
</div>

CSS スタイル (app.component.css)

/* Optional: Add custom styles here */

angular.json ファイル (styles配列)

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

説明

1. Angular コンポーネント
   app.component.ts は、Angular アプリケーションのルートコンポーネントです。
2. HTML テンプレート
   app.component.html は、コンポーネントのテンプレートで、Bootstrap の CSS クラスを使用して要素をスタイル設定しています。
3. CSS スタイル
   app.component.css は、オプションのスタイルシートです。カスタムスタイルを追加できます。
4. angular.json ファイル
   styles 配列に Bootstrap の CSS ファイルを追加することで、プロジェクトに Bootstrap のスタイルをインポートします。

Angular Materialの使用

Angular Materialは、Angularの公式UIコンポーネントライブラリです。Bootstrapの代替として使用でき、Angularのスタイルガイドラインに準拠しています。

手順

1. Angular Materialをインストールする:

   ng add @angular/material
   

2. Angular Materialのコンポーネントを使用する:

   <mat-button color="primary">Click me</mat-button>
   

PrimeNGの使用

PrimeNGは、AngularのサードパーティUIコンポーネントライブラリです。豊富なコンポーネントを提供し、カスタマイズが可能です。

1. PrimeNGをインストールする:

   npm install primeng --save
   

2. PrimeNGのコンポーネントを使用する:

   <p-button label="Click me" [style]="{backgroundColor: 'blue', color: 'white'}"></p-button>
   

BootstrapのCDNリンクを使用

BootstrapのCDNリンクを使用することで、プロジェクトにBootstrapを直接参照することができます。

1. index.htmlファイルにBootstrapのCDNリンクを追加する:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   

Angular CLIのスタイルプリプロセッサを使用

Angular CLIは、SassやLessなどのスタイルプリプロセッサをサポートしています。スタイルプリプロセッサを使用してBootstrapのカスタマイズや管理を行うことができます。

1. Angular CLIでスタイルプリプロセッサを有効にする:

   ng config schematics.@schematics/angular:component.styleExt "scss"
   

2. スタイルプリプロセッサを使用してBootstrapをインポートする:

   @import "~bootstrap/scss/bootstrap";