Angularで作るER DIAGRAM TOOL - 第二回 ngx-bootstrapのインストール、google material iconの追加と、navbarコンポーネントの準備

（１）ngx-bootstrapのインストール

■ngx-bootstrap
https://valor-software.com/ngx-bootstrap/#/

npm install ngx-bootstrap bootstrap --save

/.angular-cli.json を修正
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-c78e1fddb79799856010780b5453a800

スタイルに、bootstrapのcssを追加

（２）google material icon を追加＆モデルの追加

index.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-e249faefed5757034596c5096d33dab6

（３）ナビバーの導入

Angularのデフォルトページを削除しつつ、
navbarをコンポーネントとして実装します。

/src/app/navbarフォルダを作成
以下、3ファイルを配置

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-12468dba4acc93d6788c4f72b2b89a70

/src/app/navbar/navbar.component.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-017b6e710461134e5b4c9fd34aeabe7c

/src/app/navbar/navbar.component.css

コンポーネントをモジュールに追加して、表示できるようにする

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-fc6b22833aeaf77f8440c4970ade705e

NavbarComponentのimport、およびDeclarationsの追加

/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-5c26d2c8f8838f32ace87fdecd6344ea

/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-465e9f13ce23ec4a1e366935273fdbb6

これで、画面には[navbar component]と表示されるようになりました。
次回は、ngx-bootstrapでnavbarを実装していきます。