PrimeNG

https://v19.primeng.org/
Admin
PrimeNG is a comprehensive suite of customizable, feature-rich UI components for Angular, offering...
Tokens:208,733
Snippets:1,587
Trust Score:9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install PrimeNG and Themes with yarn

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

Use yarn to install PrimeNG and the themes package as an alternative to npm.

```bash
yarn add primeng @primeng/themes
```

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

### $dt example: get token information

Source: https://v19.primeng.org/theming

Shows how to use $dt to retrieve token details like name, variable, and value. Includes examples for transition.duration and primary.color.

```typescript
const duration = $dt('transition.duration');
/*
    duration: {
        name: '--transition-duration',
        variable: 'var(--p-transition-duration)',
        value: '0.2s'
    }
*/

const primaryColor = $dt('primary.color');
/*
    primaryColor: {
        name: '--primary-color',
        variable: 'var(--p-primary-color)',
        value: {
        light: {
            value: '#10b981',
            paths: {
                name: 'semantic.primary.color',
                binding: {
                    name: 'primitive.emerald.500'
                }
            }
        },
        dark: {
            value: '#34d399',
            paths: {
                name: 'semantic.primary.color',
                binding: {
                    name: 'primitive.emerald.400'
                }
            }
        }
    }
}
*/
```

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

### Install chart.js with npm

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

Install the chart.js package using npm, which is required for the Chart component to work.

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

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

### Accessibility Examples

Source: https://v19.primeng.org/toggleswitch

Provides examples for labeling the ToggleSwitch for screen readers using label with inputId, ariaLabelledBy, and ariaLabel.

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

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

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

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

### Install PrimeIcons with npm

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

Run this command to download the PrimeIcons library to your project.

```bash
npm install primeicons
```

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

### Overlay Badge Examples

Source: https://v19.primeng.org/badge

Shows how to use the OverlayBadge component to add badges to icons, including a danger severity example and a badge without a value.

```html
<p-overlaybadge value="2">
    <i class="pi pi-bell" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge value="4" severity="danger">
    <i class="pi pi-calendar" style="font-size: 2rem"></i>
</p-overlaybadge>
<p-overlaybadge severity="danger">
    <i class="pi pi-envelope" style="font-size: 2rem"></i>
</p-overlaybadge>
```

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

### Install PrimeNG and Themes with pnpm

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

Use pnpm to install PrimeNG and the themes package as an alternative to npm or yarn.

```bash
pnpm add primeng @primeng/themes
```

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

### palette example: get shades and tints

Source: https://v19.primeng.org/theming

Returns shades and tints of a given color from 50 to 950 as an array. Shows usage with a custom color and an existing token set.

```typescript
// custom color
const values1 = palette('#10b981');

// copy an existing token set
const primaryColor = palette('{blue}');
```

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

### Install PrimeNG and Themes with npm

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

Use npm to install PrimeNG and the themes package. This is the recommended package manager for Angular CLI projects.

```bash
npm install primeng @primeng/themes
```

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

### Basic Toolbar with start, center, and end templates

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

Basic usage of the Toolbar component with start, center, and end templates. The start template contains buttons, the center template contains a search input, and the end template contains a split button.

```html
<p-toolbar>
    <ng-template #start>
        <p-button icon="pi pi-plus" class="mr-2" text severity="secondary" />
        <p-button icon="pi pi-print" class="mr-2" text severity="secondary" />
        <p-button icon="pi pi-upload" text severity="secondary" />
    </ng-template>
    <ng-template #center>
        <p-iconfield iconPosition="left">
            <p-inputicon styleClass="pi pi-search" />
            <input type="text" pInputText placeholder="Search" />
        </p-iconfield>
    </ng-template>
    <ng-template #end>
        <p-splitbutton label="Save" [model]="items" />
    </ng-template>
</p-toolbar>
```

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

### updatePreset example: change primary color palette

Source: https://v19.primeng.org/theming

Merges provided tokens into the current preset. This example changes the primary color palette to indigo shades.

