Angularで作るER DIAGRAM TOOL – 第六回 モデルの追加機能を実装

This time, we implement the function to add model of data.

(1) Open a new model form modal from navbar

First, create a modal component to be opened when you press Edit – Create Model in navbar


· DI dataService.
· By member variable mode, we will use the form for both creation and editing.
· The method create only closes the modal for the time being.


Do not forget to register new components and services in the module.
Also do not forget to add entryComponents.


Next, we implemented a function to open a modal in navbar


· ModalModelComponent, import a Model class import
· While opening a modal with (), passing mode and a new model with initialState.

The modal now opens.
Of course, pressing Create will only close the modal.

(2) Add model addition function to dataService


· Call addServer’s addModel (unimplemented)


· With getNewModelId () in the data class, while passing the new ID, add the passed model to the data.

Now, when you look at the information column on the right column, models are added.

Next time, we will modify the model addition so that it will be reflected in the left column area as well.