Menu component templates not rendered v18.0.0-beta.4

[teflonmuflon2]

Describe the bug

the start and end tempaltes are not rendered

Environment

chrome on windows 11

Reproducer

No response

Angular version

18.2.1

PrimeNG version

18.0.0-beta.4

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v22.11.0

Browser(s)

No response

Steps to reproduce the behavior

<p-menu [model]="items" class="flex justify-center" styleClass="w-full md:w-60">






PRIMEAPP




{{ item.label }}



<span [class]="item.icon">
{{ item.label }}
<p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
<span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">
{{ item.shortcut }}







Amy Elsner
Admin

Expected behavior

should display the templates

[mertsincan]

Could you please attach a stackblitz link for us to replicate? Thank you!

[teflonmuflon2]

Could you please attach a stackblitz link for us to replicate? Thank you!

i copied the demo from:
https://v18.primeng.org/menu

it doesn't works on the demo page either

[teflonmuflon2]

very strange. if i use @if in any of template the templates not displayed.
not working:
<ng-template let-item pTemplate="item"> @if (item?.visible !== false) { <a class="flex items-center p-menuitem-link ml-3"> <mat-icon class="{{ item?.text_color ? item?.text_color : 'text-primary' }}" fontIcon="{{ item.icon ? item.icon : 'add_circle' }}" /> <span class="ml-2 {{ item?.text_color ? item?.text_color : '' }} ">{{ item.label }}</span> @if (item?.selector) { <span class="ml-auto border surface-border bg-blue-500 text-white text-xs p-1"> {{ item?.selector }} </span> } </a> } </ng-template>

working:
<ng-template let-item pTemplate="item"> <a class="flex items-center p-menuitem-link ml-3"> <mat-icon class="{{ item?.text_color ? item?.text_color : 'text-primary' }}" fontIcon="{{ item.icon ? item.icon : 'add_circle' }}" /> <span class="ml-2 {{ item?.text_color ? item?.text_color : '' }} ">{{ item.label }}</span><span [ngClass]=" item?.selector ? 'bg-blue-500 ml-auto border surface-border text-white text-xs p-1' : '' "> {{ item?.selector }} </span> </a> </ng-template>

[teflonmuflon2]

needed to use the new syntax