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

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

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

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

2人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です