Made with Angular ER DIAGRAM TOOL – #3 Implementation of navbar with BsDropdownModule and CollapseModule of ngx – bootstrap

(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.

Made with Angular ER DIAGRAM TOOL – #2 installation of ngx – bootstrap, addition of google material icon and preparation of navbar component

(1) Installation of ngx-bootstrap


npm install ngx-bootstrap bootstrap --save


Add css for bootstrap to style

(2) Add google material icon & add model


(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




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


Import of NavbarComponent, addition of Declarations



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

Made with Angular ER DIAGRAM TOOL – #01 install Angular to Cloud 9

Scaffold package for Laravel which I develop on my own,
As complicated and complicated to write JSON data,
Apart from studying Angular, I decided to make ER diagram making tool.

— Development environment —
IDE : Cloud9
development language : Typescript
Framework : Angular v5.2.3
CSS Framework : bootstrap, ngx-bootstrap
JS library : jsplumb Community Edition

— Functional requirement —
-Create, modify and delete Model (Table)
-Create, modify, delete and rearrange Schema (Column)
-Create / delete Relationship (one-to-many or many-to-many)
*Delete one-to-many by deleting target Schema
*Delete many-to-many by deleting pivot model
-Exporting JSON

— git repository (updated as needed) —

Because I am a beginner Angular,
I am thinking to make commentary easy to understand for beginners.

Let’s first install Angular on Cloud 9.

Continue reading “Made with Angular ER DIAGRAM TOOL – #01 install Angular to Cloud 9”

How to run QUICKSTART of Angular2 on laravel5.2 at Cloud9

【2016/10/21 add postscript】

Before I knew it, Angular2 had been released.
On this occasion, I think let’s start the learning of Angular2.
By the way, I don’t know AngularJS1 little.

There is no value to traced the tutorial of official page normally.
Then I’ll try to run the QUICKSTART of Angular2 on laravel.

■Angular2 – QUICKSTART

Complete source is as follows.


I use Cloud9 as development environment
Let’s go!

Continue reading “How to run QUICKSTART of Angular2 on laravel5.2 at Cloud9”