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
https://valor-software.com/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.

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

· DI BsModalRef to close the modal.

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

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

(2) Load into module

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

· 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.

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

· 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.

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

· 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.

シェアする

  • このエントリーをはてなブックマークに追加

フォローする