Angular OverlayPanel is a container component positioned as connected to its target.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {OverlayPanelModule} from 'primeng/overlaypanel';
Getting Started
Content is defined with an ng-template and overlay is displayed using the show or toggle method of a local ng-template variable.
<p-overlayPanel #op>
<ng-template pTemplate>
Content
</ng-template>
</p-overlayPanel>
<button type="text" pButton label="Basic" (click)="op.toggle($event)"></button>
Show and Hide
show method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, if you'd like to align it to another element, provide it as the second parameter. Similarly calling hide() hides the overlay panel and the toggle method toggles the visibility of the panel. In example below, clicking the button displays the overlayPanel aligned to the actualTarget div, not the button itself.
<p-overlayPanel #op>
<ng-template pTemplate>
Content
</ng-template>
</p-overlayPanel>
<button type="text" pButton label="Custom Target" (click)="op.show($event, actualTarget)"></button>
<div #actualTarget></div>
Dismissable and CloseIcon
Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enabling showCloseIcon property displays a close icon at the top right corner to close the panel
<p-overlayPanel #op [dismissable]="true" [showCloseIcon]="true">
<ng-template pTemplate>
Content
</ng-template>
</p-overlayPanel>
Animation Configuration
Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.
<p-overlayPanel [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" #op [dismissable]="true" [showCloseIcon]="true">
<ng-template pTemplate>
Content
</ng-template>
</p-overlayPanel>
Theming
OverlayPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG OverlayPanel showcase for demos and documentation.