Angular 4+ Slide Navigation Menu Component

Description:

An angular 4 hamburger slide navigation menu component for mobile and web. Requires Font Awesome iconic font.

Installation:

# NPM
$ npm install cuppa-ng2-slidemenu --save

Usage:

Import the component into your module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [AppComponent],
   imports: [SlideMenuModule]
})
export class AppModule {
}

In your html template.

<cuppa-slidemenu [menulist]="menuItemsArray" (open)="onMenuOpen()" (close)="onMenuClose()" (onItemSelect)="onItemSelect($event)"></cuppa-slidemenu>

Define your own menu data as these:

private menuItemsArray: any[] = [ 
   {"title":"Menu 1","link":"#"},
   {"title":"Menu 2","link":"#"},
   {"title":"Menu 3","link":"#",
   "subItems":[
     {"title":"Menu 3.1","link":"#"},
     {"title":"Menu 3.2","link":"#"},
    ]
   },
   {"title":"Menu 4","link":"#",
    "subItems":[
       {"title":"Menu 4.1","link":"#"},
       {"title":"Menu 42","link":"#"},
      ]
   },
];

public onMenuClose(){
  console.log("menu closed");
}
public onMenuOpen(){
  console.log("menu Opened");
}
private onItemSelect(item:any){
  console.log(item);
}

Preview: