Made with Angular ER DIAGRAM TOOL – #3 Implementation of navbar with BsDropdownModule and CollapseModule of ngx – bootstrap

(1) Create navbar based on bootstrap template

bootstrap – navbar
https://getbootstrap.com/docs/4.0/components/navbar/

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

Menu created below

ER-DIAGRAM-TOOL
– Edit
— Create Model
– Export
— Export JSON
– Setting
— Data Setting

Since bootstrap’s js has not been loaded,
If this continues, the dropdown does not work.

So load ngx – bootstrap.

(2) ngx – bootstrap – load and apply Dropdowns

ngx-bootstrap – Dropdowns
https://valor-software.com/ngx-bootstrap/#/dropdowns

Add ngx-bootstrap – Dropdowns to the module

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

・import BsDropdownModule
・add BsDropdownModule.forRoot() to imports

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

· Delete unnecessary attributes
· “Dropdown” added to upper li
· Open dropdown Add ‘dropdownToggle’ to a tag
· “* dropdownMenu” is added to the div tag of contents to be opened in drop down

Dropdown now works.

However, since Collapse for smartphones still does not work,
Also load it.

(3) ngx – bootstrap – load and apply CollapseModule

ngx-bootstrap – Collapse
https://valor-software.com/ngx-bootstrap/#/collapse

Add ngx-bootstrap – CollapseModule to the module

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

· Import CollapseModule
· Added CollapseModule.forRoot () to imports

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

· Add member variable isCollapsed

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

Added (click) = “isCollapsed =! IsCollapsed” to the button for opening / closing the menu.
This will switch isCollapsed by clicking.

· Added [collapse] = “isCollapsed” to open menu side

With this, the menu for smartphone is now opened.
Next time, once away from creating navbar,
We will continue to create data services.

Made with Angular ER DIAGRAM TOOL – #2 installation of ngx – bootstrap, addition of google material icon and preparation of navbar component

(1) Installation of ngx-bootstrap

■ngx-bootstrap
https://valor-software.com/ngx-bootstrap/#/

npm install ngx-bootstrap bootstrap --save

/.angular-cli.json
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-c78e1fddb79799856010780b5453a800

Add css for bootstrap to style

(2) Add google material icon & add model

/src/index.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-e249faefed5757034596c5096d33dab6

(3) Introduction of Navy Bar

While deleting Angular’s default page,
Implement navbar as a component.

Create / src / app / navbar folder
Below, place 3 files

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

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

/src/app/navbar/navbar.component.css

Add a component to a module so that it can be displayed

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

Import of NavbarComponent, addition of Declarations

/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-5c26d2c8f8838f32ace87fdecd6344ea

/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-465e9f13ce23ec4a1e366935273fdbb6

Now the screen now shows [navbar component].
Next time we will implement navbar with ngx-bootstrap.

Made with Angular ER DIAGRAM TOOL – #01 install Angular to Cloud 9

Scaffold package for Laravel which I develop on my own,
As complicated and complicated to write JSON data,
Apart from studying Angular, I decided to make ER diagram making tool.

— Development environment —
IDE : Cloud9
development language : Typescript
Framework : Angular v5.2.3
CSS Framework : bootstrap, ngx-bootstrap
JS library : jsplumb Community Edition

— Functional requirement —
-Create, modify and delete Model (Table)
-Create, modify, delete and rearrange Schema (Column)
-Create / delete Relationship (one-to-many or many-to-many)
*Delete one-to-many by deleting target Schema
*Delete many-to-many by deleting pivot model
-Exporting JSON

— git repository (updated as needed) —
https://github.com/dog-ears/er-diagram-tool

Because I am a beginner Angular,
I am thinking to make commentary easy to understand for beginners.

Let’s first install Angular on Cloud 9.

Continue reading “Made with Angular ER DIAGRAM TOOL – #01 install Angular to Cloud 9”

【update history】 crud-d-scaffold v2.6.0 – Add varidation and keep input data(2017.12.05)

Hello.
I’m dog-ears.

Validation function is implemented in crud-d-scaffold,
We also modified to hold Input data.

■github – dog-ears/crud-d-scaffold
https://github.com/dog-ears/crud-d-scaffold

Continue reading “【update history】 crud-d-scaffold v2.6.0 – Add varidation and keep input data(2017.12.05)”

【update history】 crud-d-scaffold v2.5.1 – Add many-to-many relationship(2017.11.02)

Hello.
I’m dog-ears.

I added a many to many relationship to crud-d-scaffold,
I will introduce you.

■github – dog-ears/crud-d-scaffold
https://github.com/dog-ears/crud-d-scaffold

Continue reading “【update history】 crud-d-scaffold v2.5.1 – Add many-to-many relationship(2017.11.02)”