PrimeNG

https://primeng-v15.pages.dev
Admin
PrimeNG is a collection of rich UI components for Angular with a focus on accessibility,...
Tokens:162,677
Snippets:1,658
Trust Score:7.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install PrimeFlex

Source: https://primeng-v15.pages.dev/dataview

Install the PrimeFlex dependency required for DataView grid functionality.

```bash
npm install primeflex
```

--------------------------------

### Install and Configure Chart.js

Source: https://primeng-v15.pages.dev/chart

Install the required chart.js dependency and add it to your project's scripts configuration.

```bash
npm install chart.js --save
```

```json
"scripts": [
    "../node_modules/chart.js/dist/chart.js",
    //..others
],
```

--------------------------------

### Mask Formatting Examples

Source: https://primeng-v15.pages.dev/inputmask

Demonstrates various mask patterns using 'a' for alphabetic, '9' for numeric, and '*' for alphanumeric characters.

```html
<span class="font-bold block mb-2">SSN</span>
<p-inputMask mask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999"></p-inputMask>

<span class="font-bold block mb-2">Phone</span>
<p-inputMask mask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999"></p-inputMask>

<span class="font-bold block mb-2">Serial Number</span>
<p-inputMask mask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999"></p-inputMask>
```

--------------------------------

### Menubar with Templates

Source: https://primeng-v15.pages.dev/menubar

Use pTemplate for start and end slots to inject custom content into the menubar.

```html
<p-menubar [model]="items">
    <ng-template pTemplate="start">
        <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="40" class="mr-2" />
    </ng-template>
    <ng-template pTemplate="end">
        <input type="text" pInputText placeholder="Search" class="w-full" />
    </ng-template>
</p-menubar>
```

--------------------------------

### Install PrimeIcons via npm

Source: https://primeng-v15.pages.dev/icons

Run this command in your terminal to add the PrimeIcons library to your project dependencies.

```bash
npm install primeicons
```

--------------------------------

### Install PrimeNG via npm

Source: https://primeng-v15.pages.dev/installation

Use this command to add the PrimeNG package to your project dependencies.

```bash
npm install primeng
```

--------------------------------

### Install Quill Dependency

Source: https://primeng-v15.pages.dev/editor

Install the required Quill dependency via npm.

```bash
npm install quill
```

--------------------------------

### AutoComplete Component Usage

Source: https://primeng-v15.pages.dev/autocomplete

Examples of implementing the AutoComplete component using template-driven forms, reactive forms, and the dropdown feature.

```APIDOC
## AutoComplete Component

### Description
AutoComplete is an input component that provides real-time suggestions when being typed. It requires a list of suggestions and a completeMethod to query for results.

### Basic Usage
```html
<p-autoComplete [(ngModel)]="selectedItem" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
```

### Reactive Forms
```html
<form [formGroup]="formGroup">
    <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
</form>
```

### Dropdown Mode
```html
<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
```
```

--------------------------------

### Basic PickList Implementation

Source: https://primeng-v15.pages.dev/picklist

Define source and target lists and use pTemplate to customize the rendering of each item.

```html
<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" 
    [sourceStyle]="{ height: '30rem' }" [targetStyle]="{ height: '30rem' }" breakpoint="1400px">
    <ng-template let-product pTemplate="item">
        <div class="flex flex-wrap p-2 align-items-center gap-3">
            <img class="w-4rem shadow-2 flex-shrink-0 border-round" src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" alt="{item.name}" />
            <div class="flex-1 flex flex-column gap-2">
                <span class="font-bold">{{ product.name }}</span>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-tag text-sm"></i>
                    <span>{{ product.category }}</span>
                </div>
            </div>
            <span class="font-bold text-900">{{ '$' + product.price }}</span>
        </div>
    </ng-template>
</p-pickList>
```

--------------------------------

### Basic Terminal Implementation

Source: https://primeng-v15.pages.dev/terminal

Use the p-terminal component to render the terminal interface with a welcome message and prompt.

```html
<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>
```

--------------------------------

### Implement Basic Toolbar

Source: https://primeng-v15.pages.dev/toolbar

Use p-toolbar-group-start and p-toolbar-group-end classes to position content within the toolbar.

