### InputTextarea Usage Examples Source: https://primeng-v15.pages.dev/inputtextarea Examples demonstrating how to use the InputTextarea component in various scenarios, including basic usage, reactive forms, auto-resize, and float labels. ```APIDOC ## InputTextarea InputTextarea adds styling and autoResize functionality to standard textarea element. ### Import ``` import { InputTextareaModule } from 'primeng/inputtextarea'; ``` ### Basic InputTextarea is applied to an input field with `pInputTextarea` directive. ```html ``` ### Reactive Forms InputTextarea can also be used with reactive forms. In this case, the `formControlName` property is used to bind the component to a form control. ```html ``` ### AutoResize When `autoResize` is enabled, textarea grows instead of displaying a scrollbar. ```html ``` ### Key Filter InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. ```html ``` ### Float Label A floating label appears on top of the input field when focused. ```html Summary ``` ### Disabled When `disabled` is present, the element cannot be edited and focused. ```html ``` ### Style Name| Element ---|--- p-inputtextarea| Textarea element ### Accessibility Screen Reader InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via `label` tag combined with `id` prop or using `aria-labelledby` , `aria-label` props. ```html Address 1

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

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

Keyboard Support
Key| Function
---|---
`tab`| Moves focus to the input.
```

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

### Tag Component Usage Examples

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

Examples demonstrating how to use the PrimeNG Tag component with different configurations.

```APIDOC
## Tag Component Usage

### Import
```typescript
import { TagModule } from 'primeng/tag';
```

### Basic Usage
Displays a tag with a simple text value.
```html
<p-tag value="New"></p-tag>
```

### Severity
Applies a severity color to the tag.
```html
<p-tag severity="success" value="Success"></p-tag>
<p-tag severity="info" value="Info"></p-tag>
<p-tag severity="warning" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>
```

### Pill Shape
Enables rounded corners for a pill-like appearance.
```html
<p-tag value="Primary" [rounded]="true"></p-tag>
```

### With Icon
Includes a font icon next to the tag's value.
```html
<p-tag icon="pi pi-user" value="Primary"></p-tag>
```

### Templating
Allows custom content within the tag using the default slot.
```html
<p-tag [style]="{'background': 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}">
    <div class="flex align-items-center gap-2">
        <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: '18px'" />
        <span class="text-base">Italia</span>
        <i class="pi pi-times text-xs"></i>
    </div>
</p-tag>
```

### Styling
Structural style classes for the Tag component:
- `p-tag`: The main tag element.
- `p-tag-rounded`: Applies rounded corners.
- `p-tag-icon`: Styles the icon within the tag.
- `p-tag-value`: Styles the text value of the tag.
```

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

### Basic DataView Implementation in Angular with PrimeNG

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

This example demonstrates a basic PrimeNG DataView setup in Angular. It requires a 'value' property for the data and an 'ng-template' for defining the item's content. PrimeFlex grid classes are used for layout.

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

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

### Button Usage Examples

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

Examples demonstrating various features of the PrimeNG Button component, including badges, button sets, sizes, custom templates, and accessibility.

```APIDOC
## Badges

Buttons have built-in badge support with `badge` and `badgeClass` properties.

```html
<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
```

## Button Set

Multiple buttons are grouped when wrapped inside an element with `p-buttonset` class.

```html
<span class="p-buttonset">
    <button pButton pRipple label="Save" icon="pi pi-check"></button>
    <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
    <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
</span>
```

## Sizes

Button provides `small` and `large` sizes as alternatives to the standard.

```html
<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>
<p-button label="Normal" icon="pi pi-check" styleClass="p-button" ></p-button>
<p-button label="Large" icon="pi pi-check" styleClass="p-button-lg"></p-button>
```

## Template

Custom content inside a button is defined as children.

```html
<p-button styleClass="p-button-outlined">
    <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
    <span class="ml-2 font-bold">PrimeNG</span>
</p-button>
```

## Accessibility

