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



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


2019.7.8


by **_Shuichi Ohtsu_** 

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


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

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

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



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

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

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

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

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

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

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

## 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" >



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

`gulp -m ForDialog`

と入力します。


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



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


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



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


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



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

そして

`code .`

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


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


VSCodeが起動しましたら、


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


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



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

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

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

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

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


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



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


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


次に

`npm i`

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


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

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

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

`ng s -o`

と入力します。


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


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


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



ＯＫです。


## ダイアログを追加

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

そのＵＲＬは、

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

です。


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


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


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


Modalのサンプルが表示されていますので、まずこの中の_Modal with default options_のサンプルプログラムをAngular8のプロジェクトに取り込むことにします。

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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


VSCodeに戻り、_app.component.ts_ファイルを開き、クラス内にコピーした部分をここに貼り付けます。

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


## ダイアログの表示


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

_Launch demo modal_ ボタンをクリックすると、ダイアログが表示されます。

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


_Date of birth_の入力欄では、デートピッカーが表示され、_Save_ボタンをクリックすると、ダイアログが閉じられ、画面上に`Closed with: Save click`と表示されます。

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

ＯＫです。

## 日付データの取得


以上がサンプルプログラムと同じ内容のものですが、せっかくデートピッカーで日付を指定しても、そのデータが取得できないのであれば意味がありません。

そこで、日付データを取得できるように修正することにします。

そこで、ngModelの双方向データバインディングを利用することにします。

それにはまず、`FormsModule`を新たにインポートする必要があります。

VSCodeに戻り、`app.module.ts`ファイルを開き、`FormsModule`をインポートします。

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


次に、`app.module.html`ファイルを開き、コメントアウト部分を削除します。

次に、日付を入力している部分に`[(ngModel)]`を指定して、入力データを取得できるようにします。

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


ブラウザに戻り、ダイアログを表示し、日付を指定します。

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

しかし、このままではデータが取得できているかわかりませんので、画面上にそのデータを表示するように修正します。

VSCodeに戻り、`app.module.html`ファイルを開き、

`<pre>{{ dateOfBirth | json}}</pre>`

を挿入します。これは取得したデータをjson形式で表示するという意味になります。

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


ブラウザに戻り、ダイアログを表示し、日付を指定します。指定した日付データが確かに取得できていることがわかります。

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

ＯＫです。


最後に、キャンセル・ボタンも追加します。

VSCodeに戻り、`modal.footer`部分を書き換えます。

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

ブラウザに戻り、確認します。キャンセル・ボタンが表示され、そのボタンをクリックした場合には、画面上に`Closed with: Cancel click`と表示されます。

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_38.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/>