```typescript
changePrimaryColor() {
    updatePreset({
        semantic: {
            primary: {
                50: '{indigo.50}',
                100: '{indigo.100}',
                200: '{indigo.200}',
                300: '{indigo.300}',
                400: '{indigo.400}',
                500: '{indigo.500}',
                600: '{indigo.600}',
                700: '{indigo.700}',
                800: '{indigo.800}',
                900: '{indigo.900}',
                950: '{indigo.950}'
            }
        }
    })
}
```

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

### Verify Setup with Button Component (TypeScript)

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

Create a standalone Angular component that imports ButtonModule from 'primeng/button' to verify the PrimeNG setup. This component is registered individually for bundle optimization.

```typescript
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@Component({
    selector: 'button-demo',
    templateUrl: './button-demo.html',
    standalone: true,
    imports: [ButtonModule]
})
export class ButtonDemo {}
```

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

### Locale Examples

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

Shows four InputNumber examples with different locale settings: user locale, en-US, de-DE, and en-IN. The locale property defaults to the user locale.

```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" />
```

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

### Verify Setup with Button Component (HTML)

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

HTML template for the ButtonDemo component, displaying a PrimeNG button with the label 'Check'.

```html
<div class="card flex justify-center">
    <p-button label="Check" />
</div>
```

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

### Nested SplitButton

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

Example with a click handler that passes an argument, demonstrating nested menu support.

```html
<p-splitbutton label="Save" (onClick)="save('info')" [model]="items" />
```

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

### Multiple Toasts Example

Source: https://v19.primeng.org/toast

Displays multiple toasts by passing an array to the 'showAll' method of the 'messageService'. Includes a button to trigger the display.

```html
<p-toast />
<p-button pRipple (click)="show()" label="Multiple" severity="warn" />
```

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

### Line Chart

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

A line chart example using the p-chart component with type="line".

```html
<p-chart type="line" [data]="data" [options]="options" class="h-[30rem]" />
```

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

### Pie Chart

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

A pie chart example using the p-chart component with type="pie".

```html
<p-chart type="pie" [data]="data" [options]="options" class="w-full md:w-[30rem]" />
```

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

### Accessibility examples

Source: https://v19.primeng.org/autocomplete

Shows how to provide accessible labels for the AutoComplete component using label with inputId, ariaLabelledBy, and ariaLabel.

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

<span id="ac2">Email</span>
<p-autocomplete ariaLabelledBy="ac2" />

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

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

### Advanced mock desktop UI with Dock and other components

Source: https://v19.primeng.org/dock

Advanced example showing a mock desktop UI that combines Dock with Menubar, Dialog, Terminal, Galleria, and Toast. The Dock is positioned at the bottom and uses a custom item template with tooltips.

```html
<p-menubar [model]="menubarItems">
    <ng-template #start>
        <i class="pi pi-apple px-2"></i>
    </ng-template>
    <ng-template #end>
        <i class="pi pi-video px-2"></i>
        <i class="pi pi-wifi px-2"></i>
        <i class="pi pi-volume-up px-2"></i>
        <span class="px-2">Fri 13:07</span>
        <i class="pi pi-search px-2"></i>
        <i class="pi pi-bars px-2"></i>
    </ng-template>
</p-menubar>
<div class="dock-window">
    <p-dock [model]="dockItems" position="bottom">
        <ng-template #item let-item>
            <a [pTooltip]="item.label" tooltipPosition="top" class="p-dock-item-link">
                <img [alt]="item.label" [src]="item.icon" style="width: 100%" />
            </a>
        </ng-template>
    </p-dock>

    <p-toast position="top-center" key="tc" />

    <p-dialog
        [(visible)]="displayFinder"
        [breakpoints]="{ '960px': '50vw' }"
        [style]="{ width: '30vw', height: '18rem' }"
        [draggable]="false"
        [resizable]="false"
        header="Finder"
    >
        <p-tree [value]="nodes" />
    </p-dialog>

    <p-dialog
        [maximizable]="true"
        [(visible)]="displayTerminal"
        [breakpoints]="{ '960px': '50vw' }"
        [style]="{ width: '30vw' }"
        [draggable]="false"
        [resizable]="false"
        header="Terminal"
    >
        <p-terminal welcomeMessage="Welcome to PrimeNG (cmd: 'date', 'greet {0}', 'random')" prompt="primeng $" />
    </p-dialog>

    <p-galleria
        [(value)]="images"
        [showThumbnails]="false"
        [showThumbnailNavigators]="false"
        [showItemNavigators]="true"
        [(visible)]="displayGalleria"
        [circular]="true"
        [responsiveOptions]="responsiveOptions"
        [circular]="true"
        [fullScreen]="true"
        [containerStyle]="{ width: '400px' }"
    >
        <ng-template #item let-item>
            <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
        </ng-template>
    </p-galleria>
```

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

