Angular Panel

Angular Panel is a container with the optional content toggle feature.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {PanelModule} from 'primeng/panel';

Getting Started

Panel is defined with p-panel element.

<p-panel header="Title">
    Content
</p-panel>

Toggleable

Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option. By default, toggle icon is used to toggle the contents whereas setting toggler to "header" enables clicking anywhere in the header to trigger a toggle.

<p-panel header="Title" [toggleable]="true">
    Content
</p-panel>

Header and Footer Content

Header and Footers sections can be customized using header and footer templates.

<p-panel >
    <ng-template pTemplate="header">
        Header content here
    </ng-template>
    Body Content
    <ng-template pTemplate="footer">
        Footer content here
    </ng-template>
</p-panel>

Custom Icons

Additional icons can be placed at the header section of the panel using the special icons selector. For a unified look, it is suggest to add .p-panel-header-icon class to your icons.

<p-panel>
<ng-template pTemplate="icons">
    <button pButton class="p-panel-header-icon p-link" (click)="menu.toggle($event)">
        <span class="pi pi-cog"></span>
    </button>
    <p-menu #menu id="config_menu" [model]="items" [popup]="true"></p-menu>
</ng-template>

Animation Configuration

Transition of the toggle animation can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.86, 0, 0.07, 1), example below disables the animation altogether.

<p-panel [transitionOptions]="'0ms'">
</p-panel>

Theming

Panel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Panel showcase for demos and documentation.