PrimeNG

https://v17.primeng.org
Admin
PrimeNG is a comprehensive suite of customizable, feature-rich UI components designed to elevate web...
Tokens:340,416
Snippets:2,661
Trust Score:9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install dependencies and run showcase

Source: https://v17.primeng.org/contribution

Install npm dependencies and serve the showcase locally at http://localhost:3000/.

```bash
npm install
ng serve
```

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

### Install PrimeNG with npm

Source: https://v17.primeng.org/installation

Run this command in your project directory to install PrimeNG from npm.

```bash
npm install primeng
```

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

### Install PrimeIcons via npm

Source: https://v17.primeng.org/icons

Run this command to install the PrimeIcons package from npm.

```bash
npm install primeicons
```

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

### Basic p-toolbar with groups

Source: https://v17.primeng.org/toolbar

Basic example with content in the start, center, and end sections using the built-in 'p-toolbar-group-*' classes. The 'items' property for the p-splitButton is not defined in this snippet.

```html
<p-toolbar>
    <div class="p-toolbar-group-start">
        <p-button icon="pi pi-plus" class="mr-2"/>
        <p-button icon="pi pi-print" class="mr-2"/>
        <p-button icon="pi pi-upload" />
    </div>
    <div class="p-toolbar-group-center">
        <span class="p-input-icon-left">
            <i class="pi pi-search"></i>
            <input pInputText placeholder="Search" />
        </span>
    </div>
    <div class="p-toolbar-group-end">
        <p-splitButton label="Save" icon="pi pi-check" [model]="items" />
    </div>
</p-toolbar>
```

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

### Install Quill dependency

Source: https://v17.primeng.org/editor

Install Quill as a dependency because the Editor uses Quill underneath.

```bash
npm install quill
```

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

### Install chart.js with npm

Source: https://v17.primeng.org/chart

Install the Chart.js package using npm. This is required before using the chart component.

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

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

### Routing with Steps and Router Outlet

Source: https://v17.primeng.org/steps/confirmation

Example using nested routes with Steps, including a toast and a router outlet.

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

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

### Customizing show and hide animations

Source: https://v17.primeng.org/messages

Customizes the show and hide transition options. The example sets both to '500ms' and disables the service with enableService=false. This example uses a value binding for messages.

```html
<p-messages 
    [(value)]="messages" 
    [showTransitionOptions]="'500ms'" 
    [hideTransitionOptions]="'500ms'" 
    [enableService]="false" />
```

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

### Prefix and suffix with p-inputNumber

Source: https://v17.primeng.org/inputnumber

Demonstrates adding custom text before or after the input using the prefix and suffix properties. The examples include a mile suffix, a percent prefix, an expiry message with both prefix and suffix, and a temperature input with a prefix arrow and degree Celsius suffix. The temperature example also sets min and max boundaries.

```html
<p-inputNumber 
    [(ngModel)]="value1" 
    inputId="mile" 
    suffix=" mi" /> 

<p-inputNumber 
    [(ngModel)]="value2" 
    inputId="percent" 
    prefix="%" /> 

<p-inputNumber 
    [(ngModel)]="value3"
    inputId="expiry" 
    prefix="Expires in "
    suffix=" days" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    prefix="↑ " 
    inputId="temperature" 
    suffix="℃" 
    [min]="0" 
    [max]="40" />

```

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

### InputNumber Numerals Examples

Source: https://v17.primeng.org/inputnumber

Four p-inputNumber examples demonstrating integer-only input, decimal without grouping, min-max fraction digits, and min-max boundaries. All use [(ngModel)] for two-way binding.

```html
<p-inputNumber 
    inputId="integeronly" 
    [(ngModel)]="value1" /> 

<p-inputNumber 
    [(ngModel)]="value2" 
    mode="decimal" 
    inputId="withoutgrouping" 
    [useGrouping]="false" /> 

<p-inputNumber 
    [(ngModel)]="value3" 
    inputId="minmaxfraction" 
    mode="decimal" 
    [minFractionDigits]="2" 
    [maxFractionDigits]="5" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    inputId="minmax" 
    mode="decimal" 
    [min]="0" 
    [max]="100" /> 
```

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

