ngy-menu

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
• Import
• Quick start
• Entries

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">&#9654;</span>
		</div>
	</ng-template>