1

I'm trying to show an overlay when clicking on a menu item (Example: clicking on item 1, item 2 or item 3). So far I have this button (Click me) that when you click on it it shows an overlay right below it. I want to have the same functionality when clicking on any menu item. Does anyone know how to get this to work?

Here's my code:

LIVE DEMO

<p-menubar [model]="menuItems"></p-menubar>
<p-overlayPanel #op>
 Content
</p-overlayPanel>
<br/><br/>
<button type="text" pButton label="Click me" (click)="op.toggle($event)"></button>
Devmix
  • 1,599
  • 5
  • 36
  • 73

2 Answers2

2

You can use @ViewChild decorator to get OverlayPanel instance and simply call toggle method on it:

component.ts

@ViewChild('op') op: OverlayPanel;

toggleOverlay = ({ originalEvent }) => this.op.toggle(originalEvent);

menuItems: Array<MenuItem> = [
  {
    label: 'item 1',
    command: this.toggleOverlay,
  }, {
    label: 'item 2',
    command: this.toggleOverlay,
  }, {
    label: 'item 3',
    command: this.toggleOverlay,
  }
];

// or
menuItems2 = ['item1', 'item2', 'item3']
  .map(item => ({ label: item, command: ({ originalEvent }) => this.op.toggle(originalEvent)}))

Forked Stackblitz

See also:

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • How would you show different content for each item? for example: Show "Red" for item 1, "Green" for item 2, and "Black" for item 3? Can you please update your code with that? – Devmix Feb 05 '19 at 19:08
  • One option is to have several overlays https://stackblitz.com/edit/primeng-menubar-v1-fyxijf?file=app/hello.component.ts another option is having dynamic content for overlay https://stackblitz.com/edit/primeng-menubar-v1-1tjjpl?file=app/hello.component.html – yurzui Feb 05 '19 at 19:18
  • Thank you so much bro!! – Devmix Feb 05 '19 at 19:21
0

you can use MenuBar for same behaviour or any other menu based option in prime-ng

https://www.primefaces.org/primeng/#/menubar

Swapnil Srivastava
  • 153
  • 2
  • 12