### Nested Splitter Example

Source: https://v17.primeng.org/splitter

Combine splitters to create advanced layouts. This example nests a vertical splitter inside a horizontal one, and further nests another horizontal splitter inside the vertical one.

```html
<p-splitter 
    [style]="{ height: '300px' }" 
    [panelSizes]="[20, 80]" 
    [minSizes]="[10, 0]" 
    styleClass="mb-5">
        <ng-template pTemplate>
            <div class="col flex align-items-center justify-content-center">
                Panel 1
            </div>
        </ng-template>
        <ng-template pTemplate>
            <p-splitter layout="vertical" [panelSizes]="[15, 85]">
                <ng-template pTemplate>
                    <div style="flex-grow: 1;" class="flex align-items-center justify-content-center">
                        Panel 2
                    </div>
                </ng-template>
                <ng-template pTemplate>
                    <p-splitter [panelSizes]="[20, 80]">
                        <ng-template pTemplate>
                            <div class="col flex align-items-center justify-content-center">
                                Panel 3
                            </div>
                        </ng-template>
                        <ng-template pTemplate>
                            <div class="col flex align-items-center justify-content-center">
                                Panel 4
                            </div>
                        </ng-template>
                    </p-splitter>
                </ng-template>
            </p-splitter>
        </ng-template>
</p-splitter>
```

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

### Drag and Drop to Table

Source: https://v17.primeng.org/dragdrop

Example demonstrating dragging items from a list into a p-table component using defined scopes.

```html
<div class="card grid grid-nogutter">
    <div class="col-12 md:col-6 drag-column">
        <div *ngFor="let product of availableProducts">
            <div 
                class="product-item" 
                pDraggable="products" 
                (onDragStart)="dragStart(product)" 
                (onDragEnd)="dragEnd()">
                    <div class="image-container">
                        <img 
                            src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" 
                            [alt]="product.name" 
                            class="product-image" />
                    </div>
                    <div class="product-list-detail">
                        <h5 class="mb-2">
                            {{product.name}}
                        </h5>
                        <i class="pi pi-tag product-category-icon"></i>
                        <span class="product-category">
                            {{product.category}}
                        </span>
                        </div>
                        <div class="product-list-action">
                        <h6 class="mb-2">
                            {{product.price}}
                        </h6>
                        <p-tag 
                            [value]="product.inventoryStatus" 
                            [severity]="getSeverity(product.inventoryStatus)" />
                    </div>
            </div>
        </div>
    </div>
    <div class="col-12 md:col-6 drop-column" pDroppable="products" (onDrop)="drop()">
    <p-table [value]="selectedProducts">
        <ng-template pTemplate="header">
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Category
                </th>
                <th>
                    Name
                </th>
                <th>
                    Price
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product>
            <tr>
                <td>
                    {{product.id}}
                </td>
                <td>
                    {{product.category}}
                </td>
                <td>
                    {{product.name}}
                </td>
                <td>
                    {{product.price}}
                </td>
            </tr>
            </ng-template>
        </p-table>
    </div>
</div>
```

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

### Accessibility examples

Source: https://v17.primeng.org/inputswitch

Provide a label via label tag with inputId, or use ariaLabelledBy or ariaLabel props.

```html
<label for="switch1">Remember Me</label>
<p-inputSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<p-inputSwitch ariaLabelledBy="switch2" />

<p-inputSwitch ariaLabel="Remember Me" />
```

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

### DataView with Layout Options and Product Display

Source: https://v17.primeng.org/dataview

Basic DataView example with header containing layout options and list/grid templates for displaying product information including rating, price, and action buttons.

