Angularで作るER DIAGRAM TOOL – 第三回 ngx-bootstrap の BsDropdownModule と CollapseModule によるnavbarの実装
（１）bootstrapのテンプレートをもとにnavbarを作成する
■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
メニューは、下記で作成
ER-DIAGRAM-TOOL
– Edit
— Create Model
– Export
— Export JSON
– Setting
— Data Setting
bootstrapのjsを読み込んでいないので、
このままだとドロップダウンが動きません。
なので、ngx-bootstrapを読み込みます。
（２）ngx-bootstrap – Dropdowns の読み込みと適用
■ngx-bootstrap – Dropdowns
https://valor-software.com/ngx-bootstrap/#/dropdowns
モジュールに ngx-bootstrap – Dropdowns を追加する
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/811ffc799c21a55775d59b626891537ab0358cfb#diff-fc6b22833aeaf77f8440c4970ade705e
・BsDropdownModuleをインポート
・imports に BsDropdownModule.forRoot() を追加
/src/app/navbar/navbar.component.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/811ffc799c21a55775d59b626891537ab0358cfb#diff-017b6e710461134e5b4c9fd34aeabe7c
・不要な属性を削除
・上位liに「dropdown」追加
・ドロップダウンを開くaタグに「dropdownToggle」追加
・ドロップダウンで開く内容のdivタグに「*dropdownMenu」を追加
これでドロップダウンが動くようになりました。
しかし、スマホ用の Collapse がまだ動かないので、
こちらも読み込みます。
（３）ngx-bootstrap – CollapseModule の読み込みと適用
■ngx-bootstrap – Collapse
https://valor-software.com/ngx-bootstrap/#/collapse
モジュールに ngx-bootstrap – CollapseModule を追加する
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-fc6b22833aeaf77f8440c4970ade705e
・CollapseModuleをインポート
・imports に CollapseModule.forRoot() を追加
/src/app/navbar/navbar.component.ts を修正
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-12468dba4acc93d6788c4f72b2b89a70
・メンバ変数 isCollapsed を追加
/src/app/navbar/navbar.component.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-017b6e710461134e5b4c9fd34aeabe7c
・メニュを開閉するボタンに (click)="isCollapsed = !isCollapsed" を追加。
これにより、クリックで isCollapsed が切り替わります。
・開くメニュー側に [collapse]="isCollapsed" を追加
これで、スマホ用のメニューが開くようになりました。
次回は、いったんnavbarの作成から離れて、
データサービスの作成を進めていきます。