```html
<p-toolbar>
    <div class="p-toolbar-group-start">
        <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
        <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
        <i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
    </div>
    <div class="p-toolbar-group-end">
        <p-button icon="pi pi-search" class="mr-2"></p-button>
        <p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
        <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
    </div>
</p-toolbar>
```

--------------------------------

### Radar Chart

Source: https://primeng-v15.pages.dev/chart

Display multivariate data on axes starting from the same point.

```html
<p-chart type="radar" [data]="data" [options]="options"></p-chart>
```

--------------------------------

### Implement Basic VirtualScroller

Source: https://primeng-v15.pages.dev/virtualscroller

Define the data source, item size, and template to render a basic virtualized list.

```html
<p-virtualScroller [value]="items" class="border-1 surface-border border-round" [style]="{'width': '200px'}" scrollHeight="200px" [itemSize]="50">
    <ng-template pTemplate="item" let-item>
        <div class="flex align-items-center p-2 h-full" [ngClass]="{ 'surface-hover': item.index % 2 === 0 }">
            {{ item.label }}
        </div>
    </ng-template>
</p-virtualScroller>
```

--------------------------------

### Configure Dynamic Dialog Component

Source: https://primeng-v15.pages.dev/dynamicdialog

Component setup for using DialogService and managing the DynamicDialogRef.

```typescript
import { Component, OnDestroy } from '@angular/core';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { Product } from '../../domain/product';
import { ProductListDemo } from './productlistdemo';

@Component({
    templateUrl: './dynamicdialogdemo.html',
    providers: [DialogService]
})
export class DynamicDialogDemo implements OnDestroy {
    
    ref: DynamicDialogRef;

    constructor(public dialogService: DialogService) {}
}
```

--------------------------------

### Basic Dock Implementation

Source: https://primeng-v15.pages.dev/dock

Define the dock using the model property and a custom item template for rendering icons.

```html
<p-dock [model]="items" [position]="position">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.icon" [alt]="item.label" width="100%" />
    </ng-template>
</p-dock>
```

--------------------------------

### Basic Steps Implementation

Source: https://primeng-v15.pages.dev/steps/confirmation

Define a collection of menuitems as the model and set readonly to true for a non-interactive display.

```html
<p-steps [model]="items" [readonly]="true"></p-steps>
```

--------------------------------

### Basic Editor Usage

Source: https://primeng-v15.pages.dev/editor

Initialize the editor with default toolbar options and a specified height.

```html
<p-editor [(ngModel)]="text" [style]="{ height: '320px' }"></p-editor>
```

--------------------------------

### Custom Template Content

Source: https://primeng-v15.pages.dev/megamenu

Add custom content to the start and end of the MegaMenu using pTemplate.

```html
<p-megaMenu [model]="items" styleClass="flex">
    <ng-template pTemplate="start">
        <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="40" class="mr-2" />
    </ng-template>
    <ng-template pTemplate="end">
        <input type="text" pInputText placeholder="Search" />
    </ng-template>
</p-megaMenu>
```

--------------------------------

### Implement DataView with List and Grid Layouts

Source: https://primeng-v15.pages.dev/dataview

Configures a DataView with both list and grid templates, utilizing PrimeFlex for responsive layout management.

```html
<p-dataView #dv [value]="products" [layout]="layout">
    <ng-template pTemplate="header">
        <div class="flex justify-content-end">
            <p-dataViewLayoutOptions [layout]="layout"></p-dataViewLayoutOptions>
        </div>
    </ng-template>
    <ng-template let-product pTemplate="listItem">
        <div class="col-12">
            <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
                <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                    <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                        <div class="text-2xl font-bold text-900">{{ product.name }}</div>
                        <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
                        <div class="flex align-items-center gap-3">
                            <span class="flex align-items-center gap-2">
                                <i class="pi pi-tag"></i>
                                <span class="font-semibold">{{ product.category }}</span>
                            </span>
                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
                        </div>
                    </div>
                    <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                        <span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
                        <button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-product pTemplate="gridItem">
        <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
            <div class="p-4 border-1 surface-border surface-card border-round">
                <div class="flex flex-wrap align-items-center justify-content-between gap-2">
                    <span class="flex align-items-center gap-2">
                        <i class="pi pi-tag"></i>
                        <span class="font-semibold">{{ product.category }}</span>
                    </span>
                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
                </div>
                <div class="flex flex-column align-items-center gap-3 py-5">
                    <img class="w-9 shadow-2 border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
                    <div class="text-2xl font-bold">{{ product.name }}</div>
                    <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
                </div>
                <div class="flex align-items-center justify-content-between">
                    <span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
                    <button pButton icon="pi pi-shopping-cart" class="p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>
```

