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

(1) Create navbar based on bootstrap template

bootstrap – navbar


Menu created below

– 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

Add ngx-bootstrap – Dropdowns to the module


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


· 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

Add ngx-bootstrap – CollapseModule to the module


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


· Add member variable isCollapsed


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.