ak-menu

Menu

Directives to create menu and context menu.

Getting started

Import MenuModule

import { MenuModule } from 'ak-menu';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, MenuModule],
  bootstrap: [AppComponent],
})

Basic directives configuration

Create your menu and add directives you want on you trigger. In this example we have two triggers : a button to display the menu on click, and a div to display the same menu on right click.

<button akMenuTrigger [menu]="menu">Open menu</button>
<div akContextMenuTrigger [menu]="menu" style="background-color: blue; height: 70px; width: 100px;"></div>
<div #menu style="border-radius: 5px; width: 200px; height: 200px; background: white;">My menu</div>

Advanced directives configuration

<button akMenuTrigger [menu]="menu" [appendTo]="hTMLElement" (onOpen)="onOpen()" (onClose)="onClose()" [options]="options">Open menu</button> <!-- Trigger 1 -->

import { Component } from '@angular/core';
import { MenuOptions } from 'ak-menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  hTMLElement: HTMLElement = document.body; // To append menu to body

  options: MenuOptions = {
    ...
  };

  onOpen(): void {
    console.log('Menu is opened');
  }

  onClose(): void {
    console.log('Menu is closed');
  }
}