Angularで作るER DIAGRAM TOOL – 第三回 ngx-bootstrap の BsDropdownModule と CollapseModule によるnavbarの実装

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