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.