Angular+Bootstrapで簡単アプリ開発

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

Angularプロジェクト作成

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

ng new sample1

 

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

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

npm install bootstrap –save

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

/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というフォルダーが作成されます。
b2

 

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">
<p>サンプル1です。</p>
</accordion-group>
<accordion-group heading="SAMPLE2" [isOpen]="false">
<p>サンプル2です。</p>
</accordion-group>
<accordion-group heading="SAMPLE3" [isOpen]="false">
<p>サンプル3です。</p>
</accordion-group>
</accordion>
</div>

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

とても簡単にアコーディオンパネルが作成できました。
皆さんも是非使ってみてください。

Be the first to comment

コメント投稿

Your email address will not be published.


*