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.
Discussion
New Comments
No comments yet. Be the first one!