Adding a class to active "parent" items for submenus

README.md

@@ -1,6 +1,21 @@
 # ngx-contextmenu
 
 A context menu built with Angular (6) inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu).  Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. [Demo](https://isaacplmann.github.io/ngx-contextmenu/) [Stackblitz example](https://stackblitz.com/edit/ngx-contextmenu-example)
+Originally created by [Isaac Mann]([email protected]), just slightly edited by me.
+Changes are:
+- Option to enable trace of selection path
+
+When selecting a subMenu item the parent item will stay highlighted.
+
+Usage:
+In your module import set the highlightParentItems option to true:
+
+```js 
+    ContextMenuModule.forRoot({ highlightParentItems: true }),
+```
+
+ToDo:
+The component seems to "remember" the last selected item, so when the menu is closed and reopend the last selected menu  item is still highlighted.
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-contextmenu-platform",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "An Angular component to show a context menu on an arbitrary component",
   "keywords": [
     "angular2",

projects/ngx-contextmenu/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ngx-contextmenu",
-  "version": "5.2.0",
+  "name": "@avdbrink/ngx-contextmenu",
+  "version": "5.2.1",
   "description": "An Angular component to show a context menu on an arbitrary component",
   "keywords": [
     "angular2",
@@ -11,11 +11,11 @@
     "ng2",
     "ng2-contextmenu"
   ],
-  "author": "Isaac Mann <isaacplmann@gmail.com>",
+  "author": "Arno van den Brink <avdbrink@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+ssh://[email protected]/isaacplmann/ngx-contextmenu.git"
+    "url": "git+ssh://[email protected]/avdbrink/ngx-contextmenu.git"
   },
   "peerDependencies": {
     "@angular/cdk": ">=6.0.0 <9.0.0",

projects/ngx-contextmenu/src/lib/contextMenu.component.ts

@@ -59,6 +59,7 @@ export class ContextMenuComponent implements OnDestroy {
   @Input() public menuClass = "";
   @Input() public autoFocus = false;
   @Input() public useBootstrap4 = false;
+  @Input() public highlightParentItems = false;
   @Input() public disabled = false;
   @Output() public close: EventEmitter<CloseContextMenuEvent> = new EventEmitter();
   @Output() public open: EventEmitter<IContextMenuClickEvent> = new EventEmitter();
@@ -81,6 +82,7 @@ export class ContextMenuComponent implements OnDestroy {
     if (options) {
       this.autoFocus = options.autoFocus;
       this.useBootstrap4 = options.useBootstrap4;
+      this.highlightParentItems = options.highlightParentItems;
     }
     this.subscription.add(_contextMenuService.show.subscribe(menuEvent => {
       this.onMenuEvent(menuEvent);

projects/ngx-contextmenu/src/lib/contextMenu.item.directive.ts

@@ -16,6 +16,7 @@ export class ContextMenuItemDirective implements Highlightable {
 
   public currentItem: any;
   public isActive = false;
+  public isActiveParent = false;
   public get disabled() {
     return this.passive ||
       this.divider ||
@@ -38,6 +39,13 @@ export class ContextMenuItemDirective implements Highlightable {
     this.isActive = false;
   }
 
+  public setActiveParentStyles(): void {
+    this.isActiveParent = true;
+  }
+  public setInActiveParentStyles(): void {
+    this.isActiveParent = false;
+  }
+
   public triggerExecute(item: any, $event?: MouseEvent | KeyboardEvent): void {
     if (!this.evaluateIfFunction(this.enabled, item)) {
       return;

projects/ngx-contextmenu/src/lib/contextMenu.options.ts

@@ -1,4 +1,5 @@
 export interface IContextMenuOptions {
   useBootstrap4?: boolean;
   autoFocus?: boolean;
+  highlightParentItems?: boolean;
 }

projects/ngx-contextmenu/src/lib/contextMenuContent.component.ts

@@ -42,6 +42,11 @@ const ARROW_LEFT_KEYCODE = 37;
     .hasSubMenu:before {
       content: "\u25B6";
       float: right;
+    }
+    .activeParent {
+    text-decoration: none;
+      color: #262626;
+      background-color: #f5f5f5;
     }`,
   ],
   template:
@@ -53,6 +58,7 @@ const ARROW_LEFT_KEYCODE = 37;
             [attr.role]="menuItem.divider ? 'separator' : undefined">
           <a *ngIf="!menuItem.divider && !menuItem.passive" href [class.dropdown-item]="useBootstrap4"
             [class.active]="menuItem.isActive && isMenuItemEnabled(menuItem)"
+            [class.activeParent]="highlightParentItems && menuItem.isActiveParent && isMenuItemEnabled(menuItem)"
             [class.disabled]="useBootstrap4 && !isMenuItemEnabled(menuItem)" [class.hasSubMenu]="!!menuItem.subMenu"
             (click)="onMenuItemSelect(menuItem, $event)" (mouseenter)="onOpenSubMenu(menuItem, $event)">
             <ng-template [ngTemplateOutlet]="menuItem.template" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
@@ -86,6 +92,7 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
 
   public autoFocus = false;
   public useBootstrap4 = false;
+  public highlightParentItems = false;
   private _keyManager: ActiveDescendantKeyManager<ContextMenuItemDirective>;
   private subscription: Subscription = new Subscription();
   constructor(
@@ -98,6 +105,7 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     if (options) {
       this.autoFocus = options.autoFocus;
       this.useBootstrap4 = options.useBootstrap4;
+      this.highlightParentItems = options.highlightParentItems;
     }
   }
 
@@ -207,6 +215,9 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
   public onOpenSubMenu(menuItem: ContextMenuItemDirective, event?: MouseEvent | KeyboardEvent): void {
     const anchorElementRef = this.menuItemElements.toArray()[this._keyManager.activeItemIndex];
     const anchorElement = anchorElementRef && anchorElementRef.nativeElement;
+    if (this.highlightParentItems) { 
+      this.menuItems.forEach(item => item.isActiveParent = (item === menuItem && menuItem.subMenu) );
+    }
     this.openSubMenu.emit({
       anchorElement,
       contextMenu: menuItem.subMenu,

src/demo/app.module.ts

@@ -18,6 +18,7 @@ import { ChildTwoComponent } from './child2.component';
     ContextMenuModule.forRoot({
       autoFocus: true,
       // useBootstrap4: true,
+      highlightParentItems: true
     }),
     RouterModule.forRoot([
       {