PrimeNG v20

https://v20.primeng.org
Admin
PrimeNG is a comprehensive UI component library for Angular featuring 80+ customizable, feature-rich...
Tokens:228,321
Snippets:2,112
Trust Score:9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Setup and Run Poseidon Angular Project

Source: https://v20.primeng.org/templates/poseidon

Commands to install Angular CLI globally, navigate to the project directory, install dependencies, and start the development server.

```bash
npm install -g angular-cli
```

```bash
cd poseidon-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Setup and Run Verona with Angular CLI

Source: https://v20.primeng.org/templates/verona

Commands to install Angular CLI globally, navigate to the project directory, install dependencies, and start the development server.

```bash
npm install -g angular-cli
```

```bash
cd verona-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Setup and run Genesis with Angular CLI

Source: https://v20.primeng.org/templates/genesis

Commands to set up and run the Genesis Angular project locally. Install the Angular CLI globally, navigate to the project directory, install dependencies, and start the development server.

```bash
npm install -g angular-cli
```

```bash
cd genesis-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Install and run Ultima with Angular CLI

Source: https://v20.primeng.org/templates/ultima

Install Angular CLI globally, navigate to the Ultima project directory, install dependencies, and start the development server.

```bash
> npm install -g angular-cli
> cd ultima-ng
> npm install
> ng serve
```

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

### Install and Run Atlantis Angular Template

Source: https://v20.primeng.org/templates/atlantis

Commands to install Angular CLI, navigate to the Atlantis project directory, install dependencies, and start the development server.

```bash
npm install -g angular-cli
```

```bash
cd atlantis-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Install and run Avalon with Angular CLI

Source: https://v20.primeng.org/templates/avalon

Commands to install Angular CLI, navigate to the project directory, install dependencies, and start the development server for the Avalon Angular template.

```bash
npm install -g angular-cli
```

```bash
cd avalon-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Basic Toolbar Usage

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

Basic toolbar example with start, center, and end sections. The start section contains action buttons, the center has a search input, and the end has 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 class="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>
```

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

### Install and run Freya Angular CLI project

Source: https://v20.primeng.org/templates/freya

Freya is an Angular CLI-based project written in Angular and TypeScript. Run these commands to install the Angular CLI globally, navigate into the project directory, install dependencies, and start the development server.

```bash (Angular CLI commands, shell, npm, ng serve, angular-cli, freya-).
> npm install -g angular-cli
> cd freya-ng
> freya-ng> npm install
> ng serve
```

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

### Verify setup with Button component

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

Verify the setup by creating a ButtonDemo component that imports ButtonModule and uses the p-button element in its template.

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

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

```html
<p-button label="Check" />
```

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

### Install and Run Sakai with Angular CLI

Source: https://v20.primeng.org/templates/sakai

Commands to install the Angular CLI globally, install dependencies, and serve the Sakai application. Run these in the sakai-ng directory after cloning the project.

```bash
> npm install -g angular-cli
> cd sakai-ng
> npm install
> ng serve
```

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

### Install Chart.js

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

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

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

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

### Install PrimeCLT

Source: https://v20.primeng.org/guides/primeflex

Installs the PrimeCLT command-line utility globally, which provides the pf2tw migration command.

```bash
npm install -g primeclt
```

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

### Install PrimeIcons via npm

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

Run this command to install the PrimeIcons package from npm.

```bash
npm install primeicons
```

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

### Install Quill dependency

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

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

```bash
npm install quill
```

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

### Install PrimeNG with npm, yarn, or pnpm

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

Install PrimeNG and the PrimeUIX themes package using npm, yarn, or pnpm.

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

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

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

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

### Install and Run Diamond with Angular CLI

Source: https://v20.primeng.org/templates/diamond

Commands to install dependencies and serve the Diamond Angular project. Requires Node.js and npm. Run these in the project root after cloning or downloading the template.

```bash
> npm install -g angular-cli
> cd diamond-ng
> npm install
> ng serve
```

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

### Custom Toolbar with Styling

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

Custom toolbar example with custom styling and content in the start and end sections. Includes a logo, text buttons, 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"></mask>
            </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>