--------------------------------

### Configure Button Accessibility

Source: https://primeng-v15.pages.dev/button

Examples of using aria-label for screen reader support with icon-only or custom-templated buttons.

```html
<p-button icon="pi pi-check" aria-label="Submit"></p-button>
<p-button icon="pi pi-check" label="Submit"></p-button>

<p-button class="youtube p-0" aria-label="Youtube">
    <i class="pi pi-youtube px-2"></i>
    <span class="px-3">Youtube</span>
</p-button>
```

--------------------------------

### Configure Numeral Input Options

Source: https://primeng-v15.pages.dev/inputnumber

Demonstrates various configurations for numerical input, including integer-only mode, disabling grouping, and setting fraction or boundary constraints.

```html
<p-inputNumber inputId="integeronly" [(ngModel)]="value1"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value2" mode="decimal" inputId="withoutgrouping" [useGrouping]="false"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value3" inputId="minmaxfraction" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="5"> </p-inputNumber>
<p-inputNumber [(ngModel)]="value4" inputId="minmax" inputId="minmax" mode="decimal" [min]="0" [max]="100"> </p-inputNumber>
```

--------------------------------

### Configure AutoComplete Accessibility

Source: https://primeng-v15.pages.dev/autocomplete

Examples of using label tags, aria-labelledby, and aria-label to provide accessible descriptions for the AutoComplete component.

```html
<label for="ac1">Username</label>
<p-autoComplete inputId="ac1"></p-autoComplete>

<span id="ac2">Email</span>
<p-autoComplete aria-labelledby="ac2"></p-autoComplete>

<p-autoComplete aria-label="City"></p-autoComplete>
```

--------------------------------

### Basic InputGroup Usage

Source: https://primeng-v15.pages.dev/inputgroup

Create an InputGroup by wrapping inputs and add-ons in a container with the p-inputgroup class, using p-inputgroup-addon for the add-on elements.

```html
<div class="p-inputgroup">
    <span class="p-inputgroup-addon">
        <i class="pi pi-user"></i>
    </span>
    <input pInputText placeholder="Username" />
</div>
<div class="p-inputgroup">
    <span class="p-inputgroup-addon">$</span>
    <input type="text" pInputText placeholder="Price" />
    <span class="p-inputgroup-addon">.00</span>
</div>
<div class="p-inputgroup">
    <span class="p-inputgroup-addon">www</span>
    <input type="text" pInputText placeholder="Website" />
</div>
```

--------------------------------

### Basic ConfirmDialog Implementation

Source: https://primeng-v15.pages.dev/confirmdialog

Demonstrates using the ConfirmationService to trigger a dialog and the required component markup.

```typescript
confirm1() {
this.confirmationService.confirm({
    message: 'Are you sure that you want to proceed?',
    header: 'Confirmation',
    icon: 'pi pi-exclamation-triangle',
    accept: () => acceptFunc(),
    reject: () => rejectFunc()
});

<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>

<p-confirmDialog></p-confirmDialog>
```

--------------------------------

### Non-semantic HTML structure

Source: https://primeng-v15.pages.dev/accessibility

An example of a layout using generic div elements which lacks built-in screen reader support.

```html
<div class="header"/>
    <div class="header-text">Header></div>
</div>

<div class="nav"></div>

<div class="main">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

<div class="footer"></div>
```

--------------------------------

### Basic Chip Usage

Source: https://primeng-v15.pages.dev/chip

Create a basic chip using the label property.

```html
<p-chip label="Action"></p-chip>
```

--------------------------------

### Implement Accessible Sidebar with Trigger

Source: https://primeng-v15.pages.dev/sidebar

Example of a sidebar triggered by a button, including necessary accessibility attributes like aria-controls and aria-expanded.

