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


October 10, 2017
Angular2 menu directive
Plunker Example:


  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';
   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="" />  

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>  
      <li> Menu Item 2-2 </li>  
    <li> Menu Item 3 </li>  

Note: Special thanks to ng2-ui


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