### Screen Reader

Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the `aria-label` prop, if not present `label` prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use `aria-label` so that screen readers would be able to read the element properly.

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

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

### Keyboard Support

| Key   | Function |
|-------|----------|
| `tab` | Moves focus to the button. |
| `enter` | Activates the button. |
| `space` | Activates the button. |
```

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

### Implement Basic ConfirmDialog

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

Demonstrates the basic setup of the p-confirmDialog component and triggering it via buttons using the ConfirmationService.

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

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

### Toggleable PrimeNG Panel Example

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

This example shows how to create a toggleable PrimeNG Panel. By setting the `[toggleable]` property to `true`, the panel's content can be expanded and collapsed. The default state can be controlled using the `collapsed` option.

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

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

### Install PrimeFlex CSS Framework

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

DataView relies on PrimeFlex for grid layout functionality. This command installs the PrimeFlex package using npm, which is essential for styling and layout of DataView items.

```bash
npm install primeflex
```

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

### Basic PrimeNG Galleria Setup

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

Demonstrates the fundamental setup for the PrimeNG Galleria component. It requires a 'value' for images and templates for displaying the main image ('item') and thumbnails ('thumbnail').

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

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

### Install PrimeNG using npm

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

This command installs the PrimeNG library via npm, making its components available for use in your Angular project. Ensure you have Node.js and npm installed.

```bash
npm install primeng
```

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

### Advanced PrimeNG Galleria with Custom Footer and Fullscreen

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

This advanced example showcases extending the PrimeNG Galleria component with a custom footer template. It includes features like item navigation, autoplay, circular behavior, and a full-screen toggle button, demonstrating a more complex and interactive gallery setup.

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

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

### Basic Toolbar Implementation

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

The Toolbar component uses structural groups (start, center, end) to organize child elements like buttons and split buttons. This example demonstrates how to arrange content within these groups.

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

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

### Basic InputGroup Examples (HTML)

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

Demonstrates the basic structure of PrimeNG InputGroups. It shows how to wrap input elements with add-ons (icons, text) using the 'p-inputgroup' and 'p-inputgroup-addon' classes.

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

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

### Install PrimeIcons via NPM

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

Command to install the PrimeIcons package into your project dependencies.

```bash
npm install primeicons
```

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

### Basic HTML Template for Dynamic Dialog

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

Example template showing the integration of a toast notification and a button to trigger the dynamic dialog.

```html
<p-toast></p-toast>
<p-button (click)="show()" icon="pi pi-info-circle" label="Show"></p-button>
```

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

### Basic PrimeNG Fieldset Example

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

Demonstrates the basic usage of the PrimeNG Fieldset component with a legend and content. The content is displayed by default.

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

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

### Install and Include Charts.js

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

Instructions for installing the Charts.js package via npm and including it in your project's build scripts. This is essential as PrimeNG charts rely on Charts.js for rendering.

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

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

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

### Image Component Usage

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

Examples demonstrating how to use the PrimeNG Image component for basic display, with indicator templates, and preview functionality.

```APIDOC
## Image Component

Displays an image with preview and transformation options.

### Import

```javascript
import { ImageModule } from 'primeng/image';
```

### Basic Usage

Image is used as the native _img_ element and supports all properties that the native element has. For multiple images, see Galleria.

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

### Indicator Template

An eye icon is displayed by default when the image is hovered in preview mode. Use the _indicator_ template for custom content.

```html
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria1.jpg" [preview]="true" alt="Image" width="250">
    <ng-template pTemplate="indicator">
        <i class="pi pi-check"></i>
    </ng-template>
</p-image>
```

### Preview Mode

Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.

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

### Style Classes

Following is the list of structural style classes, for theming classes visit the theming page.

Name| Element
---|---
p-image| Container element.
p-image-preview-container| Container element with preview enabled.
p-image-preview-indicator| Mask layer over the image when hovered.
p-image-preview-icon| Icon of the preview indicator.
p-image-mask| Preview overlay container.
p-image-toolbar| Transformation options container.
p-image-action| An element inside the toolbar.
p-image-preview| Image element inside the preview overlay.