```html
<p-button 
    icon="pi pi-arrow-right" 
    (click)="sidebarVisible = true" 
    aria-controls="{{sidebarVisible ? 'sidebar' : null}}" 
    aria-expanded="{{sidebarVisible ? true : false}}"
></p-button>
<p-sidebar 
    [(visible)]="sidebarVisible" 
    id="sidebar"
    (onHide)="sidebarVisible = false"
    role="region"
>
    content
</p-sidebar>
```

--------------------------------

### Configure Responsive Overlay Options

Source: https://primeng-v15.pages.dev/overlay

Defines responsive behavior for overlays based on media queries or breakpoints.

```typescript


import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayDirectionType } from 'primeng/api';

const responsiveOptions: ResponsiveOverlayOptions = {
    // style?: any;                                     // Style of component in given breakpoint or media query
    // styleClass?: string;                             // Style class of component in given breakpoint or media query
    // contentStyle?: any;                              // Style of content in given breakpoint or media query
    // contentStyleClass?: string;                      // Style class of content in given breakpoint or media query
    // breakpoint?: string;                             // Breakpoint required to show component in modal mode. Exp: '640px', '10rem' etc.
    // media?: string;                                  // Media query required to show component in modal mode. Exp: '@media screen and (max-width: 640px)', '@media screen and (min-width: 640px) and (max-width: 900px)' etc.
    // direction?: ResponsiveOverlayDirectionType;      // Direction in which the component will be displayed in modal mode.
    // hideOnEscape?: boolean;                          // Hides overlay when escape key pressed.
}

this.primengConfig.overlayOptions: OverlayOptions = {
    responsive: responsiveOptions
};



```

--------------------------------

### Configure Divider Border Types

Source: https://primeng-v15.pages.dev/divider

Examples of using the p-divider component with solid, dotted, and dashed types to separate content sections.

```html
<p-divider type="solid"></p-divider>
<p-divider type="dotted"></p-divider>
<p-divider type="dashed"></p-divider>
```

--------------------------------

### Basic Overlay Usage

Source: https://primeng-v15.pages.dev/overlay

Displays a basic overlay triggered by a button click, utilizing the visible property and responsive configuration.

```html
<p-button (click)="toggle()" label="Show Overlay"></p-button>
<p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
    Content
</p-overlay>
```

--------------------------------

### Enable Scrollable TabView

Source: https://primeng-v15.pages.dev/tabview

Use the scrollable property to enable horizontal scrolling for tabs. This example iterates over a collection of tabs using *ngFor.

```html
<p-tabView [(activeIndex)]="activeIndex" [scrollable]="true">
    <p-tabPanel *ngFor="let tab of scrollableTabs" [header]="tab.title">
        <p>{{ tab.content }}</p>
    </p-tabPanel>
</p-tabView>
```

--------------------------------

### Basic Chart Usage

Source: https://primeng-v15.pages.dev/chart

Configure a basic chart using type, data, and options properties.

```html
<p-chart type="bar" [data]="basicData" [options]="basicOptions"></p-chart>
```

--------------------------------

### Implement Programmatic Scroll with VirtualScroller

Source: https://primeng-v15.pages.dev/virtualscroller

Use the scrollToIndex function to navigate to a specific index. The example demonstrates a reset button and the component structure.

```html
<p-button label="Reset" (click)="reset()"></p-button>
<p-virtualScroller #vs [value]="items" class="border-1 surface-border border-round" [style]="{ width: '200px' }" scrollHeight="200px" [itemSize]="50">
    <ng-template pTemplate="item" let-item>
        <div class="flex align-items-center p-2 h-full" [ngClass]="{ 'surface-hover': item.index % 2 === 0 }">
            {{ item.label }}
        </div>
    </ng-template>
</p-virtualScroller>
```

--------------------------------

### Basic Panel Usage

Source: https://primeng-v15.pages.dev/panel

Displays a standard panel with a header and content.

```html
<p-panel header="Header">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</p-panel>
```

--------------------------------

### Aligning Content in PrimeNG Divider

Source: https://primeng-v15.pages.dev/divider

Examples of using the p-divider component with different alignment settings and embedded content like text, badges, and buttons.