```

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

### TieredMenu Command Example

Source: https://v20.primeng.org/tieredmenu

The command property defines the callback to run when an item is activated by click or a key event. This example includes a toast component for feedback.

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

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

### Pie Chart

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

Pie chart example with responsive width classes.

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

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

### Timeline alignment examples (left, right, alternate)

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

Three Timeline examples showing alignment options: default (left), right, and alternate. Each uses the same value and content template.

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

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

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

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

### Line Chart

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

Line chart example with fixed height.

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

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

### Drawer Position Examples

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

Drawer with position property set to left, right, top, and bottom, each with a corresponding button to open it.

```html
<p-drawer header="Left Drawer" [(visible)]="visible1" position="left">
    <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-drawer header="Right Drawer" [(visible)]="visible2" position="right">
    <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-drawer header="Top Drawer" [(visible)]="visible3" position="top" style="height: auto">
    <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-drawer header="Bottom Drawer" [(visible)]="visible4" position="bottom" style="height: auto">
    <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>
<div class="flex gap-2 justify-center">
    <p-button type="button" (click)="visible1 = true" icon="pi pi-arrow-right" />
    <p-button type="button" (click)="visible2 = true" icon="pi pi-arrow-left" />
    <p-button type="button" (click)="visible3 = true" icon="pi pi-arrow-down" />
    <p-button type="button" (click)="visible4 = true" icon="pi pi-arrow-up" />
</div>
```

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

### Doughnut Chart

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

Doughnut chart example with responsive width classes.

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

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

### Sample InputOtp UI with Templating

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

A sample UI implementation with templating and additional elements, including a separator and action buttons.

```html
<div class="flex flex-col items-center">
    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
    <p class="text-muted-color block mb-8">Please enter the code sent to your phone.</p>
    <p-inputotp [(ngModel)]="value" [length]="6">
        <ng-template #input let-token let-events="events" let-index="index">
            <input type="text" [maxLength]="1" (input)="events.input($event)" (keydown)="events.keydown($event)" [attr.value]="token" class="custom-otp-input" />
            <div *ngIf="index === 3" class="px-4">
                <i class="pi pi-minus"></i>
            </div>
        </ng-template>
    </p-inputotp>
    <div class="flex justify-between mt-8 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://v20.primeng.org/menubar

Custom content can be placed inside the menubar using the start and end templates. This example shows a start template with an SVG icon, an item template for customizing menu items, and an end template with a search input and avatar.

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

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

### PrimeNG p-table with showGridlines and caption template

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

Starts a PrimeNG table with showGridlines and a caption template. This is the beginning of an advanced example where filters are displayed in an overlay.

```html
<p-table #dt1 [value]="customers" dataKey="id" [rows]="10" [rowsPerPageOptions]="[10, 25, 50]" [loading]="loading" [paginator]="true" [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']" showGridlines>
    <ng-template #caption>
```

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

### MegaMenu with custom templates

Source: https://v20.primeng.org/megamenu

Custom content can be placed between p-megamenu tags. The MegaMenu should be horizontal for custom content. This example includes start, item, and end templates.

```html
<p-megamenu [model]="items" [style]="{ 'border-radius': '3rem', display: 'flex' }" class="p-4 bg-surface-0 dark:bg-surface-900">
    <ng-template #start>
        <svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
            <path d="..." fill="var(--primary-color)" />
        </svg>
    </ng-template>
    <ng-template #item let-item>
        <a *ngIf="item.root" pRipple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
            <i [ngClass]="item.icon"></i>
            <span class="ml-2">{{ item.label }}</span>
        </a>
        <a *ngIf="!item.root && !item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-2">
            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                <i [ngClass]="item.icon + ' text-lg'"></i>
            </span>
            <span class="inline-flex flex-col gap-1">
                <span class="font-medium text-lg text-surface-900 dark:text-surface-0">{{ item.label }}</span>
                <span class="whitespace-nowrap">{{ item.subtext }}</span>
            </span>
        </a>
        <div *ngIf="item.image" class="flex flex-col items-start gap-4">
            <img [src]="item.image" alt="megamenu-demo" class="w-full" />
            <span>{{ item.subtext }}</span>
            <p-button [label]="item.label" [outlined]="true"></p-button>
        </div>
    </ng-template>
    <ng-template #end>
        <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
    </ng-template>
</p-megamenu>
```

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

