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
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(); }