ngx-menu-ui v0.0.2

Getting Started

ngx-menu-ui contains components to generate header, nav and footer from a JSON input. Contains code Bootstrap components, don't need to include original JS components but we are using CSS provided by Bootstrap.

Installation instructions

Install ngx-menu-ui from npm:

npm install ngx-menu-ui --save

Install dependencies from npm:

npm install @ng-bootstrap/ng-bootstrap@5.3.0 bootstrap@4.3.1 font-awesome@4.7.1

Add NgxMenuUiModule package to NgModule imports:

import { NgxMenuUiModule } from 'ngx-menu-ui';

@NgModule({
  ...
  imports: [NgxMenuUiModule,...]
  ...
})

You will need bootstrap and font-awesome styles in angular.json:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css",
    ...
]

Add component to your page:

<ngx-menu-ui 
  [menu]="menuJson"
  (action)="menuUIAction($event)"></ngx-menu-ui>

Input JSON

Json structure details

MenuUI from ngx-menu-ui/lib/objects/menu-ui.

{
    "brand": "My App Name",     // Application name to appear on header and footer 
    "hmenu": MenuOptions[],     // Nav items to appear in header like language, user profile and application switch
    "vmenu": MenuOptions[]      // Nav items to appear in side nav where app specific items appear
}

MenuOptions from ngx-menu-ui/lib/objects/menu-options.

{
    "id": "menuOption.key",             // Key for the nav item 
    "value": "menuOption.displayText"   // Display text value for the nav item 
    "icon": "menuOption.icon",          // Icon to be dispayed for the nav item (optional)
    "show": "menuOption.show",          // Show/Hide the nav item - based on flow context(optional)
    "disable": "menuOption.disabled",   // Disable the nav item - based on flow context(optional)
    "submenu": SubMenuOptions[]         // Nav subitems (optional)    
}

SubMenuOptions from ngx-menu-ui/lib/objects/sub-menu-options.

{
    "id": "menuSubOption.key",              // Key for the nav sub item 
    "value": "menuSubOption.displayText",   // Display text value for the nav sub item 
    "show": "menuSubOption.show",           // Show/Hide the nav sub item - based on flow context(optional)
    "disable": "menuSubOption.disabled"     // Disable the nav sub item - based on flow context(optional)
}

Note: Last MenuOptions of hmenu key in JSON will always be considered as LoggedIn profile options Note: First SubMenuOptions in last MenuOptions of hmenu key in JSON will always be considered as LoggedIn profile name

Menu JSON sample with available options:

{
  "brand": "My App Name",
  "hmenu": [
    {
      "id": "APP_OPTIONS_APPS",
      "value": "APP_OPTIONS_APPS",
      "icon": "fa fa-th-large",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_1",
          "value": "My App 1",
          "show": true,
          "disable": false
        },
        {
          "id": "APP_2",
          "value": "My App 2",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "APP_OPTIONS_LANGUAGE",
      "value": "APP_OPTIONS_LANGUAGE",
      "icon": "fa fa-language",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_OPTIONS_ENG",
          "value": "English",
          "show": true,
          "disable": false
        },
        {
          "id": "APP_OPTIONS_FIN",
          "value": "Spanish",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "APP_OPTIONS_PROFILE",
      "value": "TS",            // logged in short user name
      "icon": "fa fa-user",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_OPTIONS_USER",
          "value": "TONY STARK",    // logged in full user name
          "show": true,
          "disable": false,
          "type": "card"
        },
        {
          "id": "APP_OPTIONS_LOGOUT",
          "value": "Logout",
          "show": true,
          "disable": false
        }
      ]
    }
  ],
  "vmenu": [
    {
      "id": "menu.item1",
      "value": "Menu Item 1",
      "icon": "fa fa-cog",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "menu.subitem1",
          "value": "Menu Subitem 1",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem5",
          "value": "Menu Subitem 5",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem2",
          "value": "Menu Subitem 2",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "menu.item2",
      "value": "Menu Item 2",
      "icon": "fa fa-code",
      "show": true,
      "disable": false
    },
    {
      "id": "menu.item3",
      "value": "Menu Item 3",
      "icon": "fa fa-cogs",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "menu.subitem3",
          "value": "Menu Subitem 3",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem4",
          "value": "Menu Subitem 4",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem6",
          "value": "Menu Subitem 6",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "menu.item4",
      "value": "Menu Item 4",
      "icon": "fa fa-cogs",
      "show": true,
      "disable": false,
    }
  ]
}

Attributes and Methods

Attributes

Methods

Upcoming enhancements

1. Theme support
2. Add company logo in header
3. Search bar in header
4. Tag cloud support in side nav