bootstrap PR

ngx-bootstrapの使い方!”ng-bootstrap”と “ngx-bootstrap”の違いも紹介

記事内に商品プロモーションを含む場合があります
✓本記事のテーマ
  • はじめに
  • “ng-bootstrap”と “ngx-bootstrap”の違い
  • Angularプロジェクト作成
  • bootstrapのインストールとcss追加
  • ngx-bootstrapのインストール
  • ngx-bootstrapモジュールのインポート定義
  • 実装
  • アコーディオンのサンプルコード

今回は上記のテーマで解説していきます。

細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。

[ngx-bootstrap 使い方]はじめに

この記事では、Angularの中でBootstrapを使用する方法について解説していきます。
その途中の「導入部分」でngx-bootstrapを使います。

ngx-bootstrapはBootstrapのラッパーにあたる部分で、コンポーネントやディレクティブの形式でBootstrapの機能を使えるようになります。

※先述した通り、「Angular-cli」を使用して、Bootstrapを使えるようにしていきます。
なので、Angular-cliが入っていないと先に進めないので、Angular-cliをまずは最初にダウンロードして使えるようにしておいてください。

“ng-bootstrap”と “ngx-bootstrap”の違い

よくある質問として

「”ng-bootstrap”と “ngx-bootstrap”の違いは何ですか?彼らはお互いに関連していますか?それとも、それらは単に並行実装ですか?」

というのがあります。

結論から申し上げると、2つの異なるプロジェクトチームによる2つの異なるプロジェクトです。
ただ、その中身は「ほぼ同じ」です。

2つの共通点は、 jQueryを使用せずにAngular(2+)でBootstrapを使用することが可能であること、違いを見つけるとすればそれは「サポートしているBootstrapのバージョンが違う」という点です。

  • ngx-bootstrap:Bootstrap 3と4
  • ng-bootstrap:Bootstrap 4のみ(別途Angular 5+が必要)

なので、基本的には「ngx-bootstrap」を選択すればいいです。

ngx-bootstrap 使い方1.Angularプロジェクト作成

newコマンドで新規プロジェクトを立ち上げます。

ngx-bootstrap 使い方2.bootstrapのインストールとcss追加

npmを使ってbootstrapをインストールします。ルート直下で次のようなコマンドを実行します。

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

出典:sios TECH.LAB

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

ngx-bootstrap 使い方3.ngx-bootstrapのインストール

ついに本題のnpmでngx-bootstrapをインストールしていきます。
ルート直下に次のようにコマンドを実行します。

インストールできると、/node_modulesフォルダー配下にngx-bootstrapというフォルダーが作成されます。
(これもちゃんと実行されてフォルダーができているか確認してください)

ngx-bootstrap 使い方4.ngx-bootstrapモジュールのインポート定義

「app.module.ts」へモジュールのインポート定義を付与していきます。
今回は、アコーディオンパネル表示を行うAccordionModuleをインポートしてます。

なので、使用したい機能に応じてインポートする定義は違うよ!ということを先に述べておきます。
importsパラメータのほうでは、AccordionModuleそのものではなく、forRootメソッドの戻り値をセットしていきます。

準備は完成です!

次つぎに実際に動くか確認していきましょう(動作チェック)

ngx-bootstrap 使い方5.実装

先ほど、作成したアコーディオンパネルを早速表示させてみましょう。

「app.component.html」に次のように配置していきます。

以上の手順を踏めば、下記のようなアコーディオンパネルが実装されます。

アコーディオンのサンプルコード

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