• I.e., cell:contextmenu, link:contextmenu, element:contextmenu, and blank:contextmenu
  • cell=vertex+edge; element=vertex; link=edge; blank=paper-cell

• ng add ng-zorro-antd@~8.5.2 for existing project as needed

• Change port by ng serve --poll=2000 --port=TARGET_PORT as needed

• Services, components, and predefined context menus
• Shoulde be auto complete if using IDE

• menu: ContextMenu: For HTML rendering
• onClick(id: string, $eventOnMenuItem?: MouseEvent): void: Callback events for menu items clicking
  • eventOnMenuItem: The mouse click event ($event) for menu item (left click)
• disableMenuItem(menuType: MenuType, targetId: string, setAsDisabled?: boolean): boolean: Set menu item status
  • setAsDisabled: true=disabled, false=enabled, leave empty=toggle
• bind(contextMenuInfo: ContextMenuInfo): void
  • Bind target paper, nzContextMenuService, and Menu Template (@ViewChild)
• unbind(menuType?: MenuType): void: Reserved. Not used in the demo
  • leave empty=unbind all 4 kinds of bound events
• bindContextMenuWithEvents(menuType: MenuType, contextMenu?: ContextMenu, clickEvents?: ClickEvents)
  • (Re)bind predefined context menus and events

• private extractIdAndEvent(contextMenu: ContextMenu): ClickEvents
  • Extract leaf menu items (as expected events) for the following binding check

*.component.html

• Remember to put the placeholder for contextmenu
  • Set menu item as unselectable and disable right click on menu items (return false)
  • Bind click events and allow using innerHTML
• Copy following html code into your *.component.html

  <nz-dropdown-menu #contextMenuPlaceholder="nzDropdownMenu">
    <ul nz-menu class="unselectable" oncontextmenu="return false;">
      <ng-container *ngTemplateOutlet="recursiveContextMenu; context:{ $implicit: contextMenu.menu }"></ng-container>
      <ng-template #recursiveContextMenu let-menuItems>
        <ng-container *ngFor="let item of menuItems">
          <li *ngIf="item.children?.length > 0; else leaf" nz-submenu [nzTitle]="item.title || item.id" [nzDisabled]="item.disabled">
            <ul class="unselectable" oncontextmenu="return false;">
              <ng-container *ngTemplateOutlet="recursiveContextMenu; context:{ $implicit: item.children }"></ng-container>
            </ul>
          </li>
          <ng-template #leaf>
            <li nz-menu-item (click)="contextMenu.onClick(item.id, $event)"
                [nzDisabled]="item.disabled" [innerHTML]="item.title || item.id"></li>
          </ng-template>
        </ng-container>
      </ng-template>
    </ul>
  </nz-dropdown-menu>

*.component.ts

• See prerequisite 2 & 3
  • Note that you have to bind contextMenuComponent within ngAfterViewInit()

yourMenus.ts

• Declare context menus and corresponding events and bind them to the controller
• Import and assign as public for HTML rendering

*.pollution.scss

• You CANNOT use style in innerHTML due to the security policies of Angular
  • Therefore, you have to use class instead
  • However, you will face ViewEncapsulation issue in angular
  • Workaround: Declare those *.pollution CSS explicitly, creat an entry point, and import it in styles.scss