### Global PrimeNG PassThrough configuration with providePrimeNG

Source: https://v20.primeng.org/passthrough

Sets up a global PassThrough (PT) configuration for PrimeNG in an Angular application. The panel header receives a custom data attribute and classes, while the content gets a font-medium class. This global configuration is used by the subsequent component-level PT examples.

```typescript
import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';

export const appConfig: ApplicationConfig = {
    providers: [
        providePrimeNG({
            pt: {
                panel: {
                    header: {
                        'data-custom': 'acme-panel',
                        class: 'bg-primary text-primary-contrast'
                    },
                    content: 'font-medium'
                }
            }
        })
    ]
};
```

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

### Advanced Dock desktop UI

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

Advanced mock desktop UI combining Dock with Menubar, Dialog, Terminal, Galleria, and Toast components. Demonstrates a full desktop-like interface with multiple interactive elements.

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

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

### Install and serve Apollo with Angular CLI

Source: https://v20.primeng.org/templates/apollo

Commands to set up and run the Apollo Angular template locally using Angular CLI. Run them in order from a terminal.

```bash
npm install -g angular-cli
```

```bash
cd apollo-ng
```

```bash
npm install
```

```bash
ng serve
```

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

### Basic InputGroup with add-ons

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

Creates a group by wrapping an input and add-ons with the p-inputgroup component. Each add-on is defined as a child of p-inputgroup-addon. Shows examples with icons, text, 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>
```

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

### Install tailwindcss-primeui

Source: https://v20.primeng.org/tailwind

Install the tailwindcss-primeui npm package. This package includes both CSS (for Tailwind v4) and JS (for Tailwind v3) versions.

```bash
npm i tailwindcss-primeui
```

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

### usePreset

Source: https://v20.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
```
import { usePreset } from '@primeuix/themes';
```

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

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

### Responsive Drawer with styleClass and Tailwind

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

Use the styleClass property with Tailwind classes to make the drawer responsive. The example uses !w-full for mobile, md:!w-80 for medium screens, and lg:!w-[30rem] for large screens.

```html
<p-drawer header="Drawer" [(visible)]="visible" styleClass="!w-full md:!w-80 lg:!w-[30rem]">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </p>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-arrow-right" />
```

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

### Accessibility Label Examples

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

Accessibility examples: providing a label via label tag with inputId, using ariaLabelledBy, or using ariaLabel to describe the component for screen readers.

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

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

### Multiple add-ons in one group

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

Shows how to place multiple add-ons inside the same group, using icons and text add-ons around an input.

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

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

### Customizable Drawer with Header, Content, and Footer Templates

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

Customize the drawer using header, content, and footer templates. The example sets [closable]="false" to hide the close icon and provides custom header and footer content with avatar and buttons.

```html
<p-drawer [(visible)]="visible" [closable]="false">
    <ng-template #header>
        <div class="flex items-center gap-2">
            <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
            <span class="font-bold">Amy Elsner</span>
        </div>
    </ng-template>
    <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>
    <ng-template #footer>
        <div class="flex items-center gap-2">
            <button pButton label="Account" icon="pi pi-user" class="w-full" outlined></button>
            <button pButton label="Logout" icon="pi pi-sign-out" class="w-full" severity="danger" text></button>
        </div>
    </ng-template>
</p-drawer>
<button pButton (click)="visible = true" icon="pi pi-plus"></button>
```

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

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

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

Customize menu items with the item template, submenu header with submenuheader template, and add content before or after the menu using start and end slots.

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

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

### Skeleton Shapes Example

Source: https://v20.primeng.org/skeleton

Shows how to create different Skeleton shapes (rectangle, rounded, square, circle) using properties like width, height, borderRadius, size, and shape.

```html
<h5>Rectangle</h5>
<p-skeleton class="mb-2" />
<p-skeleton width="10rem" class="mb-2" />
<p-skeleton width="5rem" class="mb-2" />
<p-skeleton height="2rem" class="mb-2" />
<p-skeleton width="10rem" height="4rem" />

