今回は、Angularの開発でBootstrapを使用する方法を記載します。導入にはngx-bootstrapを使用します。ngx-bootstrapはBootstrapのラッパーで、Bootstrapの機能をコンポーネントやディレクティブの形式で使用できるようにしてくれます。(以下はAngular-cliが導入されていることを前提とした手順です。Angular-cliが導入されていない場合は、事前に導入してください。実装Angularプロジェクト作成newコマンドを使用してプロジェクトを作成します。sample1bootstrapのインストールとcss追加npmでbootstrapをインストールします。ルート直下で以下のコマンドを実行します。–saveインストールが成功すると、/node_modulesフォルダー配下にbootstrapというフォルダーが作成されます。/node_modules/bootstrap/dist/cssフォルダー配下にBootstrapのcssが配置されていますので、「angular-cli.json」の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をインストールします。ルート直下で以下のコマンドを実行します。–saveインストールが成功すると、/node_modulesフォルダー配下にngx-bootstrapというフォルダーが作成されます。「app.module.ts」にモジュールのインポート定義を記載します。以下の例ではアコーディオンパネル表示を行うAccordionModuleをインポートしていますが、使用したい機能に応じて適宜インポート定義を記載します。importsパラメータには、AccordionModuleそのものではなく、forRootメソッドの戻り値をセットします。}以上で機能を利用する準備ができました。例として、アコーディオンパネル表示を作成するには、「app.component.html」に以下のように実装します。