### Basic InputGroup with add-ons

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

Shows how to create a basic input group by wrapping inputs and add-ons with p-inputgroup and p-inputgroup-addon. Includes examples with icons, text add-ons, and a select component.

```html
<p-inputgroup>
    <p-inputgroup-addon>
        <i class="pi pi-user"></i>
    </p-inputgroup-addon>
    <input pInputText [(ngModel)]="text1" placeholder="Username" />
</p-inputgroup>

<p-inputgroup>
    <p-inputgroup-addon>$</p-inputgroup-addon>
    <p-inputnumber [(ngModel)]="number" placeholder="Price" />
    <p-inputgroup-addon>.00</p-inputgroup-addon>
</p-inputgroup>

<p-inputgroup>
    <p-inputgroup-addon>www</p-inputgroup-addon>
    <input pInputText  [(ngModel)]="text2" placeholder="Website" />
</p-inputgroup>

<p-inputgroup>
    <p-inputgroup-addon>
        <i class="pi pi-map"></i>
    </p-inputgroup-addon>
    <p-select [(ngModel)]="selectedCity" [options]="cities" optionLabel="name" placeholder="City" />
</p-inputgroup>
```

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

### Custom Toolbar with start and end templates

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

Custom Toolbar with start and end templates. The start template includes an SVG logo and text buttons, while the end template includes a Share button and an avatar.

```html
<p-toolbar [style]="{ 'border-radius': '3rem', 'padding': '1rem 1rem 1rem 1.5rem' }">
    <ng-template #start>
        <div class="flex items-center gap-2">
            <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
                <path d="..." fill="var(--p-primary-color)" />
                <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
            </svg>
            <p-button label="Files" text plain />
            <p-button label="Edit" text plain />
            <p-button label="View" text plain />
        </div>
    </ng-template>

    <ng-template #end>
        <div class="flex items-center gap-2">
            <p-button label="Share" severity="contrast" size="small" />
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" [style]="{ width: '32px', height: '32px' }" />
        </div>
    </ng-template>
</p-toolbar>
```

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

### Sticky Toast Example

Source: https://v19.primeng.org/toast

Shows how to make a toast sticky by setting the 'sticky' option to true, overriding the 'life' option so it does not hide automatically. Includes buttons to show and clear the toast.

```html
<p-toast />
<div class="flex flex-wrap gap-2">
    <p-button pRipple (click)="show()" label="Sticky" />
    <p-button pRipple (click)="clear()" label="Clear" severity="secondary" />
</div>
```

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

### Install Quill dependency

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

Install the Quill editor library, which is required by the PrimeNG Editor component.

```bash
npm install quill
```

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

### Animation Example (FadeIn/FadeOut and SlideDown/SlideUp)

Source: https://v19.primeng.org/styleclass

Demonstrates enter and leave animations using pStyleClass with enterFromClass, enterActiveClass, leaveActiveClass, and leaveToClass. Two sets of buttons control fade and slide animations on target elements.

```html
<div class="flex flex-col items-center">
    <div>
        <p-button pStyleClass=".box1" enterFromClass="my-hidden" enterActiveClass="my-fadein" label="FadeIn" class="mr-2" />
        <p-button
            pStyleClass=".box1"
            leaveActiveClass="my-fadeout"
            leaveToClass="my-hidden"
            label="FadeOut"
            severity="secondary"
        />
    </div>
    <div class="h-32">
        <div class="my-hidden animate-duration-500 box1">
            <div
                class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32"
            >
                Custom
            </div>
        </div>
    </div>
</div>
<div class="flex flex-col items-center">
    <div>
        <p-button
            pStyleClass=".box2"
            enterFromClass="hidden"
            enterActiveClass="animate-slidedown"
            label="SlideDown"
            class="mr-2"
        />
        <p-button
            pStyleClass=".box2"
            leaveActiveClass="animate-slideup"
            leaveToClass="hidden"
            label="SlideUp"
            severity="secondary"
        />
    </div>
    <div class="h-32">
        <div class="hidden animate-duration-500 box2 overflow-hidden">
            <div
                class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32"
            >
                Content
            </div>
        </div>
    </div>
</div>
```

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

