Primeng menubar ng-template start and end or not showing even after doing the same way in example

[charlottejen]

I am trying to use the sample provide in here, but somehow I am not able to get it work with ng-templates. modified the stackblitz provided in example and tried but no luck. please help me to figure out what am I missing Below is my header code.

<p-menubar [model]="items">
<ng-template pTemplate="start">
<img src="assets/showcase/images/primeng.svg" height="40" class="p-mr-2">
</ng-template>
<ng-template pTemplate="end">
<input type="text" pInputText placeholder="Search">
</ng-template>
</p-menubar>
outputMy local packages are

{
"@angular/animations": "~9.1.3",
"@angular/common": "~9.1.3",
"@angular/compiler": "~9.1.3",
"@angular/core": "~9.1.3",
"@angular/forms": "~9.1.3",
"@angular/platform-browser": "~9.1.3",
"@angular/platform-browser-dynamic": "~9.1.3",
"@angular/router": "~9.1.3",
"ngx-electron": "^2.2.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
}