ng-bootstrapを導入する前にしなければならないこと

AngularアプリにBootstrapを導入したい

Bootstrapの導入にあたり調べてみたら ng-bootstrap というものがあるみたいなのでインストールしてみたのだが、その際に戸惑ったのでメモ

ng-bootstrapを導入する

ng-bootstrapはangularでbootstrapを使えるようにするライブラリ。
公式HP：https://ng-bootstrap.github.io/#/home

とりあえず公式に記載の通りにやってみる。

導入手順

1. ng-bootstrapをインストールする

npm install @ng-bootstrap/ng-bootstrap

1. app.module.tsにNgbModuleをインストールする

app.module.ts

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

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

これでng-bootstrapがインポートでき、angularでもBootstrapが使えるとのこと

早速試してみる

公式のサンプルを拝借してDropdownを動かしてみる。

app.component.html

<div class="row" style="padding: 40px 10px">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="col text-right">
    <div ngbDropdown placement="top-right" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>
</div>

ところが起動すると、画面がこのようになった。

何が間違っているのか

インストールしたng-bootstrapのreadme.mdを開いてみると原因が分かった。
どうやらAngularでbootstrapを使うにはng-bootstrapだけではだめで、bootstrapのcssファイルが必要らしい。
ここからはreadme.mdに記載の手順に従ってbootstrap.cssをAngularに適用した。

1. bootstrapをインストールする

npm install --save bootstrap

1. angular.jsonに以下を追記する

angular.json

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

1. styles.cssにbootstrap.min.cssをインポートする

styles.css

  @import 'bootstrap/dis/css/bootstrap.min.css'

設定が終わってから再起動すると画像のように表示されるようになった。

まとめ

AngularでBootstrapを使えるようにするには ng-bootstrap だけではなく bootstrap.css もインストールする必要があった。