```HTML
<p-dataView #dv [value]="products" [layout]="layout">
    <ng-template pTemplate="header">
        <div class="flex justify-content-end">
            <p-dataViewLayoutOptions [layout]="layout" />
        </div>
    </ng-template>
    <ng-template pTemplate="list" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12" *ngFor="let product of products">
                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" [ngClass]="{ 'border-top-1 surface-border': !first }">
                    <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" />
                            <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.inventoryStatus)" />
                            </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>
                            <div class="flex gap-2">
                                <p-button icon="pi pi-shopping-cart" class="flex-auto md:flex-initial white-space-nowrap" label="Buy Now" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" />
                                <p-button icon="pi pi-heart" [outlined]="true" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template let-product pTemplate="grid" let-products>
        <div class="grid grid-nogutter">
            <div class="col-12 sm:col-6 md:col-4 xl:col-3 p-2" *ngFor="let product of products">
                <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">
                        <div class="flex items-center gap-2">
                            <i class="pi pi-tag"></i>
                            <span class="font-semibold">{{ product.category }}</span>
                        </div>
                        <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
                    </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 text-900">{{ product.name }}</div>
                        <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false" />
                    </div>
                    <div class="flex align-items-center justify-content-between">
                        <span class="text-2xl font-semibold">{{ '$' + product.price }}</span>
                        <p-button icon="pi pi-shopping-cart" [rounded]="true" [text]="true" />
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-dataView>
```

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

### TabMenu with item template

Source: https://v17.primeng.org/tabmenu

TabMenu supports templating via the item template which gets the menuitem instance and the index. The example shows a custom template with an image and label.

```html
<p-tabMenu [model]="items" [activeItem]="activeItem">
    <ng-template pTemplate="item" let-item>
        <a pRipple class="flex align-items-center gap-2 p-menuitem-link">
            <img 
                [alt]="item.name" 
                [src]="'https://primefaces.org/cdn/primeng/images/demo/avatar/' + item.image" 
                style="width: 32px" />
            <span class="font-bold">
                {{ item.name }}
            </span>
        </a>
    </ng-template>
</p-tabMenu>
```

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

### Close DynamicDialog and pass selected product (TypeScript)

Source: https://v17.primeng.org/dynamicdialog

Shows how to close a dynamic dialog from the ProductListDemo by passing a selected product. The parameter passed to close() is available at the caller's onClose event. The example includes the full component setup with DialogService and MessageService.

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

@Component({
    templateUrl: './dynamicdialogdemo.html',
    providers: [DialogService, MessageService]
})
export class DynamicDialogDemo {

    ref: DynamicDialogRef | undefined;
    
    constructor(public dialogService: DialogService, public messageService: MessageService) {}

    show() {
        this.ref = this.dialogService.open(ProductListDemo, {
            header: 'Select a Product',
            width: '70%',
            contentStyle: { overflow: 'auto' },
            baseZIndex: 10000,
            maximizable: true
        });

        this.ref.onClose.subscribe((product: Product) => {
            if (product) {
                this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name });
            }
        });
    }
}
```

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

### Sample InputOtp with templating

Source: https://v17.primeng.org/inputotp

Sample implementation with custom templating, additional elements like a separator and action buttons for authentication flow. Includes length set to 6 and handling of paste events.

```html
<div class="flex flex-column align-items-center">
    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
    <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
    <p-inputOtp [(ngModel)]="value" [length]="6" style="gap: 0">
        <ng-template pTemplate="input" let-token let-events="events" let-index="index">
            <input 
                pInputText
                type="text" 
                [maxLength]="1" 
                (input)="events.input($event)" 
                (keydown)="events.keydown($event)"
                (paste)="events.paste($event)"
                [attr.value]="token" 
                class="custom-otp-input" />
            <div *ngIf="index === 3" class="px-3">
                <i class="pi pi-minus"></i>
            </div>
        </ng-template>
    </p-inputOtp>
    <div class="flex justify-content-between mt-5 align-self-stretch">
        <p-button label="Resend Code" [link]="true" class="p-0"/>
        <p-button label="Submit Code"/>
    </div>
