How to customize nebulars menu component template (@nebular/theme": 11, angular 15+)

I have a dynamic list of categories, with subcategories. Nebular's menu convert all parents instantly to toggles, erasing all props. Only last level childs mantain router.link prop.

I need to tweak the template from

<a
*ngIf="menuItem.children"
(click)="$event.preventDefault(); onToggleSubMenu(menuItem)"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[attr.aria-expanded]="menuItem.expanded ?? false"
[attr.role]="menuItem.ariaRole"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
href="#"
>
<nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
<span class="menu-title">{{ menuItem.title }}</span>
<ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
<nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>


to

<a
*ngIf="menuItem.children"
(click)="onToggleSubMenu(menuItem)"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[attr.aria-expanded]="menuItem.expanded ?? false"
[attr.role]="menuItem.ariaRole"
[class.active]="menuItem.selected"
[routerLink]="menuItem.link"
(mouseenter)="onHoverItem(menuItem)"
>
<nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
<span class="menu-title">{{ menuItem.title }}</span>
<ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
<nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>


Unchanged code can be found on several folders inside the library.

• @nebular/theme/components/menu/menu-item.component.html
• @nebular/theme/esm2020/components/menu/menu.component.mjs
• @nebular/theme/fesm2015/nebular-theme.mjs
• @nebular/theme/fesm2020/nebular-theme.mjs

However i tried different approaches

• Extending the menu component (got error's saying menu-item component has no public classes or something like that)
• Using patch-package (no matter where i apply the change,delete cache, node_modules, etc. when i run build, i can see that the babel compiled files display no changes)
• Hooking to the toggle event and add a redirect (this causes funny unwanted behaviours on first loads)
• Creating a custom component based on the original code in the github (there are so much things linked, i basically have to end up importing almost the entire library again)

This would be easy to fix if i had fixed/limited options for the menu, but as these are dynamic, it's not possible.

Any tips or hints on how to achive these?

Continue reading...