Angular8におけるBootstrap4のAccordionの利用方法

# Angular8におけるBootstrap4のAccordionの利用方法


2019.7.11


by **_Shuichi Ohtsu_** 

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_00.png" width= "640" >


フルソースコード
<https://github.com/Ohtsu/ng8-bootstrap4-accordion>

ビデオ解説(日本語）
<https://youtu.be/oo0GLv8e5ng>

ビデオ解説(英語）
<https://youtu.be/9Ig7CTIMFUE>



--------------------

## プロジェクトの作成方法について

ここでは、Angular8においてBootstrap4のAccordionを利用する方法についてご紹介します。

なお、プロジェクト作成の段階からのBootstrap4の設定方法につきましては、すでに、_Angular8におけるBootstrap4環境の設定方法_<https://youtu.be/gFxuSi4IZjM>を公開しておりますので、そちらをご覧ください。

今回は、そうした設定済みプロジェクトをGitHubからダウンロードし、さらにそれにAccordion機能を組み込む形で進めていきます。

プロジェクトの内容については、そのフルソースコードをご覧ください。

--------------------

## Bootstrap4を組み込んだプロジェクト・ソースのGitHubからのダウンロード

まず、GitHubからBootstrap4を組み込んだプロジェクトのフルソースをダウンロードします。

そのＵＲＬは、

`https://github.com/Ohtsu/ng8-bootstrap4-initial`

です。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_01.png" width= "640" >

ページが表示されましたら、右側の緑の_Clone or download_ボタンをクリックします。

するとダウンロード用のアドレスが表示されますので、右側のコピーアイコンをクリックし、そのアドレスをコピーしておきます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_02.png" width= "640" >


## プロジェクトの生成

コマンド・プロンプトを開き、適当なディレクトリに移動した後、そのディレクトリで、`git clone `に続けて、コピーしたアドレスを貼り付けます。

`git clone https://github.com/Ohtsu/ng8-bootstrap4-initial.git`

と入力します。

するとダウンロードが開始されます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_03.png" width= "640" >


## Visual Studio Codeの起動

次に、生成されたプロジェクトのディレクトリに入り、

`cd ng8-bootstrap4-initial`


Visual Studio Codeを起動します。

`code .`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_04.png" width= "640" >



VSCodeが起動しましたら、


`ctrl+@`キーを押し、ターミナル・ウィンドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_05.png" width= "640" >


そして、

`npm i`

と入力し、プロジェクトに必要なライブラリをインストールします。

このプロセスには若干時間を要します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_06.png" width= "640" >



## プロジェクトの起動の確認

次に、プロジェクトが起動できるかどうかを確認します。

`ng s -o`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_07.png" width= "640" >



ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_08.png" width= "640" >



ＯＫです。

## Gulpによるバックアップの作成

この段階で、変更前ソースのバックアップを取っておきます。但し、関連ライブラリまでバックアップをする必要はないので、`node_modules`以下のファイルは除外することにします。

このようなバックアップを行う`gulpfile.js`をすでにプロジェクトに含めてありますので、それを実行します。

`gulp -m Intial`

と入力します。`-m`オプション以下の文字は、作成したプロジェクト名に追加する文字列です。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_09.png" width= "640" >



次に、Accordionテスト用のプロジェクトも作成しておきます。

`gulp -m ForAccordion`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_01.png" width= "640" >



次にファイルエクスプローラーを開き、作成したAccordionテスト用のプロジェクトをディレクトリごとコピーし、適当なディレクトリ内にペーストします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_02.png" width= "640" >



そして、ディレクトリ名を`ng8-bootstrap4-accordion`に変更しておきます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_03.png" width= "640" >



次に、コマンド・プロンプトを開き、このディレクトリに移動します。

そして

`code .`

と入力して、VSCodeを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_04.png" width= "640" >


VSCodeが起動しましたら、


`ctrl+@`キーを押し、ターミナル・ウィンドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_05.png" width= "640" >



## プロジェクト名の変更

次に、プロジェクトの内容を変更していきます。

まず、プロジェクト名を変更します。

_package.json_ファイルを開くと、プロジェクト名が`ng8-bootstrap4-initial`になっているのがわかります。これを`ng8-bootstrap4-accordion`に変更します。

左の検索アイコンをクリックし、プロジェクト全体のソースを対象として置換を行います。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_06.png" width= "640" >



次に、パスカルケース、すなわち`-`ではなく大文字で区切っているものも存在しますので、`Ng8Bootstrap4Initial`を`Ng8Bootstrap4Accordion`に変更しておきます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_07.png" width= "640" >


次に

`npm i`

と入力し、再度ライブラリをインストールします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_08.png" width= "640" >


このプロセスには若干時間を要します。

また、プロジェクトが起動できるかもチェックします。

`ng s -o`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_09.png" width= "640" >


ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_10.png" width= "640" >



ＯＫです。

## Accordionを追加

次に_ng-bootstrap_のサイトを開き、Accordionのサンプル・プログラムを参照します。

そのＵＲＬは、

`https://ng-bootstrap.github.io/#/home`

です。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_11.png" width= "640" >


ここで、`Demo`ボタンをクリックし、左側のメニューから`Accordion`をクリックします。


そして_Global configulation of accordions_を表示します。
この設定を取り込むことにします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_12.png" width= "640" >


まず、右上の`Code`ボタンをクリックし、そのソースを表示します。

まずＨＴＭＬ文をコピーします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_13.png" width= "640" >


VSCodeに戻り、`src/app`内の_app.component.html_ファイルを開きます。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_14.png" width= "640" >

コピーしたＨＴＭＬをここに貼り付けます。

また、プルダウン及びプルアップ関連の部分をコメントアウトします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_15.png" width= "640" >

ブラウザに戻り、TypeScriptのファイルを開きます。


まず追加が必要なimport部分をピーします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_16.png" width= "640" >

VSCodeに戻り、`src/app`内の_app.component.ts_ファイルを開きます。

コピーしたimport部分をここに貼り付けます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_17.png" width= "640" >


ブラウザに戻り、providers部分をコピーします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_18.png" width= "640" >

VSCodeに戻り、_app.component.ts_ファイルを開き、providers部分をここに貼り付けます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_19.png" width= "640" >

ブラウザに戻り、クラス内のコンストラクタ部分をコピーします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_20.png" width= "640" >


VSCodeに戻り、_app.component.ts_ファイルを開き、コンストラクタ部分をここに貼り付けます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_21.png" width= "640" >

## Accordionの表示

ここで、ブラウザに戻り、http://localhost:4200を開きます。

Accordionが表示されました。タイトル部分をクリックすると、その内容が表示・非表示されるのがわかります。

また、例えば_One_タイトルをクリックした後、_Two_タイトルをクリックすると_One_タイトルの内容が自動的に閉じられます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_22.png" width= "640" >


## Accordionのタイトルの色の変更

次にこれらの設定を変更していくことにします。

まず、タイトルバーの色を変更します。

VSCodeに戻り、_app.component.ts_ファイルを開き、

`config.type = 'danger'`

と変更します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_23.png" width= "640" >

ブラウザに戻り、表示を確認すると、タイトルバーの色が変更になりました。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_24.png" width= "640" >

ＯＫです。

## 他のタイトルバーの内容の非表示の変更

次に、これまでタイトルバーをクリックするごとに、他のタイトルバーの内容が非表示になっていましたが、これを変更することにします。


VSCodeに戻り、_app.component.ts_ファイルを開き、

`config.closeOthers = false`

に変更します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_25.png" width= "640" >


ブラウザに戻り、表示を確認すると、タイトルバーをクリックしても他のタイトルバーの内容は表示されたままとなりました。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Accordion_26.png" width= "640" >


ＯＫです。

## Reference

- "Angular8におけるBootstrap4環境の設定方法(Youtube)", 
<https://youtu.be/gFxuSi4IZjM>


- "How to set up Bootstrap 4 environment in Angular 8", 
<https://youtu.be/NoSkIVvf5o8>

- "Angular8におけるBootstrap4環境の設定方法(Qiita)", 
<https://qiita.com/SOhtsu/items/62253bb2309c9a4809fd>

- "Angular 7 Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1]", 
<https://www.techiediaries.com/angular-bootstrap-ui/>

- "Angular5, Angular6, Angular7 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>

- "Angular5, Angular6, Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>