</div>
```

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

### Menubar with Custom Templates

Source: https://v17.primeng.org/menubar

Custom content can be placed inside the menubar using the _start_ and _end_ templates. This example shows a custom start template with an SVG logo, a custom item template that displays icons, labels, badges, shortcuts, and submenu indicators, and an end template with a search input and an avatar.

```html
<p-menubar [model]="items">
    <ng-template pTemplate="start">
        <svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..." fill="var(--primary-color)" />
            <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
                <path d="..." fill="var(--primary-color-text)" />
            </mask>
            <g mask="url(#mask0_1_36)">
                <path fill-rule="evenodd" clip-rule="evenodd" d="..." />
            </g>
            <path d="..." fill="var(--primary-color-text)" />
            <path d="..." fill="var(--primary-color-text)" />
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="..."
                fill="var(--primary-color-text)"
            />
            <path d="..." fill="var(--primary-color-text)" />
            <path d="..." fill="var(--primary-color-text)" />
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="..."
                fill="var(--primary-color-text)"
            />
            <path d="..." fill="var(--primary-color-text)" />
            <path d="..." fill="var(--primary-color-text)" />
            <path d="..." fill="var(--primary-color-text)" />
            <path d="..." fill="var(--primary-color-text)" />
        </svg>
    </ng-template>
    <ng-template pTemplate="item" let-item let-root="root">
        <a pRipple class="flex align-items-center p-menuitem-link">
            <span [class]="item.icon"></span>
            <span class="ml-2">{{ item.label }}</span>
            <p-badge *ngIf="item.badge" [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge" />
            <span *ngIf="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
            <i *ngIf="item.items" [ngClass]="['pi', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>
        </a>
    </ng-template>
    <ng-template pTemplate="end">
        <div class="flex align-items-center gap-2">
            <input type="text" pInputText placeholder="Search" class="w-8rem sm:w-auto" />
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
        </div>
    </ng-template>
</p-menubar>
```

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

### Basic InputGroup with add-ons

Source: https://v17.primeng.org/inputgroup

Creates an InputGroup by wrapping add-ons inside the p-inputGroup element. Shows examples with an icon, currency symbols, and a website prefix.

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

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

### Basic FileUpload with mode="basic"

Source: https://v17.primeng.org/fileupload

Basic mode provides a simpler UI. Configure with chooseLabel, chooseIcon, name, url, accept, maxFileSize, and onUpload event.

```html
<p-fileUpload 
    mode="basic" 
    chooseLabel="Choose" 
    chooseIcon="pi pi-upload"
    name="demo[]" 
    url="https://www.primefaces.org/cdn/api/upload.php" 
    accept="image/*" 
    maxFileSize="1000000" 
    (onUpload)="onUpload($event)" />
```

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

### SplitButton severity examples

Source: https://v17.primeng.org/splitbutton

Examples of SplitButton with different severity levels: secondary, success, info, warning, help, and danger.

```html
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="secondary" />
<p-splitButton 
    label="Save" 
    (onClick)="save('success')" 
    [model]="items" 
    severity="success" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="info" />
<p-splitButton 
    label="Save" 
    (onClick)="save('warn')" 
    [model]="items" 
    severity="warning" />
<p-splitButton 
    label="Save" 
    (onClick)="save('info')" 
    [model]="items" 
    severity="help" />
<p-splitButton 
    label="Save" 
    (onClick)="save('error')" 
    [model]="items" 
    severity="danger" />
```

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

### Basic Menubar with Model

Source: https://v17.primeng.org/menubar

Basic menubar usage with a model binding and a toast component for command callbacks.

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

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

### MeterGroup with custom templates for labels, meters, start, and end

Source: https://v17.primeng.org/metergroup

Demonstrates the templating support of MeterGroup. It uses the labelPosition="start" attribute and defines four templates: label, meter, start, and end. The label template renders a card for each meter item, the meter template customizes the meter bar with a gradient, the start template shows storage information, and the end template provides action buttons.

```html
<p-meterGroup [value]="value" labelPosition="start">
    <ng-template pTemplate="label">
        <div class="flex flex-wrap gap-3">
            <ng-container *ngFor="let meterItem of value; let index = index">
                <p-card class="flex-1">
                    <div class="flex justify-content-between gap-5">
                        <div class="flex flex-column gap-1">
                            <span class="text-secondary text-sm">{{ meterItem.label }}</span>
                            <span class="font-bold text-lg">{{ meterItem.value }}%</span>
                        </div>
                        <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" [style]="{ 'background-color': meterItem.color1, color: '#ffffff' }">
                            <i [class]="meterItem.icon"></i>
                        </span>
                    </div>
                </p-card>
            </ng-container>
        </div>
    </ng-template>
    <ng-template pTemplate="meter" let-value let-class="class" let-width="size">
        <span [class]="class" [style]="{ background: 'linear-gradient(to right, ' + value.color1 + ', ' + value.color2 + ')', width: width }"></span>
    </ng-template>
    <ng-template pTemplate="start" let-totalPercent="totalPercent">
        <div class="flex justify-content-between mt-3 mb-2 relative">
            <span>Storage</span>
            <span [style]="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
            <span class="font-medium">1TB</span>
        </div>
    </ng-template>
    <ng-template pTemplate="end">
        <div class="flex justify-content-between mt-3">
            <p-button label="Manage Storage" [outlined]="true" size="small" />
            <p-button label="Update Plan" size="small" />
        </div>
    </ng-template>
</p-meterGroup>
```

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

### Custom Ripple Styling Example

Source: https://v17.primeng.org/ripple

Apply the ripple effect to a div with custom styling using the pRipple directive. The example shows a green styled box.

```html
<div pRipple class="card styled-box-green shadow-2">
    Green
</div>
```

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

### Enable preview mode with [preview]="true"

Source: https://v17.primeng.org/image

Add [preview]="true" to display a modal layer on click with transformation options like rotating and zooming.

```html
<p-image 
    src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" 
    alt="Image" 
    width="250" 
    [preview]="true" />
```

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

### Disabled state example

Source: https://v17.primeng.org/listbox

Shows how to disable the Listbox by setting the 'disabled' property to true. The example uses a list of cities with a selected city bound via ngModel.

```html
<p-listbox 
    [options]="cities" 
    [(ngModel)]="selectedCity" 
    optionLabel="name" 
    [disabled]="true" 
    [style]="{ width: '15rem' }" 
    [listStyle]="{'max-height': '220px'}" />
```

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

### Timeline Alignment Examples

Source: https://v17.primeng.org/timeline

Three Timeline examples showing different alignments: left (default), right, and alternate. The align property controls the content position relative to the line.

```html
<p-timeline [value]="events" class="w-full md:w-20rem">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>
```

```html
<p-timeline [value]="events" class="w-full md:w-20rem" align="right">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>
```

```html
<p-timeline [value]="events" class="w-full md:w-20rem" align="alternate">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>
```

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

### Basic ConfirmDialog usage

Source: https://v17.primeng.org/confirmdialog

Define a ConfirmDialog with the p-confirmDialog tag and use ConfirmationService to display it. The example includes a toast and two buttons that trigger confirmations.

```html
<p-toast />
<p-confirmDialog />
<p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
<p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
```

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

### Basic Steps Usage

Source: https://v17.primeng.org/steps/confirmation

Basic usage of the Steps component with a model of menuitems and readonly set to true.

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

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

### Invalid state example

Source: https://v17.primeng.org/listbox

Shows how to apply the invalid state to a Listbox by adding the 'ng-invalid' and 'ng-dirty' classes. The example uses a list of cities with a selected city bound via ngModel.

```html
<p-listbox 
    [options]="cities" 
    [(ngModel)]="selectedCity" 
    optionLabel="name" 
    class="ng-invalid ng-dirty" 
    [style]="{ width: '15rem' }" 
    [listStyle]="{'max-height': '220px'}" />
```

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

### InputNumber Locale Examples

Source: https://v17.primeng.org/inputnumber

Four p-inputNumber examples showing locale customization: user locale (default), en-US, de-DE, and en-IN. The locale property sets grouping and decimal symbols.

```html
<p-inputNumber 
    [(ngModel)]="value1" 
    inputId="locale-user" 
    [minFractionDigits]="2" />

<p-inputNumber 
    [(ngModel)]="value2" 
    inputId="locale-us" 
    mode="decimal" 
    locale="en-US" 
    [minFractionDigits]="2" /> 

<p-inputNumber 
    [(ngModel)]="value3" 
    inputId="locale-german" 
    mode="decimal" 
    locale="de-DE" 
    [minFractionDigits]="2" /> 

<p-inputNumber 
    [(ngModel)]="value4" 
    inputId="locale-indian" 
    mode="decimal" 
    locale="en-IN" 
    [minFractionDigits]="2" />
```

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

### Basic OverlayPanel with toggle method

Source: https://v17.primeng.org/overlaypanel

OverlayPanel is accessed via its reference and visibility is controlled using toggle, show, and hide methods with an event of the target. This example shows a share button that toggles the overlay panel.

```html
<p-button (onClick)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
    <p-overlayPanel #op>
        <div class="flex flex-column gap-3 w-25rem">
            <div>
                <span class="font-medium text-900 block mb-2">Share this document</span>
                <p-inputGroup>
                    <input pInputText value="https://primeng.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-25rem" />
                    <p-inputGroupAddon>
                        <i class="pi pi-copy"></i>
                    </p-inputGroupAddon>
                </p-inputGroup>
            </div>
            <div>
                <span class="font-medium text-900 block mb-2">Invite Member</span>
                <div class="flex">
                    <p-chips disabled />
                    <p-button label="Invite" icon="pi pi-users" />
                </div>
            </div>
            <div>
                <span class="font-medium text-900 block mb-2">Team Members</span>
                <ul class="list-none p-0 m-0 flex flex-column gap-3">
                    <li *ngFor="let member of members" class="flex align-items-center gap-2">
                        <img [src]="'https://primefaces.org/cdn/primeng/images/demo/avatar/' + member.image" style="width: 32px" />
                        <div>
                            <span class="font-medium">{{ member.name }}</span>
                            <div class="text-sm text-color-secondary">{{ member.email }}</div>
                        </div>
                        <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
                            <span>{{ member.role }}</span>
                            <i class="pi pi-angle-down"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </p-overlayPanel>
```

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

### open

Source: https://v17.primeng.org/dynamicdialog

Displays the dialog using the dynamic dialog object options.

```APIDOC
## open

### Description
Displays the dialog using the dynamic dialog object options.

### Method
open

### Parameters
- **componentType** (Type) - Required - The component type to display in the dialog.
- **config** (DynamicDialogConfig) - Required - Configuration options for the dialog.

### Returns
- **DynamicDialogRef** - A reference to the opened dialog.
```

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

### Maximizable Dialog with p-dialog

Source: https://v17.primeng.org/dialog

Set [maximizable]="true" to enable full screen mode for the dialog. The example includes a button to show the dialog and a dialog with modal, style, and breakpoints.

```HTML
<p-button (onClick)="showDialog()" label="Show" />
<p-dialog 
    header="Header" 
    [modal]="true"
    [(visible)]="visible" 
    [style]="{ width: '50rem' }" 
    [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }" 
    [maximizable]="true">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </p>
</p-dialog>
```

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

### Basic Inplace with display and content templates

Source: https://v17.primeng.org/inplace

Basic usage of the Inplace component requiring display and content templates. Clicking the display content shows the actual content.

```html
<p-inplace>
    <ng-template pTemplate="display">
        <span>View Content</span>
    </ng-template>
    <ng-template pTemplate="content">
        <span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </span>
    </ng-template>
</p-inplace>
```

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

### Accessibility screen reader example

Source: https://v17.primeng.org/listbox

Shows how to provide an accessible label for the Listbox using the 'ariaLabelledBy' or 'ariaLabel' properties. The first example references a span with id 'lb', the second uses a direct label.

```html
<span id="lb">Options</span>
<p-listbox ariaLabelledBy="lb"/>

<p-listbox ariaLabel="City"/>
```

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

### Accessibility ARIA Labels for TreeSelect

Source: https://v17.primeng.org/treeselect

Provides examples of how to set accessible labels for the TreeSelect using 'ariaLabelledBy' or 'ariaLabel' props. The first example references a span with id 'dd1', the second uses a direct label.

```html
<span id="dd1">Options</span>
<p-treeSelect ariaLabelledBy="dd1" />

<p-treeSelect ariaLabel="Options" />
```

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

### Conditional Style: ngClass with row data

Source: https://v17.primeng.org/treetable

Use ngClass on the row and cells to apply styles conditionally based on row data. The row gets 'p-highlight' when size ends with 'kb', and the size cell gets 'font-bold' under the same condition.

```HTML
<p-treeTable 
    [value]="files" 
    [columns]="cols" 
    [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 [ttRow]="rowNode" [ngClass]="{ 'p-highlight': rowData.size.endsWith('kb') }">
                <td 
                    *ngFor="let col of columns; let i = index" 
                    [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                        {{ rowData[col.field] }}
                </td>
            </tr>
        </ng-template>
</p-treeTable>
```

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

### Open DynamicDialog with button and toast (HTML)

Source: https://v17.primeng.org/dynamicdialog

Template for the DynamicDialogDemo component. It includes a toast and a button that triggers the show() method to open the dialog. The button label is 'Select a Product'.

```html
<p-toast />
<p-button (onClick)="show()" icon="pi pi-search" label="Select a Product" />
```

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

### SplitterResizeStartEvent

Source: https://v17.primeng.org/splitter

Custom panel resize start event.

```APIDOC
## SplitterResizeStartEvent

### Description
Custom panel resize start event.

### Properties
- **originalEvent** (MouseEvent | TouchEvent) - Browser event.
- **sizes** (number[]) - Collapsed state of the panel.
```

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

### Project structure overview

Source: https://v17.primeng.org/contribution

Shows the main directories of the PrimeNG project: showcase for the website and components for components and directives.

```text
- app
  - showcase                // website
  - components              // main directory of components and directives
```

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

### Horizontal Timeline with align top, bottom, and alternate

Source: https://v17.primeng.org/timeline

Three examples of a horizontal timeline using the layout property set to 'horizontal' with align values 'top', 'bottom', and 'alternate'. The 'alternate' example includes an opposite template with a non-breaking space to create spacing.

```HTML
<p-timeline [value]="events" layout="horizontal" align="top">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
</p-timeline>
```

```HTML
<p-timeline [value]="events" layout="horizontal" align="bottom">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
</p-timeline>
```

```HTML
<p-timeline [value]="events" layout="horizontal" align="alternate">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
    <ng-template pTemplate="opposite" let-event>
        <span>&nbsp;</span>
    </ng-template>
</p-timeline>
```

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

### Basic OrderList with custom item template

Source: https://v17.primeng.org/orderlist

A basic OrderList example with a custom item template. The value is bound to a products array, and the list style is set to a fixed height. The template displays product image, name, category, and price.

```html
<p-orderList 
    [value]="products" 
    [listStyle]="{ height: '25rem' }" 
    header="List of Products">
        <ng-template let-product pTemplate="item">
            <div class="flex flex-wrap p-2 align-items-center gap-3">
                <img 
                    src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" 
                    [alt]="product.name" 
                    class="w-4rem shadow-2 flex-shrink-0 border-round" />
                        <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-orderList>
```

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

### Conditional Row and Cell Styling with ngClass

Source: https://v17.primeng.org/table

Applies conditional styles to rows and cells based on product properties. Rows get the 'row-accessories' class when category is 'Accessories'. Quantity cells get 'outofstock', 'lowstock', or 'instock' classes based on quantity value.

```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 [ngClass]="{'row-accessories': product.category === 'Accessories'}">
            <td>{{product.code}}</td>
            <td>{{product.name}}</td>
            <td>{{product.category}}</td>
            <td>
                <div [ngClass]="{'outofstock': product.quantity === 0, 'lowstock': (product.quantity > 0 && product.quantity < 10),'instock': product.quantity > 10}">
                    {{product.quantity}}
                </div>
            </td>
        </tr>
    </ng-template>
</p-table>
```
Tokens:
Raw