```html
<p-divider align="left">
    <div class="inline-flex align-items-center">
        <i class="pi pi-user mr-2"></i>
        <b>Text</b>
    </div>
</p-divider>
<p-divider align="center">
    <span class="p-tag">Badge</span>
</p-divider>
<p-divider align="right">
    <p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
</p-divider>
```

--------------------------------

### Basic SlideMenu Implementation

Source: https://primeng-v15.pages.dev/slidemenu

Define the menu model and configure the viewport height and menu width for the inline menu.

```html
<p-slideMenu [model]="items" [viewportHeight]="250" [menuWidth]="175"></p-slideMenu>
```

--------------------------------

### Basic Menubar Usage

Source: https://primeng-v15.pages.dev/menubar

Define the menu structure using the model property.

```html
<p-menubar [model]="items"></p-menubar>
```

--------------------------------

### Implement PickList with Filtering

Source: https://primeng-v15.pages.dev/picklist

Configures a PickList with drag-and-drop support and name-based filtering for both source and target lists.

```html
<p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" [responsive]="true" [sourceStyle]="{ height: '30rem' }"
    [targetStyle]="{ height: '30rem' }" filterBy="name" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" breakpoint="1400px">
    <ng-template let-product pTemplate="item">
        <div class="flex flex-wrap p-2 align-items-center gap-3">
            <img class="w-4rem shadow-2 flex-shrink-0 border-round" src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" alt="{item.name}" />
            <div class="flex-1 flex flex-column gap-2">
                <span class="font-bold">{{ product.name }}</span>
                <div class="flex align-products-center gap-2">
                    <i class="pi pi-tag text-sm"></i>
                    <span>{{ product.category }}</span>
                </div>
            </div>
            <span class="font-bold text-900">{{ '$' + product.price }}</span>
        </div>
    </ng-template>
</p-pickList>
```

--------------------------------

### Card Skeleton Implementation

Source: https://primeng-v15.pages.dev/skeleton

Uses p-skeleton components with PrimeFlex utilities to simulate a card layout during loading.

```html
<div class="border-round border-1 surface-border p-4 surface-card">
    <div class="flex mb-3">
        <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
        <div>
            <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
            <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
            <p-skeleton height=".5rem"></p-skeleton>
        </div>
    </div>
    <p-skeleton width="100%" height="150px"></p-skeleton>
    <div class="flex justify-content-between mt-3">
        <p-skeleton width="4rem" height="2rem"></p-skeleton>
        <p-skeleton width="4rem" height="2rem"></p-skeleton>
    </div>
</div>
```

--------------------------------

### Implement Basic Galleria

Source: https://primeng-v15.pages.dev/galleria

Define the component with value, item template, and thumbnail template.

```html
<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.itemImageSrc" style="width: 100%;" />
    </ng-template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="grid grid-nogutter justify-content-center">
            <img [src]="item.thumbnailImageSrc" />
        </div>
    </ng-template>
</p-galleria>
```

--------------------------------

### Basic PanelMenu Usage

Source: https://primeng-v15.pages.dev/panelmenu

Initialize a basic PanelMenu by binding a model to the component.

```html
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
```

--------------------------------

### Basic MegaMenu Implementation

Source: https://primeng-v15.pages.dev/megamenu

Define the menu structure using the model property.

```html
<p-megaMenu [model]="items"></p-megaMenu>
```

--------------------------------

### Responsive Layout with PrimeFlex

Source: https://primeng-v15.pages.dev/theming

Uses PrimeFlex utility classes to create a responsive layout for PrimeNG buttons.

```html
<div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
    <p-button label="Button 1"></p-button>
    <p-button styleClass="p-button-secondary" label="Button 2"></p-button>
    <p-button styleClass="p-button-help" label="Button 3"></p-button>
</div>
```

--------------------------------

### Basic TabMenu Usage

Source: https://primeng-v15.pages.dev/tabmenu

Initialize the TabMenu by providing a collection of menuitems to the model property.

```html
<p-tabMenu [model]="items"></p-tabMenu>
```

--------------------------------

### Basic ConfirmDialog Usage

Source: https://primeng-v15.pages.dev/confirmdialog

Define the component in the template and use the ConfirmationService to trigger dialogs.

