ngy-menu v0.0.3

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')<br/>
 Determines the element binding
  * `'context'` : binds a context menu
  * other values : correpond to direction parts.<br/>
 Concatenation of two elements of type `'Top'|'Bottom'|'Left'|'Right'` they indicates respectively the button side and in witch direction the menu will overlay.<br/>
 Exemple :

TopLeft RightBottom ┌──────────────┐ ┌─────────┬──────────────┐ │ Menu │ │ Buttom → Menu │ ├──────────────┤ └─────────┼↓─────────────┤ │ Menu ← │ │ Menu │ └────┬───────↑─┤ └──────────────┘ │ Buttom │ └─────────┘

* `[ngyMenuCellTemplate]` : `TemplateRef<any>` MenuItem renderer<br/>
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 :

```typescript
	...
	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>