Font Awesome を使って Bootstrap を組み込む

2024-04-22

Angular 4 で Bootstrap を組み込む方法

方法 1: npm パッケージを使う

プロジェクトディレクトリで以下のコマンドを実行します。
```
npm install bootstrap --save
```
angular.json ファイルを開き、styles プロパティに node_modules/bootstrap/dist/css/bootstrap.min.css を追加します。
app.component.css ファイルを開き、Bootstrap の基本的なスタイルをインポートします。
```
@import "~bootstrap/dist/css/bootstrap.min.css";
```
コンポーネントのテンプレートで、Bootstrap のコンポーネントを使用できます。
```
<div class="container">
  <h1>Hello, world!</h1>
</div>
```

方法 2: CDN を使う

以下の <head> タグ内に以下のコードを追加します。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

app.component.css ファイルで、Bootstrap の基本的なスタイルをカスタマイズできます。
コンポーネントのテンプレートで、Bootstrap のコンポーネントを使用できます。

npm パッケージを使う場合:
- プロジェクトで Bootstrap を頻繁に使用する場合は、この方法がおすすめです。
- オフラインで作業できます。
CDN を使う場合:
- プロジェクトのビルドサイズが小さくなります。

Angular 4 で Bootstrap を組み込むサンプルコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular 4 で Bootstrap を組み込む</title>
  <base href="/">

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>

  <script src="runtime.js" type="module"></script>
  <script src="polyfills.js" type="module"></script>
  <script src="main.js" type="module"></script>
</body>
</html>

styles.css

/* Bootstrap の基本的なスタイルをインポート */
@import "~bootstrap/dist/css/bootstrap.min.css";

/* アプリのカスタマイズスタイル */
body {
  font-family: 'Arial', sans-serif;
}

.container {
  max-width: 800px;
}

app.component.html

<div class="container">
  <h1>Hello, world!</h1>
  <button class="btn btn-primary">ボタン</button>
</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 4 で Bootstrap を組み込む';
}

package.json

{
  "name": "angular-bootstrap-example",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint"
  },
  "dependencies": {
    "@angular/cli": "^10.0.0",
    "@angular/core": "^10.0.0",
    "@angular/forms": "^10.0.0",
    "@angular/platform-browser": "^10.0.0",
    "@angular/platform-browser-dynamic": "^10.0.0",
    "@angular/router": "^10.0.0",
    "bootstrap": "^4.3.1",
    "rxjs": "^6.6.3",
    "tslib": "^2.3.1",
    "typechecks": "^0.1.1"
  },
  "devDependencies": {
    "@angular/compiler": "^10.0.0",
    "@angular/compiler-cli": "^10.0.0",
    "@angular/language-service": "^10.0.0",
    "@types/jasmine": "^3.6.0",
    "@types/node": "^14.14.31",
    "jasmine": "^3.8.0",
    "jasmine-core": "~3.8.0",
    "karma": "^6.3.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ts-node": "^9.1.1",
    "typescript": "^4.3.5"
  }
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular 4 で Bootstrap を組み込む</title>
  <base href="/">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  <link href="styles.css" rel="stylesheet">

Angular 4 で Bootstrap を組み込むその他の方法

方法 3: Angular CLI を使う

app.module.ts ファイルを開き、NgBootstrapModule をインポートして imports 配列に追加します。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { NgBootstrapModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgBootstrapModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

方法 4: Font Awesome を使う

コンポーネントのテンプレートで、Font Awesome のアイコンを使用できます。
```
<i class="fas fa-home"></i>
```

方法 5: PrimeNG を使う

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PrimeNGModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```