```html
<p-toast></p-toast>
<p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>
<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
<p-button (click)="confirm2()" icon="pi pi-times" label="Delete" class="p-button-danger"></p-button>
```

--------------------------------

### Basic OrderList Implementation

Source: https://primeng-v15.pages.dev/orderlist

Define the list items using pTemplate and bind the collection to the value property.

```html
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
    <ng-template let-product pTemplate="item">
        <div class="flex align-items-center p-2 w-full flex-wrap">
            <div class="w-full text-center lg:w-auto lg:text-left">
                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
            </div>
            <div class="flex-1">
                <h5 class="mb-2">{{ product.name }}</h5>
                <i class="pi pi-tag vertical-align-middle mr-2"></i>
                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
            </div>
            <div class="flex flex-column align-items-end">
                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
            </div>
        </div>
    </ng-template>
</p-orderList>
```

--------------------------------

### Implement Basic OverlayPanel

Source: https://primeng-v15.pages.dev/overlaypanel

Use the toggle method on a template reference to control the visibility of the OverlayPanel.

```html
<p-overlayPanel #op>
    <img src="https://primefaces.org/cdn/primeng/images/demo/product/bamboo-watch.jpg" alt="product" />
</p-overlayPanel>
<p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>
```

--------------------------------

### Implement Basic Table

Source: https://primeng-v15.pages.dev/table

Define a basic table using the p-table component with header and body templates to display a collection of products.

```html
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="header">
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>
```

--------------------------------

### Basic DataView Implementation

Source: https://primeng-v15.pages.dev/dataview

Define a DataView with a value and a list item template using PrimeFlex classes for layout.

```html
<p-dataView #dv [value]="products">
    <ng-template let-product pTemplate="listItem">
        <div class="col-12">
            <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" />
                <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                    <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                        <div class="text-2xl font-bold text-900">{{ product.name }}</div>
                        <p-rating [(ngModel)]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
                        <div class="flex align-items-center gap-3">
                            <span class="flex align-items-center gap-2">
                                <i class="pi pi-tag"></i>
                                <span class="font-semibold">{{ product.category }}</span>
                            </span>
                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product)"></p-tag>
                        </div>
                    </div>
                    <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                        <span class="text-2xl font-semibold">{{'$'+ product.price }}</span>
                        <button pButton icon="pi pi-shopping-cart" class="md:align-self-end mb-2 p-button-rounded" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>
```

--------------------------------

### Steps with Routing

Source: https://primeng-v15.pages.dev/steps/confirmation

Integrate the component with Angular router-outlet for multi-page workflows.

```html
<div class="card">
    <p-toast></p-toast>
    <p-steps [model]="items" [readonly]="false"></p-steps>
</div>
<router-outlet></router-outlet>
```

--------------------------------

### Implement Table Data Export

Source: https://primeng-v15.pages.dev/table

Demonstrates CSV, Excel, and PDF export buttons. Requires dynamic columns and defined field/header properties.

```html
<p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="caption">
        <div class="flex">
            <button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success mr-2" pTooltip="XLS" tooltipPosition="bottom"></button>
            <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
            <button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({ selectionOnly: true })" class="p-button-info ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-table>
```

--------------------------------

### Basic ProgressBar Usage

Source: https://primeng-v15.pages.dev/progressbar

Display a static progress bar by setting the value property.

```html
<p-progressBar [value]="50"></p-progressBar>
```

--------------------------------

### Customize Password Overlay with Templates

Source: https://primeng-v15.pages.dev/password

Use header, content, and footer templates to customize the appearance of the password strength overlay.

```html
<p-password [(ngModel)]="value">
    <ng-template pTemplate="header">
        <h6>Pick a password</h6>
    </ng-template>
    <ng-template pTemplate="footer">
        <p-divider></p-divider>
        <p class="mt-2">Suggestions</p>
        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
            <li>At least one lowercase</li>
            <li>At least one uppercase</li>
            <li>At least one numeric</li>
            <li>Minimum 8 characters</li>
        </ul>
    </ng-template>
</p-password>
```

--------------------------------

### Configure Tooltip Delays

Source: https://primeng-v15.pages.dev/tooltip

