O2 Bootstrap4 Component

o2-bootstrap4-component Navigation Header Component Library for Bootstrap4

o2-bootstrap4-component-consumer is a sample consumer project for o2-bootstrap4-component .

Sample Program for setting config data, https://github.com/ohtsu/o2-bootstrap4-component-consumer/

Video Explanation (English), https://youtu.be/GvcCK-ZR864

Video Explanation (Japanese), https://youtu.be/uCErv1BJBXs

Overview

• o2-bootstrap4-component is an easy navigation header tool based on ng-bootstrap (version 1.0) for Angular5
• 8 main colors of Bootstrap are supported (dark,light,primary,secondary,success,info,warning,danger)
• You can change menu titles by config data.
• You can customize the log image by config data.
• You can customize the brand by config data.
• You can add dropdown lists.
• You can get click events of Buttons and so on.
• You can set routing data (routerLink) by config data.

Prerequisite

• node.js
• Typescript2
• Angular5
• ng-bootstrap

Installation of the sample consumer project

To download this consumer project, in your command line, type as follows:

$ git clone https://github.com/Ohtsu/o2-bootstrap4-component-consumer.git

Change into the project directory

$ cd o2-bootstrap4-component-consumer 

To install it, run simply:

$ npm install 

Start project

If you start local server as follows, you can get a navigation header of Bootstrap4 in your browser by accessing http://localhost:4200.

$ ng serve 

• First Page

Sample Config Data

You can change settings of the navigation bar by configData as follows.

  private initializeData() {
    this.configData = {
      "Color": {
        "baseColor": "warning",
      },
      "Logo": {
        "id": "logo",
        "name": "DigiPub",
        "visible": false,
        "imageUrl": "assets/images/DigiPub_logo_HighReso01.png",
        "rlink": "/",
      },
      "Brand": {
        "id": "brand",
        "name": "DigiPub",
        "visible": false,
        "rlink": "/",
      },
      "Search": {
        "id": "search",
        "name": "Search",
        "visible": true,
        "rlink": "/",
      },
      "Menu": [
        {
          "id": "m01",
          "dropdown": false,
          "submenu": [],
          "visible": true,
          "title": "Home",
          "rlink": "/",
        },
        {
          "id": "m02",
          "dropdown": false,
          "submenu": [],
          "visible": true,
          "title": "About",
          "rlink": "/about",
        },
        {
          "id": "m03",
          "dropdown": false,
          "submenu": [],
          "visible": true,
          "title": "User",
          "rlink": "/user",
        },
        {
          "id": "m04",
          "dropdown": true,
          "visible": true,
          "title": "Dropdown",
          "rlink": "/detail/child",
          "submenu": [
            {
              "id": "m0401",
              "dropdown": false,
              "visible": true,
              "title": "Home",
              "rlink": "/",
            },
            {
              "id": "m0402",
              "dropdown": false,
              "visible": true,
              "title": "About",
              "rlink": "/about",
            },
            {
              "id": "m0403",
              "dropdown": false,
              "visible": true,
              "title": "User",
              "rlink": "/user",
            },
          ],
        }
      ],
    };

  }

Color

Set your favorite color in Color.baseColor.

dark

light

primary

secondary

success

info

warning

danger

Logo Image

If you want to add your own logo image, you need to add your logo image file into assets/images directory.

Then edit Logo.imageUrl of the configData.

And set Logo.visible true.

Brand

If you want to add your brand, set Brand.visible true.

Then edit Brand.name and Brand.rlinkof the configData.

rlink means routerLink string.

And set Brand.visible true.

Dropdown List

If you want to add dropdown lists, set Menu.dropdown true as follows.

Then add submenu.

Its stricture is the same as Menu.

        {
          "id": "m04",
          "dropdown": true,
          "visible": true,
          "title": "Dropdown",
          "rlink": "/detail/child",
          "submenu": [
            {
              "id": "m0401",
              "dropdown": false,
              "visible": true,
              "title": "Home",
              "rlink": "/",
            },
            {
              "id": "m0402",
              "dropdown": false,
              "visible": true,
              "title": "About",
              "rlink": "/about",
            },
            {
              "id": "m0403",
              "dropdown": false,
              "visible": true,
              "title": "User",
              "rlink": "/user",
            },
          ],
        }

Searchbox

If you want to add searchbox, set Search.visible true.

app.component.html

If you set the configData, app.component.html structue is very simple as follows.

<o2-bootstrap4-component-header [configData]="configData" (buttonClick) ="navButtonClick($event)"></o2-bootstrap4-component-header>

<router-outlet></router-outlet>

Version

• o2-bootstrap4-component-consumer : 0.1.0
• o2-bootstrap4-component : 0.4.0
• Angular5 : 5.2.0
• TypeScript : 2.5.3
• @ng-bootstrap/ng-bootstrap : 1.0.0

Reference

• "Angular5 Custom Library: The definitive, step-by-step guide", https://www.udemy.com/draft/1461368/learn/v4/content

• "Angular5用 カスタムライブラリの作成", https://www.udemy.com/draft/1450138/learn/v4/content

Change Log

• 2018.3.22 version 1.0 uploaded

Copyright

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)