Angularで作るER DIAGRAM TOOL - 第五回　ngx-bootstrap - Modals を使って、data 編集機能を実装

navbarからモーダルでフォームを開き、dataを編集できるようにします。

■ngx-bootstrap - Modals
https://valor-software.com/ngx-bootstrap/#/modals

今回は、Service examplesのComponentに書いてある方法で進めます。
その際、NgModuleのentryComponentsにコンポーネントを追加する必要があることに気を付けましょう。

（１）Modals モーダルコンポーネントの作成

まずは、modalで開くフォームのコンポーネントを作ります。

/src/app/modal-data/modal-data.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/49cc5251c0fe05d01a378150dbea970f2ae5292c#diff-6c652fa972bc4950cc49fa13685b044f

・モーダルを閉じるために、BsModalRefをDIしてます。

/src/app/modal-data/modal-data.component.html
https://github.com/dog-ears/er-diagram-tool/commit/49cc5251c0fe05d01a378150dbea970f2ae5292c#diff-4a3e1aab3610dc87b97cca9d3478bdbc

・ (click)="bsModalRef.hide()"が、モーダルを閉じる処理になります。
・[(ngModel)]="data.app_type" で、双方向バインディングを定義してます。

（２）モジュールに読み込み

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/49cc5251c0fe05d01a378150dbea970f2ae5292c#diff-fc6b22833aeaf77f8440c4970ade705e

・モーダルで開くフォームで、双方向バインディングを使うため、FormModuleを読み込んでます。
・ModalModuleを読み込みました。
・ModalDataComponentを読み込みました。また、declarationsに追加するとともに、entryComponentsにも追加するのを忘れないようにしましょう。

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/49cc5251c0fe05d01a378150dbea970f2ae5292c#diff-12468dba4acc93d6788c4f72b2b89a70

・BsModalService、BsModalRef、DataService、ModalDataComponentをimportします。
・メンバー変数bsModalRefを追加
・bsModalService、dataServiceをDI
・メニューの各メソッドを定義。今回実装するdataSetting以外は空です。
・dataSettingメソッドで、モーダルを開きつつ、dataを渡す処理を記述。

/src/app/navbar/navbar.component.html
https://github.com/dog-ears/er-diagram-tool/commit/49cc5251c0fe05d01a378150dbea970f2ae5292c#diff-017b6e710461134e5b4c9fd34aeabe7c

・各メニューから(click)="createModel()"のようにして、メソッドを呼び出すように修正

これでメニューのSetting - Data Setting で、モーダルが開き、
フォームの内容を変えると、即データが更新されていることが確認できると思います。

次回は、いよいよモデル作成にとりかかります。