Use showDelay and hideDelay to control the timing of tooltip appearance and disappearance.

```html
<input type="text" pInputText pTooltip="Enter your username" showDelay="1000" hideDelay="1000" placeholder="hover to display tooltip">
```

--------------------------------

### Basic ScrollTop Usage

Source: https://primeng-v15.pages.dev/scrolltop

The default implementation listens to window scroll events.

```html
<p-scrollTop></p-scrollTop>
```

--------------------------------

### Advanced Galleria Configuration

Source: https://primeng-v15.pages.dev/galleria

Demonstrates complex requirements including active index tracking, custom footer templates, and fullscreen toggling.

```html
<p-galleria
    #galleria
    [(value)]="images"
    [(activeIndex)]="activeIndex"
    [numVisible]="5"
    [showThumbnails]="showThumbnails"
    [showItemNavigators]="true"
    [showItemNavigatorsOnHover]="true"
    [circular]="true"
    [autoPlay]="true"
    [transitionInterval]="3000"
    [containerStyle]="{ 'max-width': '640px' }"
    [containerClass]="galleriaClass()"
>
    <ng-template pTemplate="item" let-item>
        <img [src]="item.itemImageSrc" [ngStyle]="{ width: !fullscreen ? '100%' : '', display: !fullscreen ? 'block' : '' }" />
    </ng-template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="grid grid-nogutter justify-content-center">
            <img [src]="item.thumbnailImageSrc" />
        </div>
    </ng-template>
    <ng-template pTemplate="footer" let-item>
        <div class="custom-galleria-footer">
            <button type="button" pButton icon="pi pi-list" (click)="onThumbnailButtonClick()"></button>
            <span *ngIf="images" class="title-container">
                <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
                <span class="title">{{ images[activeIndex].title }}</span>
                <span>{{ images[activeIndex].alt }}</span>
            </span>
            <button type="button" pButton [icon]="fullScreenIcon()" (click)="toggleFullScreen()" class="fullscreen-button"></button>
        </div>
    </ng-template>
</p-galleria>
```

--------------------------------

### Implement OrderList with Filtering and Custom Template

Source: https://primeng-v15.pages.dev/orderlist

Configures an OrderList with a filter on the name property and a custom item template for displaying product details.

```html
<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
    <ng-template let-product pTemplate="item">
        <div class="flex align-items-center p-2 w-full flex-wrap">
            <div class="w-full text-center lg:w-auto lg:text-left">
                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
            </div>
            <div class="flex-1">
                <h5 class="mb-2">{{ product.name }}</h5>
                <i class="pi pi-tag vertical-align-middle mr-2"></i>
                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
            </div>
            <div class="flex flex-column align-items-end">
                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
            </div>
        </div>
    </ng-template>
</p-orderList>
```

--------------------------------

### Implement Basic TreeTable Pagination

Source: https://primeng-v15.pages.dev/treetable

Enable pagination by setting the paginator property to true and defining the number of rows per page.

```html
<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>
```

--------------------------------

### DialogService.open(component, config)

Source: https://primeng-v15.pages.dev/dynamicdialog

Opens a dynamic dialog by loading the specified component and applying the provided configuration.

```APIDOC
## DialogService.open(component, config)

### Description
Opens a dialog window. The first parameter is the component to be loaded, and the second is a configuration object for customization.

### Parameters
- **component** (Type) - Required - The component class to load inside the dialog.
- **config** (Object) - Optional - Configuration object containing properties like 'header' and 'data'.

### Usage Example
```typescript
this.ref = this.dialogService.open(ProductListDemo, { 
    data: {
        id: '51gF3'
    },
    header: 'Select a Product'
});
```
```

--------------------------------

### Basic ContextMenu Usage

Source: https://primeng-v15.pages.dev/contextmenu

Attach the context menu to a specific element using a template reference variable.

```html
<img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full">
<p-contextMenu [target]="img" [model]="items"></p-contextMenu>
```

--------------------------------

### Interactive Steps Implementation

Source: https://primeng-v15.pages.dev/steps/confirmation

Set readonly to false and bind activeIndex with activeIndexChange to enable user navigation between steps.

```html
<p-toast></p-toast>
<p-steps [model]="items" [readonly]="false" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)"></p-steps>
```

