Angularで作るER DIAGRAM TOOL – 第八回 スキーマの作成・編集・削除機能の実装

Basically it is almost the same as model.

(1) Create a form modal to register / edit schema.


· DataService.addSchema () is not implemented yet


· It is long because of many items, but what you are doing is simple.

(2) Create a component for schema to be displayed on the left column.


· Input () first, @ Input () last is the flag whose current schema’s order is the first (or last). Use it to display / hide the rearrangement arrow.
· DataService.deleteSchema (), dataService.moveSchema () not implemented yet


· Each part is displayed / hidden by is_pivot, first, last.

(3) Update dataService


· Implemented uninstalled addSchema (), deleteSchema (), moveSchema ()
· Data.getModelById () is not implemented yet

Since it is necessary to acquire the parent model from the parent_id of schema with addSchema () and deleteSchema () of the above dataService,
Implement it in the data class.


(4) Reading into module

Added SchemaComponent, ModalSchemaComponent to module


(5) Call from model




· Import of ModalSchemaComponent
· Implementation of addSchema ()


Implementation of getElementbyId ()

Finally adjust style


· Material icon cursor to pointer. (However, if disable class is attached, make it translucent by default.)


Although I felt that the explanation was going too long, I finished implementation of schema.
Next time we will be implementing Jsplumb.