NgyMenu
A button and contextual menu for Angular 9+.
NgyMenu is a directive binding to on any kind of element.
- Customisable.
- orientation.
- menu list css.
- menu item rendering.
- Dynamic
- The menu data is proceeded at instanciation.
- Menu lists and items can be callbacks.
Menu
Install
npm install ngy-menu
Import
Import into your module
...
import { NgyMenuModule } from 'ngy-menu';
...
@NgModule({
...
imports: [
...
NgyMenuModule,
...
],
...
})
export class MyModule { }
Quick start
In your component :
import { MenuDataInput,Binding } from 'ngy-menu';
...
export class Mycomponent{
...
// menu structure
menuData:MenuDataInput=[
{
label:'vlad'
},
{
label:'children here',
children:[
{label:'suubbb'},
{label:'yo'},
]
},
{
label:'click me',
action:(menu)=>{
alert('hi!');
menu.close();
}
},
];
...
In your template :
...
<div
class="context-menu-target"
[ngyMenu]="menuData"
[ngyMenuBinding]="'context'"
>
<span>Contextual menu here</span>
</div>
<div
class="button-menu-target"
[ngyMenu]="menuData"
[ngyMenuBinding]="'BottomRight'"
>
<span>Button menu here</span>
</div>
...
Entries
-
[ngyMenu]
:MenuDataInput
The ngy-menu directive.
Defines the menu structure.
// defines a menu item
type MenuItemData={
label:string;
icon?:string;
action?:Function,
children?:MenuDataInput;
data?:any;
};
// defines or generates a menu item
type MenuItemDataInput=(dat?:any)=>MenuItemData|MenuItemData;
// defines a menu list
type MenuData=MenuItemDataInput[];
// defines or generates a menu lista menu list
type MenuDataInput=(dat?:any)=>MenuData|MenuData;
-
[ngyMenuBinding]
:'context'|'TopLeft'|'TopRight'|'LeftTop'|'RightTop'|'LeftBottom'|'RightBottom'|'BottomLeft'|'BottomRight'
(default='RightBottom')
Determines the element binding-
'context'
: binds a context menu - other values : correpond to direction parts.
Concatenation of two elements of type'Top'|'Bottom'|'Left'|'Right'
they indicates respectively the button side and in witch direction the menu will overlay.
Exemple :
-
TopLeft RightBottom
┌──────────────┐ ┌─────────┬──────────────┐
│ Menu │ │ Buttom → Menu │
├──────────────┤ └─────────┼↓─────────────┤
│ Menu ← │ │ Menu │
└────┬───────↑─┤ └──────────────┘
│ Buttom │
└─────────┘
-
[ngyMenuCellTemplate]
:TemplateRef<any>
MenuItem renderer
Overrides the default menu item. -
[ngyMenuOptions]
:-
listClass
:string
overrides the default menu list css class -
autoClose
:boolean
Automaticly close the menu when clicking a leaf element. -
on
:Record<MenuEvents,Function>
callbacks for menu events. -
binding
:'TopLeft'|'TopRight'|'LeftTop'|'RightTop'|'LeftBottom'|'RightBottom'|'BottomLeft'|'BottomRight'
specify 2nd level orientation.
-
Exemple menuData
More exhaustive exemple of settings :
In your component :
...
menuData=[
{
label:'label 1'
},
{
label:'some children',
children:[
{
label:'vlad'
},
{
label:'sub children',
children:[
{label:'suubbb'},
{label:'yo'},
]
},
{
label:'click me',
action:(menu)=>{
alert('hi!');
menu.close();
}
},
]
},
()=>({
label:'random children',
children:()=>(Array(Math.ceil(Math.random()*10)).fill('').map((v,i)=>({
label:'element '+i,
action:(menu)=>{
alert('You clicked element '+i);
menu.close();
}
})))
}),
];
menuOptions={
// autoClose:true,
listClass:'my-menu-list',
on:{
'click':((mio)=>alert('clicked'+mio.itemData.label))
}
};
...
In your template :
<div
class="context-menu-target"
[ngyMenu]="menuData"
[ngyMenuBinding]="'context'"
[ngyMenuCellTemplate]="cellTemplate"
[ngyMenuOptions]="menuOptions"
>
<span>Contextual menu here</span>
</div>
<ng-template
#cellTemplate
let-icon="icon"
let-label="label"
let-childrenCount="childrenCount"
let-data="data"
>
<div class="my-menu-item">
<span *ngIf="icon" class="ngy-menu-icon" [innerHTML]="icon"></span>
<span class="ngy-menu-label">{{label}}</span>
<span *ngIf="childrenCount" class="ngy-menu-expander">▶</span>
</div>
</ng-template>