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

Question

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>

My 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"
}

The stackblitz doesn't look like what you're showing here. – eko May 09 '21 at 12:51 — eko, May 09 '21 at 12:51
@eko image is from local stackblitz is for reference code – Krishna May 09 '21 at 15:46 — Krishna, May 09 '21 at 15:46

Mir entafaz Ali · Answer 1 · 2021-05-09T17:46:51.147

16

Updating the answer based on comment: One module import was missing in app.module.ts's imports array which is required for the desired output. So, please import TabViewModule and add it into the import array.

Adding the imports array:

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MenubarModule,
    InputTextModule,
    TabViewModule,
  ]

and HTML template:

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

Please refer to updated demo link in here.

Demo image for reference:

edited May 09 '21 at 17:46

answered May 09 '21 at 13:47

Mir entafaz Ali

927
6
13

updated snippet give in primeng docs please check – Krishna May 09 '21 at 15:45
Okay but I still don't understand what output are you expecting from the given snippet? – Mir entafaz Ali May 09 '21 at 16:26
Okay, I have updated my answer. Please go through the demo link as well and let me know if you face any issue regarding it. Also do upvote and accept the answer if it resolves your query. – Mir entafaz Ali May 09 '21 at 17:47
2

This started happening with angular 12 as well, TabViewModule import fixed the issue for me , thanks. – mini998 May 25 '21 at 09:02

score 5 · Answer 2 · answered Jul 24 '21 at 20:04

5

While importing TabViewModule (in Ali's answer) makes the problem go away, I think it's enough to import SharedModule from primeng/api (TabViewModule imports SharedModule which has the necessary PrimeTemplate class defined).

answered Jul 24 '21 at 20:04

muczy

51
1
2

yes, i confirm and this should be the accepted answer ! – cizario Jul 07 '23 at 18:47

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

2 Answers2