CODEWITHSUNDEEP
angularprimeng
Devmix
Devmix

Reputation: 1858

How to show overlay when clicking on a menu item?

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>

Upvotes: 2

Views: 6734

Answers (2)

Swapnil Srivastava
Swapnil Srivastava

Reputation: 173

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

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

Upvotes: 0

yurzui
yurzui

Reputation: 214057

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:

Upvotes: 5

Related Questions