Angular+Bootstrapで簡単アプリ開発

こんにちは。サイオステクノロジー技術部木村です。
今回は、Angularの開発でBootstrapを使用する方法を記載します。導入にはngx-bootstrapを使用します。ngx-bootstrapはBootstrapのラッパーで、Bootstrapの機能をコンポーネントやディレクティブの形式で使用できるようにしてくれます。
（以下はAngular-cliが導入されていることを前提とした手順です。Angular-cliが導入されていない場合は、事前に導入してください。）

1 Angularプロジェクト作成
2 bootstrapのインストールとcss追加
3 ngx-bootstrapのインストール
4 ngx-bootstrapモジュールのインポート定義
5 実装

Angularプロジェクト作成

newコマンドを使用してプロジェクトを作成します。

 ng new sample1

bootstrapのインストールとcss追加

npmでbootstrapをインストールします。ルート直下で以下のコマンドを実行します。

 npm install bootstrap –save

インストールが成功すると、/node_modulesフォルダー配下にbootstrapというフォルダーが作成されます。

/node_modules/bootstrap/dist/cssフォルダー配下にBootstrapのcssが配置されていますので、「angular-cli.json」のstylesに使用するcssを追加します。

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

※/node_modules/bootstrap/dist/cssフォルダー配下にあるbootstrap.cssとbootstrap.min.cssは、内容は一緒ですが、bootstrap.min.cssはスペースや改行などを削除してファイル容量を小さくしてあります。そのため読み込むcssはbootstrap.min.cssの方を指定します。

ngx-bootstrapのインストール

npmでngx-bootstrapをインストールします。ルート直下で以下のコマンドを実行します。

npm install ngx-bootstrap –save

インストールが成功すると、/node_modulesフォルダー配下にngx-bootstrapというフォルダーが作成されます。

ngx-bootstrapモジュールのインポート定義

「app.module.ts」にモジュールのインポート定義を記載します。以下の例ではアコーディオンパネル表示を行うAccordionModuleをインポートしていますが、使用したい機能に応じて適宜インポート定義を記載します。
importsパラメータには、AccordionModuleそのものではなく、forRootメソッドの戻り値をセットします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AccordionModule } from 'ngx-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AccordionModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

以上で機能を利用する準備ができました。

実装

例として、アコーディオンパネル表示を作成するには、「app.component.html」に以下のように実装します。

<div style="width: 100%; max-width: 350px; margin: 50px auto; background: #fff;">
  <accordion ［closeOthers］="true">
    <accordion-group heading="SAMPLE1" ［isOpen］="true">
      サンプル１です。
    </accordion-group>
    <accordion-group heading="SAMPLE2" ［isOpen］="false">
      サンプル２です。
    </accordion-group>
    <accordion-group heading="SAMPLE3" ［isOpen］="false">
      サンプル３です。
    </accordion-group>
  </accordion>
</div>

上記実装で、以下のようなアコーディオンパネルが作成できます。