Angularにngx-bootstrapをインストールする方法

Angularにngx-bootstrapをインストールする方法
1. 関連

Angularにngx-bootstrapをインストールする方法

ngx-bootstrapをインストールして、Angular6で使用する方法です。

npm install ngx-bootstrap --save

ngx-bootstrapはbootstrapのcssを参照しているので、bootstrapもインストールしておきます。バージョン4が出ていますが、ここでは3.3.7をインストールしています。

npm install bootstrap@3.3.7 --save

Angular6の場合は以下もインストールする必要があるようです。

npm install rxjs-compat --save

Angular5の場合は不要かもしれません。

angular.json

angularプロジェクト配下のangular.jsonを開きます。

stylesの配列にbootstrap.cssの1行を追加します。

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

app.module.ts

app.module.tsにアコーディオンモジュールをします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AccordionModule } from 'ngx-bootstrap'; // 追加します
import { AppComponent } from './app.component';
import { AbcComponent } from './abc/abc.component';

@NgModule({
  declarations: [
    AppComponent,
    AbcComponent
  ],
  imports: [
    BrowserModule,
    AccordionModule.forRoot() // 追加します
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これでng serveすると、アコーディオンが使えるようになります。以下サンプルです。

<accordion>
  <accordion-group heading="aaa">
    <p>test1</p>
  </accordion-group>
  <accordion-group heading="bbb">
    <p>test2</p>
  </accordion-group>
</accordion>

こんな感じです。