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

Documentation

Import

import {OverlayPanelModule} from 'primeng/overlaypanel';
 

Getting Started

OverlayPanel is defined using p-overlayPanel element and is displayed using the show or toggle method of a local ng-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>
 

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">
    Content
</p-overlayPanel>
 

Properties

Events

Methods

Styling

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

Dependencies

None.

Source

View on GitHub

<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="assets/showcase/images/demo/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="pi pi-search" (mouseenter)="op2.show($event)" style="font-size:24px"></i>
<p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false">
    <p-table [value]="cars1" [style]="{width: '500px'} [paginator]="true" [rows]="5"">
        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="vin">Vin <p-sortIcon field="vin"></p-sortIcon></th>
                <th pSortableColumn="year">Year <p-sortIcon field="year"></p-sortIcon></th>
                <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
                <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td>{{car.vin}}</td>
                <td>{{car.year}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.color}}</td>
            </tr>
        </ng-template>
    </p-table>
</p-overlayPanel>
<h3>Table Integration</h3>
<p-table [value]="cars2">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 4em"></th>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>
                <button type="button" pButton (click)="selectCar($event,car,op3)" icon="pi pi-search"></button>
            </td>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>
<p-overlayPanel #op3>
    <img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png" *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);
    }
}