ngx-vertical-sortable-menu

Vertical sorting drag menu based on angular6 +

Overview

How to use it?

npm i -S ngx-vertical-sortable-menu

Import the NgxVerticalSortableMenuModule in your app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxVerticalSortableMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Use the NgxVerticalSortableMenuComponent by placing:

  <div style="height: 100vh;border-right: 1px solid #cccccc;width: 240px;">
    <ngx-vertical-sortable-menu
    (closeEmit)="closeEmit($event)"
    (clickEmit)="clickEmit($event)"
    (menuSort)="menuSort($event)"
    [menuList]="menus"
    liHeight="40"></ngx-vertical-sortable-menu>
  </div>

Demo

demo

API

interface

• MenuItem:

type iconTy = 'class';
interface MenuItem {
    name: string;
    url: string;
    icon?: string;
    id?: string | number;
    iconType?: iconTy;
}

Input &Output

Property	Description	Type	Default
[menuList]	An array of the MenuItem type	MenuItem[]	-
[liHeight]	Menu line height	number	-
(clickEmit)	Menu click event callback function.	EventEmitter<MenuItem>	-
(closeEmit)	Menu close event callback function.	EventEmitter<MenuItem>	-
(menuSort)	Returns the current data when dragged and sorted.	EventEmitter<MenuItem[]>	-