<h5>Rounded</h5>
<p-skeleton class="mb-2" borderRadius="16px" />
<p-skeleton width="10rem" class="mb-2" borderRadius="16px" />
<p-skeleton width="5rem" class="mb-2" borderRadius="16px" />
<p-skeleton height="2rem" class="mb-2" borderRadius="16px" />
<p-skeleton width="10rem" height="4rem" borderRadius="16px" />

<h5 class="mt-4">Square</h5>
<p-skeleton size="2rem" class="mr-2" />
<p-skeleton size="3rem" class="mr-2" />
<p-skeleton size="4rem" class="mr-2" />
<p-skeleton size="5rem" />

<h5 class="mt-4">Circle</h5>
<p-skeleton shape="circle" size="2rem" class="mr-2" />
<p-skeleton shape="circle" size="3rem" class="mr-2" />
<p-skeleton shape="circle" size="4rem" class="mr-2" />
<p-skeleton shape="circle" size="5rem" />
```

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

### Menubar with Command and Toast

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

The command property defines the callback to run when an item is activated by click or a key event. This example includes a p-toast component for displaying messages.

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

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

### Use pBind directive for static and dynamic attributes

Source: https://v20.primeng.org/bind

Use the pBind directive to apply HTML attributes statically or dynamically. The static example passes an object literal, while the dynamic example binds to a component property named boxBinding.

```html
<div [pBind]="{ 'aria-label': 'basic-box', class: 'bg-primary text-primary-contrast flex items-center justify-center p-4 rounded-lg w-32 font-medium' }">
    Static
</div>

<div [pBind]="boxBinding" pTooltip="Click to change color">
    Dynamic
</div>
```

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

### Basic AnimateOnScroll Example with Tailwind CSS Animations

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

This example shows how to apply enter and leave animations to elements using the pAnimateOnScroll directive with enterClass and leaveClass properties. It 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-[40rem]"></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>
```

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

### Run pf2tw migration

Source: https://v20.primeng.org/guides/primeflex

Runs the pf2tw migration tool in the current directory to convert PrimeFlex classes to Tailwind CSS. Requires PrimeNG v18 for flawless migration.

```bash
prime pf2tw
```

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

### Chips Basic: addOnBlur, addOnTab, separator, and combined p-autocomplete

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

Four p-autocomplete configurations for chips-like behavior: addOnBlur, addOnTab, separator, and combined. Each uses multiple and typeahead=false. The combined example enables all three features simultaneously.

```html
<!-- With Add On Blur -->
<p-autocomplete
    [(ngModel)]="valueBlur"
    multiple
    [typeahead]="false"
    [addOnBlur]="true"
    placeholder="Type and click outside to add..."
/>

<!-- With Add On Tab -->
<p-autocomplete
    [(ngModel)]="valueTab"
    multiple
    [typeahead]="false"
    [addOnTab]="true"
    placeholder="Type and press Tab to add..."
/>

<!-- With Separator -->
<p-autocomplete
    [(ngModel)]="valueSeparator"
    multiple
    [typeahead]="false"
    separator=","
    placeholder="Type items separated by comma..."
/>

<!-- Combined Features -->
<p-autocomplete
    [(ngModel)]="valueCombined"
    multiple
    [typeahead]="false"
    [addOnBlur]="true"
    [addOnTab]="true"
    separator=","
    placeholder="Use Tab, Blur, or Comma to add items..."
/>
```

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

### Accessible Chart

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

Accessible chart example with an ariaLabel for screen readers.

```html
<p-chart type="line" [data]="data" ariaLabel="Data" />
```

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

### Radar Chart

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

Radar chart example with responsive width classes.

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

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

### Configure PrimeNG with providePrimeNG provider

Source: https://v20.primeng.org/configuration

Sets up PrimeNG's initial configuration during application startup. Requires Angular's ApplicationConfig and the provideAnimationsAsync provider for animations.

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

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        providePrimeNG({ /* options */ })
    ]
};
```

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

### Controlled Tree with Expand/Collapse All

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

Tree requires a collection of _TreeNode_ instances as a _value_. This example shows buttons to expand all and collapse all, using expandAll() and collapseAll() methods, along with the Tree component.

```html
<div class="flex flex-wrap gap-2 mb-6">
    <p-button icon="pi pi-plus" label="Expand all" (click)="expandAll()" />
    <p-button icon="pi pi-minus" label="Collapse all" (click)="collapseAll()" />
