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

(1)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を読み込みます。

(2)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 がまだ動かないので、
こちらも読み込みます。

(3)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の作成から離れて、
データサービスの作成を進めていきます。

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
(English) google_adsense