### Toast Position Example

Source: https://v19.primeng.org/toast

Shows how to set toast positions using the 'position' property with values like 'top-left', 'bottom-left', and 'bottom-right'. Includes buttons to trigger each toast.

```html
<p-toast position="top-left" key="tl" />
<p-toast position="bottom-left" key="bl" />
<p-toast position="bottom-right" key="br" />
<p-button pRipple (click)="showTopLeft()" label="Top Left" />
<p-button pRipple (click)="showBottomLeft()" label="Bottom Left" />
<p-button pRipple (click)="showBottomRight()" label="Bottom Right" />
```

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

### PickList with Custom Item Template

Source: https://v19.primeng.org/picklist

This example demonstrates a PickList with drag-and-drop enabled, responsive design, and a custom template for rendering list items with images and product details.

```html
<p-picklist
    [source]="sourceProducts"
    [target]="targetProducts"
    [dragdrop]="true"
    [responsive]="true"
    [sourceStyle]="{ height: '30rem' }"
    [targetStyle]="{ height: '30rem' }"
    filterBy="name"
    sourceFilterPlaceholder="Search by name"
    targetFilterPlaceholder="Search by name"
    breakpoint="1400px"
    scrollHeight="480px"
>
    <ng-template let-option let-selected="selected" #option>
        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
            <img
                class="w-12 shrink-0 rounded"
                src="https://primefaces.org/cdn/primeng/images/demo/product/{{ option.image }}"
                [alt]="option.name"
            />
            <div class="flex-1 flex flex-col">
                <span class="font-medium text-sm">{{ option.name }}</span>
                <span
                    [ngClass]="{
                        'text-surface-500': !selected,
                        'dark:text-surface-400': !selected,
                        'text-inherit': selected,
                    }"
                    >{{ option.category }}</span
                >
            </div>
            <span class="font-bold sm:ml-8">{{ '$' + option.price }}</span>
        </div>
    </ng-template>
</p-picklist>
```

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

### FloatLabel Invalid State Examples

Source: https://v19.primeng.org/floatlabel

Invalid state examples for all three variants (over, in, on). The label is highlighted when the input has the 'ng-dirty ng-invalid' classes.

```html
<p-floatlabel>
    <input pInputText id="value1" [(ngModel)]="value1" class="ng-dirty ng-invalid" />
    <label for="value1">Username</label>
</p-floatlabel>

<p-floatlabel variant="in">
    <input pInputText id="value2" [(ngModel)]="value2" class="ng-dirty ng-invalid" />
    <label for="value2">Username</label>
</p-floatlabel>

<p-floatlabel variant="on">
    <input pInputText id="value3" [(ngModel)]="value3" class="ng-dirty ng-invalid" />
    <label for="value3">Username</label>
</p-floatlabel>
```

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

### updatePrimaryPalette example: change primary colors

Source: https://v19.primeng.org/theming

Shorthand for updatePreset to update primary colors. This example sets the primary palette to indigo shades.

```typescript
changePrimaryColor() {
    updatePrimaryPalette({
        50: '{indigo.50}',
        100: '{indigo.100}',
        200: '{indigo.200}',
        300: '{indigo.300}',
        400: '{indigo.400}',
        500: '{indigo.500}',
        600: '{indigo.600}',
        700: '{indigo.700}',
        800: '{indigo.800}',
        900: '{indigo.900}',
        950: '{indigo.950}'
    });
}
```

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

### usePreset example: replace current preset

Source: https://v19.primeng.org/theming

Calls usePreset with MyPreset to replace the current preset entirely, commonly used for dynamic runtime changes.