### Accessibility

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

#### Screen Reader

The preview button is a native _button_ element with an _aria-label_ that refers to the _aria.zoomImage_ property of the locale API by default, with _previewButtonProps_ you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly. When preview is active, _dialog_ role with _aria-modal_ is applied to the overlay image container. Button controls use _aria.rotateRight_ , _aria.rotateLeft_ , _aria.zoomIn_ , _aria.zoomOut_ and _aria.close_ from the locale API as _aria-label_.

#### ButtonBar Keyboard Support

When preview is activated, close button receives the initial focus.

Key| Function
---|---
_tab_| Moves focus through button bar.
_enter_| Activates the button.
_space_| Activates the button.
_esc_| Closes the image preview.

```

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

### Pie Chart Example (HTML)

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

Renders a pie chart, which is a circular statistical graphic divided into slices to illustrate numerical proportions. Requires 'data' and 'options' for configuration.

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

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

### Line Chart Example (HTML)

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

Displays a line chart, connecting data points with straight line segments. Configuration is done via 'data' and 'options'.

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

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

### Implement Semantic HTML Layout

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

Demonstrates the transition from non-semantic div-based layouts to semantic HTML5 elements like header, nav, main, and footer to improve screen reader accessibility.

```html
<header>
    <h1>Header</h1>
</header>

