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

(1) Installation of 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

Add css for bootstrap to style

(2) Add google material icon & add model

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

(3) Introduction of Navy Bar

While deleting Angular’s default page,
Implement navbar as a component.

Create / src / app / navbar folder
Below, place 3 files

/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

Add a component to a module so that it can be displayed

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

Import of NavbarComponent, addition of 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

Now the screen now shows [navbar component].
Next time we will implement navbar with ngx-bootstrap.

シェアする

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

フォローする