```typescript
onButtonClick() {
    usePreset(MyPreset);
}
```

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

### Link button and anchor examples

Source: https://v19.primeng.org/button

Render a button as a link using the link property, or use the p-button class on anchor elements for external and router links.

```html
<p-button label="Link" [link]="true" />
<a href="https://angular.dev/" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
    External
</a>
<a routerLink="/" class="p-button font-bold">
    Router
</a>
```

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

### Basic AnimateOnScroll Example

Source: https://v19.primeng.org/animateonscroll

Uses pAnimateOnScroll with enterClass and leaveClass to animate elements on scroll. The example uses tailwindcss-primeui plugin animations, but any valid CSS animation is supported.

```html
<div class="card flex flex-col items-center overflow-hidden">
    <div class="flex flex-col items-center gap-2">
        <span class="text-xl font-medium">Scroll Down</span>
        <span class="animate-bounce h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
            <i class="pi pi-arrow-down"></i>
        </span>
    </div>
    <div class="h-[30rem]"></div>
    <div class="flex flex-wrap justify-center gap-8">
        <div
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 slide-in-from-l-8 animate-duration-1000"
            leaveClass="animate-leave fade-out-0"
            class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
        >
            <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                <i class="pi pi-user !text-2xl"></i>
            </div>
            <span class="text-2xl font-bold">Individual</span>
            <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
        </div>
        <div
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 animate-duration-1000"
            leaveClass="animate-leave fade-out-0"
            class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
        >
            <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                <i class="pi pi-users !text-2xl"></i>
            </div>
            <span class="text-2xl font-bold">Team</span>
            <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
        </div>
        <div
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 slide-in-from-r-8 animate-duration-1000"
            leaveClass="animate-leave fade-out-0"
            class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
        >
            <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                <i class="pi pi-building !text-2xl"></i>
            </div>
            <span class="text-2xl font-bold">Enterprise</span>
            <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
        </div>
    </div>
    <div class="h-[30rem]"></div>
    <div class="flex flex-wrap justify-center gap-8">
        <div
            pAnimateOnScroll
            enterClass="animate-enter fade-in-10 slide-in-from-t-20 animate-duration-1000"
            leaveClass="animate-leave fade-out-0"
            class="flex flex-col border border-primary-200 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
        >
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" size="xlarge" />
            <span class="text-2xl font-medium">Jenna Thompson</span>
            <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
        </div>
```

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

### Timeline Alignment Examples (left, right, alternate)

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

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

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

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

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

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

### Menubar with Start, Item, and End Templates

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

Custom content can be placed inside the menubar using the start and end templates. The item template allows customizing each menu item, including badges, shortcuts, and submenu indicators.

```html
<p-menubar [model]="items">
    <ng-template #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)" />
        </svg>
    </ng-template>
    <ng-template #item let-item let-root="root">
        <a pRipple class="flex items-center p-menubar-item-link">
            <span>{{ 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 border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
            <i *ngIf="item.items" [ngClass]="['ml-auto pi', root ? 'pi-angle-down' : 'pi-angle-right']"></i>
        </a>
    </ng-template>
    <ng-template #end>
        <div class="flex items-center gap-2">
            <input type="text" pInputText placeholder="Search" class="w-36" />
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
        </div>
    </ng-template>
</p-menubar>
```

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

### SplitterResizeStartEvent

Source: https://v19.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.
```

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

### Menu with custom templates (start, submenuheader, item, end)

Source: https://v19.primeng.org/menu

Customize menu items with the item template, submenu header with submenuheader template, and embed content before/after the menu using start and end slots. Includes a badge, shortcut, avatar, and custom styling.

```html
<p-menu [model]="items" class="flex justify-center" styleClass="w-full md:w-60">
    <ng-template #start>
        <span class="inline-flex items-center gap-1 px-2 py-2">
            <svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                <path d="..." fill="var(--primary-color)" />
            </svg>
            <span class="text-xl font-semibold">
                PRIME<span class="text-primary">APP</span>
            </span>
        </span>
    </ng-template>
    <ng-template #submenuheader let-item>
        <span class="text-primary font-bold">{{ item.label }}</span>
    </ng-template>
    <ng-template #item let-item>
        <a pRipple class="flex items-center p-menu-item-link">
            <span [class]="item.icon"></span>
            <span class="ml-2">{{ item.label }}</span>
            <p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" />
            <span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">
                {{ item.shortcut }}
            </span>
        </a>
    </ng-template>
    <ng-template #end>
        <button pRipple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" class="mr-2" shape="circle" />
            <span class="inline-flex flex-col">
                <span class="font-bold">Amy Elsner</span>
                <span class="text-sm">Admin</span>
            </span>
        </button>
    </ng-template>
