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

Open the form modally from the navbar so that you can edit the data.

ngx-bootstrap – Modals

This time, I will proceed by the method written in the Component of Service examples.
Be aware that you need to add a component to the entryComponents of NgModule.

(1) Modals Creating modal components

First of all, we will create a component of the form to open with modal.


· DI BsModalRef to close the modal.


· (Click) = “bsModalRef.hide ()" is processing to close the modal.
· [(NgModel)] = “data.app_type" to define two-way binding.

(2) Load into module


· In modal open form, we use FormModule to use interactive binding.
· ModalModule loaded.
· Read ModalDataComponent. Also, be sure to add it to declarations and also add it to entryComponents.


· Import BsModalService, BsModalRef, DataService, ModalDataComponent.
Added member variable bsModalRef
· BsModalService, dataService to DI
· Define each menu method. Other than dataSetting to be implemented this time is empty.
· In the dataSetting method, describe the process of passing data while opening a modal.


· Modified to call methods as (click) = “createModel ()" from each menu

This opens a modal in the Setting – Data Setting of the menu,
If you change the contents of the form, I think you can confirm that the data is being updated immediately.

Next time, we will finally start building models.