Showing posts with label ng2-ui-menu. Show all posts
Showing posts with label ng2-ui-menu. Show all posts
 ng2-ui-menu

ng2-ui-menu

October 10, 2017
Angular2 menu directive
Plunker Example: https://plnkr.co/edit/u6sihV?p=preview

Install

  1. install @ngui/menu
      $ npm install @ngui/menu --save  
    
  2. add map and packages to your systemjs.config.js.
     map['@ngui/menu'] = 'node_modules/@ngui/menu/dist/menu.umd.js';  
    
  3. import NguiMenuModule to your AppModule import { NgModule } from '@angular/core'; import { FormsModule } from "@angular/forms"; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { NguiMenuModule } from '@ngui/menu';
 @NgModule({  
   imports: [BrowserModule, FormsModule, NguiMenuModule],  
   declarations: [AppComponent],  
   bootstrap: [ AppComponent ]  
  })  
  export class AppModule { }  
For full example, please check out test directory to see the example of
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts.
add ngui-menu.css into your html
 <link rel="stylesheet" href="https://unpkg.com/menu/dist/ngui-menu.css" />  

Use it in your code

You are ready. use it in your template
  <ul ngui-menu>  
    <li> Menu Item 1 </li>  
    <li> Menu Item 2  
     <ul ngui-menu>  
      <li> Menu Item 2-1 </li>  
      <li> Menu Item 2-2   
       <ul ngui-menu>  
        <li> Menu Item 2-2-1 </li>  
        <li> Menu Item 2-2-2 </li>  
        <li> Menu Item 2-2-3 </li>  
       </ul>  
      </li>  
      <li> Menu Item 2-2 </li>  
     </ul>  
    </li>  
    <li> Menu Item 3 </li>  
   </ul>  


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.