</p-menu>
```

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

### usePreset

Source: https://v19.primeng.org/theming

Replaces the current presets entirely. Common use case is changing the preset dynamically at runtime.

```APIDOC
## usePreset

### Description
Replaces the current presets entirely. Common use case is changing the preset dynamically at runtime.

### Import
```js
import { usePreset } from '@primeng/themes';
```

### Usage
```js
onButtonClick() {
    usePreset(MyPreset);
}
```

### Parameters
- **preset** (object) - The new preset to apply.
```

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

### Avatar Shape Example

Source: https://v19.primeng.org/avatar

Shows the two shape options: circle and the default square.

```html
<p-avatar label="P" shape="circle" />
<p-avatar label="T" />
```

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

### Accessibility Labeling Examples

Source: https://v19.primeng.org/textarea

Provide accessible labels using label with id, aria-labelledby, or aria-label.

```html
<label for="address1">Address 1</label>
<textarea pTextarea id="address1"></textarea>

<span id="address2">Address 2</span>
<textarea pTextarea aria-labelledby="address2"></textarea>

<textarea pTextarea aria-label="Address Details"></textarea>
```

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

### Use custom preset in app config

Source: https://v19.primeng.org/theming

Imports MyPreset and passes it to providePrimeNG in the application config.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import MyPreset from './mypreset';

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: MyPreset
            }
        })
    ]
};
```

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

### Multiple add-ons in one InputGroup

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

Demonstrates placing multiple add-ons inside the same input group, including icons and text add-ons.

```html
<p-inputgroup class="w-full md:!w-[30rem]">
    <p-inputgroup-addon>
        <i class="pi pi-clock"></i>
    </p-inputgroup-addon>
    <p-inputgroup-addon>
        <i class="pi pi-star-fill"></i>
    </p-inputgroup-addon>
    <input type="text" pInputText placeholder="Price" />
    <p-inputgroup-addon>$</p-inputgroup-addon>
    <p-inputgroup-addon>.00</p-inputgroup-addon>
</p-inputgroup>
```

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

### Menu Templates

Source: https://v19.primeng.org/menu

Defines the templates used by the Menu component, including start, end, item, and submenuheader.

```APIDOC
## Menu Templates

### Description
Defines the templates used by the component.

### Templates
- **start** () - Custom template of start.
- **end** () - Custom template of end.
- **item** (context: { $implicit: MenuItem, // Item instance. }) - Custom template of item.
- **submenuheader** (context: { $implicit: MenuItem, // Item instance. }) - Custom template of submenuheader.
```

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

### Basic Drawer with visible binding and header

Source: https://v19.primeng.org/drawer

Shows a basic drawer controlled by a two-way binding to visible, with a header and a button to open it.

```html
<p-drawer [(visible)]="visible" header="Drawer">
    <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.
    </p>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-arrow-right" />
```

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

### PickList Accessibility Props

Source: https://v19.primeng.org/picklist

Examples of using ariaLabelledBy and ariaLabel to provide accessible labels for the PickList component.

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

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

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

### Tree Context Menu with selectionMode and p-contextmenu

Source: https://v19.primeng.org/tree

Shows a tree with single selection mode and a context menu bound via [contextMenu]. The context menu model is provided by the items array and a toast is included for feedback.

```HTML
<p-tree [value]="files" styleClass="w-full md:w-[30rem]" selectionMode="single" [(selection)]="selectedFile" [contextMenu]="cm" />
<p-contextmenu #cm [model]="items" />
<p-toast />
```
Tokens:
Raw