Bootstrap (ng-bootstrap) の利用方法

Bootstrap は基本的に CSS で構成される、レスポンシブなオープンソースの UI ライブラリです。 拡張性が高く、 JavaScript 等による多数のプラグインが公開されています。

ng-bootstrap は Angular 的なスタイルで Bootstrap を容易に扱えるようにするためのパッケージです。

ng-bootstrap のインストール方法と使い方

パッケージのインストール

Angular のプロジェクト内で次のコマンドで、必要なパッケージをインストールできます。

$ npm install --save bootstrap
$ npm install --save @ng-bootstrap/ng-bootstrap

NgbModule のインポート

次に app.module.ts の import に NgbModule を取り込みます。

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule],
  ...
})
export class AppModule {}

CSS の取り込み

次に angular.json に bootstrap.min.css を取り込みます。

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

以上でインストールが完了です。

動作確認

以上の設定ができれば、次のように (Bootstrap を知っている人にはおなじみの) form-control とか btn などの CSS クラスが有効になります。

<div class="form1">
  <div class="form-group">
    <input 
      type="text" 
      class="form-control"/>
  </div>
  <button 
    class="btn btn-primary">OK</button>
</div>

上のコードでこのように表示されれば OK です。