OverlayPanel OverlayPanel is a container component that can overlay other components on page.

Basic

Click the button to show the panel.

Galleria 1

Customized

This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.

DataTable Integration

Import


import {OverlayPanelModule} from 'primeng/primeng';

Getting Started

OverlayPanel is defined using p-overlayPanel element and is displayed using the show or toggle method of a local template variable.


<p-overlayPanel #op>
    Content
</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>
    Content
</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 enablign showCloseIcon property displays a close icon at the top right corner to close the panel


<p-overlayPanel #op [dismissable]="true" [showCloseIcon]="true">
    Content
</p-overlayPanel>

Attributes

Name Type Default Description
dismissable boolean true Enables to hide the overlay when outside is clicked.
showCloseIcon boolean false When enabled, displays a close icon at top right corner.
style string null Inline style of the component.
styleClass string null Style class of the component.
appendTo any null Target element to attach the panel, valid values are "body" or a local template variable of another element.

Events

Name Parameters Description
onBeforeShow - Callback to invoke before overlay is shown.
onAfterShow - Callback to invoke after overlay is shown.
onBeforeShow - Callback to invoke before overlay is hidden.
onAfterShow - Callback to invoke after overlay is hidden.

Methods

Name Parameters Description
toggle event: browser event
target?: target element to align the panel to
Toggles the visibility of the panel.
show event: browser event
target?: target element to align the panel to
Displays the panel.
hide - Hides the panel.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-overlaypanel Container element.
ui-overlaypanel-content Content of the panel.
ui-overlaypanel-close Close icon.

Dependencies

None.


<h3 class="first">Basic</h3>
<p>Click the button to show the panel.</p>
<button type="text" pButton label="Basic" (click)="op1.toggle($event)"></button>

<p-overlayPanel #op1>
    <img src="showcase/resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1" />
</p-overlayPanel>

<h3>Customized</h3>
<p>This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.</p>
<i class="fa fa-search" (mouseenter)="op2.show($event)" style="font-size:24px"></i>

<p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false">
    <p-dataTable [value]="cars1" [style]="{'width':'500px'}">
        <p-column field="vin" header="Vin" [sortable]="true"></p-column>
        <p-column field="year" header="Year" [sortable]="true"></p-column>
        <p-column field="brand" header="Brand" [sortable]="true"></p-column>
        <p-column field="color" header="Color" [sortable]="true"></p-column>
    </p-dataTable>
</p-overlayPanel>

<h3>DataTable Integration</h3>
<p-dataTable [value]="cars2">
    <p-column [style]="{'width':'10%','text-align':'center'}" header="Logo">
        <template let-car="rowData" pTemplate type="body">
            <button type="button" pButton (click)="selectCar($event,car,op3);" icon="fa-search"></button>
        </template>
    </p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

<p-overlayPanel #op3>
    <img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif" *ngIf="selectedCar"/>
</p-overlayPanel>


export class OverlayPanelDemo {

    cars1: Car[];
    
    cars2: Car[];
    
    selectedCar: Car;
    
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 = cars);
    }
    
    selectCar(event,car: Car, overlaypanel: OverlayPanel) {
        this.selectedCar = car;
        overlaypanel.toggle(event);
    }
}