<footer></footer>
```

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

### Calendar Configuration and Customization

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

Examples of configuring the Calendar with custom date formats, icons, selection constraints, and specialized views like month or year pickers.

```html
<p-calendar [(ngModel)]="date" dateFormat="dd.mm.yy"></p-calendar>
<p-calendar [(ngModel)]="date" [showIcon]="true"></p-calendar>
<p-calendar [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar>
<p-calendar [(ngModel)]="date" selectionMode="multiple" [readonlyInput]="true"></p-calendar>
<p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>
<p-calendar [(ngModel)]="date" [showTime]="true" [showSeconds]="true"></p-calendar>
<p-calendar [(ngModel)]="date" view="month" dateFormat="mm/yy" [readonlyInput]="true"></p-calendar>
<p-calendar [(ngModel)]="date" view="year" dateFormat="yy" inputId="yearpicker"></p-calendar>
```

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

### Toggleable PrimeNG Fieldset Example

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

Shows how to create a toggleable PrimeNG Fieldset component. The content can be expanded and collapsed by the user. The `toggleable` property must be set to `true`.

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

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

### Responsive Galleria Configuration (Angular)

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

Shows how to configure the PrimeNG Galleria component for responsiveness using the 'responsiveOptions' property. This example includes circular navigation and a specified number of visible thumbnails.

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

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

### Radar Chart Example (HTML)

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

Displays a radar chart, which is a graphical method for showing multivariate data on axes starting from the same point. Requires 'data' and 'options'.

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

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

### Implement Responsive Button Layout with PrimeFlex

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

Demonstrates a responsive layout using PrimeFlex utility classes to arrange PrimeNG buttons. The container uses flexbox properties to switch between column and row directions based on screen size.

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

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

### Basic Steps Implementation

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

A static implementation of the Steps component using a model array.

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

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

### Install Quill Dependency

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

The PrimeNG Editor relies on the Quill rich text editor. This command installs Quill as a project dependency using npm.

```bash
npm install quill
```

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

### Configure Responsive Overlay Options

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

Defines responsive options for overlay components, specifying behavior based on breakpoints or media queries. This example includes placeholder comments for various responsive settings.

```typescript
import { PrimeNGConfig, OverlayOptions, ResponsiveOverlayOptions } from 'primeng/api';

const responsiveOptions: ResponsiveOverlayOptions = {
    // style?: any;
    // styleClass?: string;
    // contentStyle?: any;
    // contentStyleClass?: string;
    // breakpoint?: string;
    // media?: string;
    // direction?: ResponsiveOverlayDirectionType;
    // hideOnEscape?: boolean;
}

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

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

### Configure and Open Dynamic Dialog

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

Demonstrates how to inject DialogService and use the open method to display a component dynamically with custom configurations and data passing.

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

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

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

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

### Basic PrimeNG Overlay Component

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

Demonstrates the basic usage of the p-overlay component, controlled by a button click. It shows how to set visibility and apply basic styling and responsive options.

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

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

### PrimeNG Scroller with Different Delays (Angular)

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

Illustrates the PrimeNG Scroller component with varying delay properties to control the scroll animation speed. It shows examples of no delay, 150ms delay, and 500ms delay, allowing developers to fine-tune the user experience. Each example uses a basic item template for displaying content.

```html
<p-scroller [items]="items" [itemSize]="50" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
    <ng-template pTemplate="item" let-item let-options="options">
        <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
    </ng-template>
</p-scroller>

<p-scroller [items]="items" [itemSize]="50" [delay]="150" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
    <ng-template pTemplate="item" let-item let-options="options">
        <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
    </ng-template>
</p-scroller>

<p-scroller [items]="items" [itemSize]="50" [delay]="500" styleClass="border-1 surface-border" [style]="{'width': '200px', 'height': '200px'}">
    <ng-template pTemplate="item" let-item let-options="options">
        <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
    </ng-template>
</p-scroller>
```

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

### Configure Inline and Format Options

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

Shows how to display the picker inline instead of an overlay and how to switch between color formats like HEX, RGB, and HSB.

```html

<p-colorPicker [(ngModel)]="color1" [inline]="true"></p-colorPicker>

<p-colorPicker [(ngModel)]="color" format="hex"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>
```

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

### Component States

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

Examples of setting the InputMask to disabled or invalid states.

```html
<p-inputMask mask="999-99-9999" [(ngModel)]="value" [disabled]="true"></p-inputMask>

<p-inputMask mask="999-99-9999" [(ngModel)]="value" class="ng-invalid ng-dirty"></p-inputMask>
```

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

### Implement Scoped Panel Component

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

An example of using the PrimeNG Panel component within an Angular template to display content.

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

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

### Interactive Steps Implementation

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

An interactive implementation allowing users to navigate steps by binding activeIndex and handling activeIndexChange events.

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

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

### SplitButton Size Examples (Angular)

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

Demonstrates how to apply different sizes (small, normal, large) to SplitButtons in PrimeNG using 'p-button-sm' and 'p-button-lg' style classes. Requires the SplitButton component and menu items.

```html
<p-splitButton label="Small" [model]="this.items" (onClick)="save('info')" styleClass="p-button-sm mr-2 mb-2"></p-splitButton>
<p-splitButton label="Normal" [model]="this.items" (onClick)="save('info')" styleClass="mr-2 mb-2"></p-splitButton>
<p-splitButton label="Large" [model]="this.items" (onClick)="save('info')" styleClass="p-button-lg mr-2 mb-2"></p-splitButton>
```

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

### ToggleButton Usage

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

Examples demonstrating how to use the PrimeNG ToggleButton component in various scenarios.

```APIDOC
# ToggleButton

ToggleButton is used to select a boolean value using a button.

## Import

```javascript
import { ToggleButtonModule } from 'primeng/togglebutton';
```

## Basic

Two-way binding to a boolean property is defined using the standard `ngModel` directive.

```html
<p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
```

## Reactive Forms

ToggleButton can also be used with reactive forms. In this case, the `formControlName` property is used to bind the component to a form control.

```html
<form [formGroup]="formGroup">
    <p-toggleButton formControlName="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
</form>
```

## Customized

Icons and Labels can be customized using `onLabel`, `offLabel`, `onIcon` and `offIcon` properties.

```html
<p-toggleButton [(ngModel)]="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{ width: '10em' }"></p-toggleButton>
```

## Style

Following is the list of structural style classes, for theming classes visit theming page.

Name| Element
---|---
`p-knob`| Container element.
`p-knob-text`| Text element.
`p-knob-value`| Value element.
`p-knob-text`| Text element.

## Accessibility

### Screen Reader

ToggleButton component uses an element with `button` role and updates `aria-pressed` state for screen readers. Value to describe the component can be defined with `aria-labelledby` or `aria-label` props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.

```html
<span id="rememberme">Remember Me</span>
<p-toggleButton aria-labelledby="rememberme"></p-toggleButton>

<p-toggleButton aria-label="Remember Me"></p-toggleButton>
```

### Keyboard Support

Key| Function
---|---
`tab`| Moves focus to the button.
`space`| Toggles the checked state.
```

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

### Basic PrimeNG Dock Configuration

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

Demonstrates the basic setup of the PrimeNG Dock component. It requires a 'model' property for menu items and supports different 'position' values (bottom, top, left, right). The 'item' template customizes the appearance of each dock item.

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

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

### Accessibility Implementation

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

Example of adding accessibility labels to the SpeedDial component for screen readers.

```html
<p-speedDial aria-label="Options"></p-speedDial>
```

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

### Basic Defer Usage

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

Demonstrates the basic implementation of the pDefer directive to load content when it enters the viewport.

```APIDOC
## Basic

Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.
Content is not loaded yet, scroll down to initialize it.

```html
<div pDefer (onLoad)="onLoad()">
    <ng-template>
        <img class="w-full md:w-30rem md:block md:mx-auto" src="https://primefaces.org/cdn/primeng/images/demo/nature/nature1.jpg" alt="Prime" />
    </ng-template>
</div>
```
```

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

### Configure Accessibility Attributes

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

Examples of using aria-labelledby and aria-label to ensure the component is accessible to screen readers.

```html
<span id="chkbox1">Remember Me</span>
<p-triStateCheckbox aria-labelledby="chkbox1"></p-triStateCheckbox>

<p-triStateCheckbox aria-label="Remember Me"></p-triStateCheckbox>
```

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

### Basic SelectButton Usage

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

Demonstrates the basic usage of the SelectButton component with options and model binding.

```APIDOC
## Basic

SelectButton requires a value to bind and a collection of options.

```html
<p-selectButton [options]="stateOptions" [(ngModel)]="value" optionLabel="label" optionValue="value"></p-selectButton>
```
```

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

### Text SplitButton Examples (Angular)

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

Demonstrates how to create text-based SplitButtons in PrimeNG using different style classes for primary, secondary, success, info, warning, help, danger, and plain variants. Requires the SplitButton component and an array of menu items.

```html
<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-danger mr-2 mb-2"></p-splitButton>
<p-splitButton label="Plain" [model]="this.items" (onClick)="save('info')" styleClass="p-button-text p-button-plain mr-2 mb-2"></p-splitButton>
```

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

### Import PrimeNG Editor Module

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

This snippet shows how to import the EditorModule into your Angular application. Ensure PrimeNG is installed and configured.

```typescript
import { EditorModule } from 'primeng/editor';
```

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

### Apply Sizes and Help Text to InputText

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

Demonstrates resizing the input using utility classes and providing context with semantic small tags.

```html
<input pInputText type="text" class="p-inputtext-sm" placeholder="Small" />
<input pInputText type="text" class="p-inputtext-lg" placeholder="Large" />
<div class="flex flex-column gap-2">
    <label htmlFor="username">Username</label>
    <input pInputText id="username" aria-describedby="username-help" />
    <small id="username-help">Enter your username to reset your password.</small>
</div>
```

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

### Import PrimeNG Dock Module

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

This snippet shows how to import the DockModule into your Angular application. Ensure you have PrimeNG installed and configured.

```typescript
import { DockModule } from 'primeng/dock';
```

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

### Responsive Overlay Options

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

Defining responsive behavior for overlays based on screen size or media queries.

```APIDOC
## Responsive Overlay Configuration

### Description
Defines how an overlay adapts to different screen sizes using breakpoints or media queries.

### Parameters
#### ResponsiveOverlayOptions
- **breakpoint** (string) - Optional - Breakpoint to trigger modal mode (e.g., '640px').
- **media** (string) - Optional - CSS media query string.
- **direction** (string) - Optional - Modal display direction (center, top, bottom, left, right, etc.).
- **hideOnEscape** (boolean) - Optional - Hides overlay on escape key press.

### Request Example
{
  "breakpoint": "640px",
  "direction": "bottom",
  "hideOnEscape": true
}
```

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

### Configuring Accessibility

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

Examples of how to associate labels with the Chips component using standard HTML attributes for screen reader support.

```html
<label for="chips1">Tags</label>
<p-chips inputId="chips1"></p-chips>

<p-chips aria-label="Tags"></p-chips>
```

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

### Import ScrollerModule in Angular

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

This snippet shows how to import the ScrollerModule into your Angular application to use the Scroller component. Ensure PrimeNG is installed and configured.

```typescript
import { ScrollerModule } from 'primeng/scroller';
```

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

### Import ProgressSpinnerModule

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

This code snippet shows how to import the ProgressSpinnerModule into your Angular application to use the ProgressSpinner component. Ensure PrimeNG is installed and configured.

```typescript
import { ProgressSpinnerModule } from 'primeng/progressspinner';
```

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

### Basic OverlayPanel Usage

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

Demonstrates the basic usage of the OverlayPanel component. The visibility is controlled using the toggle, show, and hide methods, triggered by an event on the target element. An example button is provided to trigger the toggle action.

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

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

### Basic PrimeNG Panel Usage

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

Demonstrates the basic implementation of a PrimeNG Panel component. It requires a 'header' property and the content is placed as children of the component. This is a fundamental example for displaying content within a titled panel.

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

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

### Import FieldsetModule in Angular

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

This snippet shows how to import the FieldsetModule into your Angular application to use the Fieldset component. Ensure you have PrimeNG installed.

```typescript
import { FieldsetModule } from 'primeng/fieldset';
```

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

### Custom Mask Formats

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

Examples of various mask patterns including SSN, Phone, and Serial Numbers using alphanumeric placeholders.

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

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

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

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

### Basic Menu Usage (HTML)

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

Demonstrates the basic implementation of the PrimeNG Menu component. It requires a collection of menu items defined in the 'model' property.

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

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

### ConfirmDialog Basic Usage with ConfirmationService

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

Demonstrates how to use the ConfirmationService to display a ConfirmDialog with custom messages, headers, icons, and accept/reject functions. This is the standard imperative way to trigger the dialog.

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

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

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

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

### Import MessagesModule in Angular

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

This snippet shows how to import the MessagesModule into your Angular application to use the PrimeNG messages component. Ensure you have PrimeNG installed.

```typescript
import { MessagesModule } from 'primeng/messages';
```

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

### Implementing Basic Tooltip

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

Applying a simple tooltip to an input element using the pTooltip directive.

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

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

### Customizing Number of Stars

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

Adjusts the total number of stars displayed in the Rating component using the 'stars' property. This example sets the rating to have 10 stars.

```html
<p-rating [(ngModel)]="value" [stars]="10"></p-rating>
```

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

### Paginator Image Gallery

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

Example of using the Paginator to drive an image gallery, where the current page index updates the source of an image element.

```HTML
<p-paginator [first]="first" [rows]="1" [totalRecords]="120" (onPageChange)="onPageChange($event)" [showJumpToPageDropdown]="true" [showPageLinks]="false"></p-paginator>
<img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature{{ first + 1 }}.jpg" class="max-w-full"/>
```

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

### Global ContextMenu Configuration

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

Shows how to configure the ContextMenu to be global, attaching it to the entire document. This allows the context menu to appear when right-clicking anywhere on the page.

```html
<p-contextMenu [model]="items" [global]="true"></p-contextMenu>
```

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

### Disabled InputTextarea

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

This example shows how to disable the InputTextarea component. When the `disabled` property is set to `true`, the textarea becomes non-editable and cannot receive focus.

```html
<textarea rows="5" cols="30" pInputTextarea [disabled]="true">

```