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 で、モーダルが開き、
フォームの内容を変えると、即データが更新されていることが確認できると思います。
次回は、いよいよモデル作成にとりかかります。