--------------------------------

### Enable Touch UI

Source: https://primeng-v15.pages.dev/calendar

Set touchUI to true to optimize the overlay display for touch-enabled devices.

```html
<p-calendar [(ngModel)]="date" [touchUI]="true" [readonlyInput]="true"></p-calendar>
```

--------------------------------

### Implement Basic Table Pagination

Source: https://primeng-v15.pages.dev/table

Enable pagination by setting the paginator property to true and defining the rows per page. Use templates to customize the header, body, and paginator controls.

```html
<p-table
    [value]="customers"
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    [tableStyle]="{ 'min-width': '50rem' }"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [rowsPerPageOptions]="[10, 25, 50]"
>
    <ng-template pTemplate="header">
        <tr>
            <th style="width:25%">Name</th>
            <th style="width:25%">Country</th>
            <th style="width:25%">Company</th>
            <th style="width:25%">Representative</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>
            <td>{{ customer.name }}</td>
            <td>{{ customer.country.name }}</td>
            <td>{{ customer.company }}</td>
            <td>{{ customer.representative.name }}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="paginatorleft">
        <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
    </ng-template>
    <ng-template pTemplate="paginatorright">
        <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
    </ng-template>
</p-table>
```

--------------------------------

### Implement Basic BlockUI

Source: https://primeng-v15.pages.dev/blockui

Use the target property to specify the element to block and the blocked property to toggle the state.

```html
<button type="button" pButton pRipple label="Block" (click)="blockedPanel = true"></button>
<button type="button" pButton pRipple label="Unblock" (click)="blockedPanel = false"></button>
<p-blockUI [target]="pnl" [blocked]="blockedPanel">
    <i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #pnl header="Header" styleClass="mt-4">
    <p class="m-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</p-panel>
```

--------------------------------

### Basic ProgressSpinner Usage

Source: https://primeng-v15.pages.dev/progressspinner

Displays the default infinite spin animation.

```html
<p-progressSpinner></p-progressSpinner>
```

--------------------------------

### Display Basic Icons

Source: https://primeng-v15.pages.dev/icons

Use the pi pi-{icon} class syntax on i or span elements to render icons.

```html
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>
<span class="pi pi-search"></span>
<span class="pi pi-user"></span>
```

--------------------------------

### Basic Timeline Implementation

Source: https://primeng-v15.pages.dev/timeline

Display a basic timeline by binding an events array to the value property and defining a content template.

```html
<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>
```

--------------------------------

### Enable Time Picker

Source: https://primeng-v15.pages.dev/calendar

Enables time selection with the showTime property and includes seconds with showSeconds.

```html
<p-calendar [(ngModel)]="date" [showTime]="true" [showSeconds]="true"></p-calendar>
```

--------------------------------

### Implement Responsive Galleria

Source: https://primeng-v15.pages.dev/galleria

Define responsive behavior using the responsiveOptions property to adjust layout based on screen size.

```html
<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="7" [circular]="true">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
    </ng-template>
    <ng-template pTemplate="thumbnail" let-item>
        <div class="grid grid-nogutter justify-content-center">
            <img [src]="item.thumbnailImageSrc" style="display: block;" />
        </div>
    </ng-template>
</p-galleria>
```

--------------------------------

### Implement Customized Timeline Template

Source: https://primeng-v15.pages.dev/timeline

Create a complex timeline layout using custom markers and p-card components for event content.

```html
<p-timeline [value]="events" align="alternate" styleClass="customized-timeline">
    <ng-template pTemplate="marker" let-event>
        <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
            <i [ngClass]="event.icon"></i>
        </span>
    </ng-template>
    <ng-template pTemplate="content" let-event>
        <p-card [header]="event.status" [subheader]="event.date">
            <img *ngIf="event.image" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                neque quas!
            </p>
            <button pButton label="Read more" class="p-button-text"></button>
        </p-card>
    </ng-template>
</p-timeline>
```

--------------------------------

### Import TooltipModule

Source: https://primeng-v15.pages.dev/tooltip

Include the TooltipModule in your application to enable the pTooltip directive.

```typescript
import { TooltipModule } from 'primeng/tooltip';
```
Tokens:
Raw