Search code examples
angularmenuprimengmegamenu

PrimeNg mega-menu auto display

I am looking for a way to display PrimeNg Angular Mega menu on hover. Default behaviour is display on item click. Theses attributes exists on menubar components https://primeng.org/menubar with autoDisplay, autoHide and autoHideDelay properties.

It's also exist on Primefaces JSF component https://primefaces.github.io/primefaces/12_0_0/#/components/megamenu Should I inherit the megamenu component to add this missing behaviour or is there a easier way to do this?

I use PrimeNg 16.9.1

Solution

  • you can achieve this By adding mouseevent for example to close on mouese leave you can add <p-megaMenu [model]="items" #megaMenu (mouseleave)="onBlur($event)"></p-megaMenu> and in .ts file make a view child like this @ViewChild('megaMenu') menuBar: any; and make a onBlur function onBlur($event: any) { this.menuBar.hide(); }