</div>
<p-tree [value]="files()" class="w-full md:w-[30rem]" />
```

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

### Panel Pass Through Example

Source: https://v20.primeng.org/passthrough

Customizes a PrimeNG Panel using the 'pt' property. The example overrides styling with Tailwind CSS, adds custom attributes and a click event to the header, and sets a custom class for the title. Note that the '!' based overrides can be avoided if CSS Layers are set up with PrimeNG.

```typescript
import { Component } from '@angular/core';
import { Panel, PanelModule, PanelPassThrough } from 'primeng/panel';

@Component({
    selector: 'panel-pt-demo',
    templateUrl: `
        <p-panel header="Header" [pt]="pt">
            ...
        </p-panel>
    `,
    standalone: true,
    imports: [PanelModule]
})
export class PanelPtDemo {
     pt: PanelPassThrough<Panel> = {
        root: '!border !border-transparent !rounded-2xl !p-4 !bg-gradient-to-br !from-indigo-600 !to-indigo-400',
        header: {
            id: 'myPanelHeader',
            'data-custom': 'prime',
            style: {
                userSelect: 'none'
            },
            class: ['!text-white font-bold !p-0 !bg-transparent !border-none'],
            onclick: () => {
                console.log('Header Clicked');
            }
        },
        content: { class: '!text-white dark:text-primary-200 !p-0 mt-2 !font-medium' },
        title: 'text-xl'
    };
}
```

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

### Dialog Position Example with Buttons and p-dialog

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

Shows how to set the dialog position using the [position] property. The buttons call a showDialog method with a position string, and the p-dialog binds the position. The dialog includes a header, modal mode, and a form with username and email inputs.

```HTML
<div class="flex flex-wrap justify-center gap-2 mb-2">
    <p-button (click)="showDialog('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="showDialog('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" styleClass="min-w-40" />
</div>
<div class="flex flex-wrap justify-center gap-2 mb-2">
    <p-button (click)="showDialog('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="showDialog('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="showDialog('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" styleClass="min-w-40" />
</div>
<div class="flex flex-wrap justify-center gap-2">
    <p-button (click)="showDialog('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="showDialog('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" styleClass="min-w-40" />
    <p-button (click)="showDialog('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" styleClass="min-w-40" />
</div>
<p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [position]="position" [style]="{ width: '25rem' }">
    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
    <div class="flex items-center gap-4 mb-4">
        <label for="username" class="font-semibold w-24">Username</label>
        <input pInputText id="username" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex items-center gap-4 mb-8">
        <label for="email" class="font-semibold w-24">Email</label>
        <input pInputText id="email" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex justify-end gap-2">
        <p-button label="Cancel" severity="secondary" (click)="visible = false" />
        <p-button label="Save" (click)="visible = false" />
    </div>
</p-dialog>
```

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

### Vertical Bar Chart

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

Vertical bar chart example with fixed height.

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

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

### Basic Toast Usage

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

Basic usage: place the <p-toast> component and a button that calls the show() method. The show() method should use the MessageService's add or addAll methods to display a toast.

```html
<p-toast />
<p-button (onClick)="show()" label="Show" />
```

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

### Conditional row and cell styling with ngClass in p-treetable

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

Use ngClass on the row and cell elements to apply conditional styles based on row data. The row gets 'p-highlight' when rowData.size ends with 'kb', and the size cell gets 'font-bold' under the same condition. Requires a files array and cols array in the component.

```html
<p-treetable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template #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-treetable-toggler [rowNode]="rowNode" *ngIf="i === 0" />
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treetable>
```

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

### ProgressBar accessibility attributes

Source: https://v20.primeng.org/progressbar

Accessibility examples using aria-labelledby and aria-label to describe the progressbar.

```html
<span id="label_status">Status</span>
<p-progressbar aria-labelledby="label_status" />

<p-progressbar aria-label="Status" />
```
Tokens:
Raw