PrimeNG

https://primeng-v14.pages.dev
Admin
PrimeNG is a comprehensive UI component library for Angular applications offering 80+ ready-to-use...
Tokens:369,883
Snippets:3,313
Trust Score:7.2
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic Avatar Examples

Source: https://primeng-v14.pages.dev/avatar

Demonstrates the three built-in display modes for the Avatar component: label, icon, and image. No additional setup is required beyond importing the module.

```html
<p-avatar label="P"></p-avatar>
<p-avatar icon="pi pi-search"></p-avatar>
<p-avatar image="user.png"></p-avatar>

```

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

### TabView Usage Example

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

Example of how to use the TabView component and handle its events.

```APIDOC
## TabView Usage

### Description
Example demonstrating the usage of the TabView component and its `onChange` event.

### Code
```html
<p-tabView (onChange)="handleChange($event)">
</p-tabView>
```

### Event Handler
```javascript
handleChange(e) {
    var index = e.index;
}
```
```

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

### Basic Usage

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

A basic example of how to use the Menu component.

```APIDOC
## Basic
<p-menu [model]="items"></p-menu>
```

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

### Targeted ContextMenu Setup

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

Attach a ContextMenu to a specific element using a local template variable defined in the 'target' property. The example shows targeting an image element.

```html
<p-contextMenu [target]="img" [model]="items2" ></p-contextMenu>

<img #img src="assets/showcase/images/primeng.svg" alt="Logo">
```

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

### Overlay Usage

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

An example demonstrating the overlay mode of the Menu component.

```APIDOC
## Overlay
<button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
```

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

### Basic Chip Examples

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

Demonstrates how to use the p-chip component with text, icons, and images.

```html
<p-chip label="Text Only"></p-chip>
<p-chip label="Text with icon" icon="pi pi-check"></p-chip>
<p-chip label="Text with image" image="user.png"></p-chip>
```

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

### MultiSelect Component Setup

Source: https://primeng-v14.pages.dev/multiselect

Component setup for PrimeNG MultiSelect, including necessary imports and data structures for cities, countries, and grouped cities. This code defines the component's properties and initializes data for the MultiSelect examples.

```typescript
import {Component} from '@angular/core';
import {CountryService} from '../../service/countryservice';

interface City {
    name: string,
    code: string
}

interface Country {
    name: string,
    code: string
}

@Component({
    templateUrl: './multiselectdemo.html',
    styleUrls: ['./multiselectdemo.scss']
})
export class MultiSelectDemo {

    selectedCities1: City[];

    selectedCities2: City[];

    selectedCities3: any[];

    selectedCities4: any[];

    selectedCountries1: Country[];

    selectedCountries2: Country[];

    cities: City[];

    groupedCities: SelectItemGroup[];

    countries: City[];

    virtualCountries: Country[];

    constructor(private countryService: CountryService) {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];

        this.countries = [
            {name: 'Australia', code: 'AU'},
            {name: 'Brazil', code: 'BR'},
            {name: 'China', code: 'CN'},
            {name: 'Egypt', code: 'EG'},
            {name: 'France', code: 'FR'},
            {name: 'Germany', code: 'DE'},
            {name: 'India', code: 'IN'},
            {name: 'Japan', code: 'JP'},
            {name: 'Spain', code: 'ES'},
            {name: 'United States', code: 'US'}
        ];

        this.groupedCities = [
            {
                label: 'Germany', value: 'de',
                items: [
                    {label: 'Berlin', value: 'Berlin'},
                    {label: 'Frankfurt', value: 'Frankfurt'},
                    {label: 'Hamburg', value: 'Hamburg'},
                    {label: 'Munich', value: 'Munich'}
                ]
            },
            {
                label: 'USA', value: 'us',
                items: [
                    {name: 'Chicago', value: 'Chicago'},
                    {name: 'Los Angeles', value: 'Los Angeles'},
                    {name: 'New York', value: 'New York'},
                    {name: 'San Francisco', value: 'San Francisco'}
                ]
            }
        ];
    }
}
```

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

### TabMenu Default Example

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

A basic TabMenu implementation with static menu items.

```typescript
this.items = [
    {label: 'Home', icon: 'pi pi-home'},
    {label: 'Calendar', icon: 'pi pi-calendar'},
    {label: 'Edit', icon: 'pi pi-pencil'},
    {label: 'Documentation', icon: 'pi pi-file'},
    {label: 'Settings', icon: 'pi pi-cog'}
];
```

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

### AutoFocus Directive Example

Source: https://primeng-v14.pages.dev/autofocus

An example demonstrating the usage of the AutoFocus directive with an input element.

```APIDOC
```html
<input type="text" pInputText pAutoFocus [autofocus]="true" placeholder="Automatically focused" >
```
```

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

### Paginator with Customization

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

An example demonstrating advanced customization of the Paginator component.

```APIDOC
## Custom Paginator

### Description
An example demonstrating advanced customization of the Paginator component, including jump to page dropdown and disabling page links.

### Usage
```html
<div class="grid align-items-center">
    <div class="col-1">
        <p-button icon="pi pi-refresh" (onClick)="refresh()"></p-button>
    </div>
    <div class="col-10">
        <p-paginator [first]="first" [rows]="1" [totalRecords]="totalRecords2" (onPageChange)="onPageChange($event)"
        [showJumpToPageDropdown]="true" [showPageLinks]="false"></p-paginator>
    </div>
    <div class="col-1 grid justify-content-end">
        <p-button icon="pi pi-search"></p-button>
    </div>
</div>
<div class="image-gallery">
    <img src="assets/showcase/images/demo/nature/nature{{first + 1}}.jpg" />
</div>
```

### Component Integration
```typescript
export class MyComponent {
    first: number;
    totalRecords2: number;

    onPageChange(event) {
        //event.first = Index of the first record
        //event.rows = Number of rows to display in new page
        //event.page = Index of the new page
        //event.pageCount = Total number of pages
    }

    refresh() {
        // Refresh logic
    }
}
```

### Styling
```css
.image-gallery {
    text-align: center;
    padding: 1rem;
}
```
```

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

### Basic Chips Usage

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

A simple example of using the Chips component with default settings.

```APIDOC
## Basic Chips

### Description
A simple example of using the Chips component with default settings.

### Template
```html
<p-chips [(ngModel)]="values1"></p-chips>
```

### Component
```typescript
export class ChipsDemo {
    values1: string[];
}
```
```

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

### Basic Carousel Setup

Source: https://primeng-v14.pages.dev/carousel

Demonstrates the fundamental structure for implementing a PrimeNG Carousel component. Ensure you have imported the CarouselModule.

```html
<div class="card">
    <p-carousel [value]="products" numVisible="3" numScroll="3" [responsiveOptions]="responsiveOptions">
        <ng-template pTemplate="item" let-product>
            <div class="product-item">
                <div class="product-item-content">
                    <div class="p-mb-3">
                        <img [src]="'images/product/sample-' + product.image + '.jpg'" [alt]="product.name" class="product-image" />
                    </div>
                    <div>
                        <h4 class="p-mb-1">{{product.name}}</h4>
                        <h6 class="p-mt-0 p-mb-3">${{product.price}}</h6>
                        <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                        <div class="car-buttons p-mt-5">
                            <p-button type="button" styleClass="p-button-secondary p-mr-2" icon="pi pi-cog"></p-button>
                            <p-button type="button" icon="pi pi-shopping-cart"></p-button>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-carousel>
</div>
```

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

### Basic Paginator Usage

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

A simple example of how to use the Paginator component with basic properties.

```APIDOC
## Basic Paginator

### Description
A simple example of how to use the Paginator component with basic properties.

### Usage
```html
<p-paginator [rows]="10" [totalRecords]="100"></p-paginator>
```

### Component Integration
```typescript
export class MyComponent {
    // Component logic here
}
```
```

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

### Basic ConfirmPopup Setup

Source: https://primeng-v14.pages.dev/confirmpopup

Defines the ConfirmPopup component and a button to trigger it. An instance of ConfirmationService is required to display the popup.

```html
<p-confirmPopup></p-confirmPopup>

<button (click)="confirm($event)" pButton icon="pi pi-check" label="Confirm"></button>
```

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

### ConfirmPopup and Toast Setup

Source: https://primeng-v14.pages.dev/confirmpopup

Includes ConfirmPopup and p-toast components in the template, along with a button to trigger the confirmation dialog.

```html
<p-toast></p-toast>

<p-confirmPopup></p-confirmPopup>

<button (click)="confirm($event)" pButton icon="pi pi-check" label="Confirm"></button>
```

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

### Overlay Menu Example

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

An overlay menu is displayed when a button is clicked. The menu is configured with popup mode enabled.

```html
<button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
```

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

### Basic TabView Setup

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

Create a TabView with multiple TabPanels. The header attribute defines the title of each tab.

```html
<p-tabView>
    <p-tabPanel header="Header 1">
       Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        Content 3
    </p-tabPanel>
</p-tabView>
```

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

### Maximizable Dialog Example

Source: https://primeng-v14.pages.dev/dialog

Demonstrates how to create a dialog that can be maximized and restored. The `maximizable` property controls this behavior.

```html
<p-dialog header="Godfather I" [(visible)]="displayMaximizable" [modal]="true" [style]="{width: '50vw'}" [maximizable]="true"
    [draggable]="false" [resizable]="false">
    <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>
        <ng-template pTemplate="footer">
            <p-button icon="pi pi-check" (click)="displayMaximizable=false" label="Ok" styleClass="p-button-text"></p-button>
        </ng-template>
</p-dialog>
```

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

### Basic Accordion Setup

Source: https://primeng-v14.pages.dev/accordion

Defines a basic accordion with multiple collapsible tabs. Each tab has a header and content.

```html
<p-accordion>
    <p-accordionTab header="Header 1">
       Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3    
    </p-accordionTab>
</p-accordion>
```

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

### OverlayPanel with Table Integration

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

An example demonstrating an OverlayPanel containing a PrimeNG Table, triggered by a button click.

```APIDOC
```html
<p-toast></p-toast>

<p-button [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" icon="pi pi-search" (click)="op.toggle($event)"></p-button>

<p-overlayPanel #op [showCloseIcon]="true" [style]="{width: '450px'}">
    <ng-template pTemplate>
        <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="5" responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
                    <th>Image</th>
                    <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-product>
                <tr [pSelectableRow]="rowData">
                    <td>{{product.name}}</td>
                    <td><img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
                    <td>{{product.price}}</td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</p-overlayPanel>
```
```

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

### Basic Captcha Usage

Source: https://primeng-v14.pages.dev/captcha

Example of how to integrate the Captcha component into an application, including handling the response event.

```APIDOC
## Basic Captcha Usage

### Description
This example demonstrates how to use the Captcha component with a site key and handle the `onResponse` event.

### Component Usage
```html
<p-captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" (onResponse)="showResponse($event)"></p-captcha>
```

### Component Logic
```typescript
export class CaptchaDemo {

    constructor(private messageService: MessageService) {}

    showResponse(event) {
        this.messageService.add({severity:'info', summary:'Succees', detail: 'User Responded', sticky: true});
    }
}
```
```

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

### Lazy Loading Implementation

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

This example demonstrates how to implement lazy loading with the Scroller component. It shows the template setup and the corresponding TypeScript code for loading data on demand.

```APIDOC
## Lazy Loading

Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading, enable `lazy` attribute, initialize your data as a placeholder with a length and finally implement a method callback using `onLazyLoad` that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded.

### Template Example
```html
<p-scroller [value]="virtualCars" scrollHeight="200px" [itemSize]="50"
    [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
    <ng-template pTemplate="item" let-car>
        Car content
    </ng-template>
    <ng-template pTemplate="loader">
        Loading...
    </ng-template>
</p-scroller>
```

### Component Example
```typescript
export class LazyScrollerDemo implements OnInit {

    virtualCars: Car[];

    ngOnInit() {
        this.cars = Array.from({length: 10000}).map(() => this.carService.generateCar());
        this.virtualCars =  Array.from({length: 10000});
    }

    loadCarsLazy(event: LazyLoadEvent) {
        //simulate remote connection with a timeout
        setTimeout(() => {
            //load data of required page
            let loadedCars = this.cars.slice(event.first, event.last);

            //populate page of virtual cars
            Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]);

            //trigger change detection
            this.virtualCars = [...this.virtualCars];
        }, 1000);
    }

}
```
```

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

### Basic Context Menu Setup

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

Integrates the ContextMenu component with an image element. Ensure the target element and model are properly defined.

```html
<img #img src="assets/showcase/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true">
<p-contextMenu [target]="img" [model]="items"></p-contextMenu>
```

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

### Basic PickList Setup

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

Configure a basic PickList by providing two arrays for source and target lists and defining the item template using ng-template.

```html
<p-pickList [source]="list1" [target]="list2">
    <ng-template let-car pTemplate="item">
        <div>
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-pickList>
```

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

### Basic File Upload Setup

Source: https://primeng-v14.pages.dev/fileupload

Configure a basic FileUpload component by specifying the 'url' for the upload target and a 'name' for file identification on the backend.

```html
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>

```

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

### Install Angular CDK

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

Install the Angular CDK package, which is a dependency for OrderList's drag-and-drop functionality.

```bash
npm install @angular/cdk --save
```

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

### InputSwitch with Preselection

Source: https://primeng-v14.pages.dev/inputswitch

Demonstrates preselecting the InputSwitch component by initializing the bound model to true.

```html
<p-inputSwitch [(ngModel)]="checked2"></p-inputSwitch>
```

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

### Install PrimeNG

Source: https://primeng-v14.pages.dev/

Install PrimeNG using npm. This is the first step to using the library in your Angular project.

```bash
npm i primeng
```

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

### Install Charts.js

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

Install the charts.js package using npm. This is a prerequisite for using the PrimeNG Chart component.

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

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

### Install Angular Animations Module

Source: https://primeng-v14.pages.dev/setup

Install the Angular animations package using npm. This is required for components that utilize animations.

```bash
npm install @angular/animations --save
```

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

### Basic Galleria Setup with Item Template

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

Integrates the Galleria component by providing an item template for displaying images. Requires a value bound to an array of objects.

```html
<p-galleria [value]="images">
    <ng-template pTemplate="item" let-item>
        <img [src]="item.previewImageSrc" [alt]="item.alt" />
    </ng-template>
</p-galleria>
```

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

### Install PrimeIcons using npm

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

Install the PrimeIcons library to your project using npm. This command adds the package as a dependency.

```bash
npm install primeicons --save
```

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

### Install Quill Editor via npm

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

This command installs the Quill Editor library, which is a dependency for the PrimeNG Editor component.

```bash
npm install quill --save
```

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

### Small Table Implementation

Source: https://primeng-v14.pages.dev/table/size

Use the `p-datatable-sm` class to render a compact table. Ensure the `products` data and `ProductService` are available.

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

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

### MultiSelect Component Setup

Source: https://primeng-v14.pages.dev/multiselect

Defines the data structure for countries and fetches country data using a service. This is a common setup for populating dropdowns.

```typescript
import { Component, OnInit } from '@angular/core';
import { CountryService } from './countryservice';

@Component({
    selector: 'app-multiselect-basic-demo',
    templateUrl: './multiselect-basic-demo.html'
})
export class MultiselectBasicDemo implements OnInit {

    virtualCountries: any[];

    selectedCountries1: string[] = [];

    selectedCountries2: string[] = [];

    countries: any[];

    constructor(private countryService: CountryService) {}

    ngOnInit() {
        this.countries = [
            {
                label: 'Germany', value: 'de',
                items: [
                    {label: 'Berlin', value: 'Berlin'},
                    {label: 'Frankfurt', value: 'Frankfurt'},
                    {label: 'Hamburg', value: 'Hamburg'},
                    {label: 'Munich', value: 'Munich'}
                ]
            },
            {
                label: 'Japan', value: 'jp',
                items: [
                    {name: 'Kyoto', value: 'Kyoto'},
                    {name: 'Osaka', value: 'Osaka'},
                    {name: 'Tokyo', value: 'Tokyo'},
                    {name: 'Yokohama', value: 'Yokohama'}
                ]
            }
        ];

        this.countryService.getCountries().then(countries => {
            this.virtualCountries = countries;
        });
    }

}
```

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

### Messages Component Examples

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

Demonstrates various ways to use the p-messages component, including static content with custom templates and dynamic message generation.

```html
<p-messages [(value)]="msgs1" [enableService]="false"></p-messages>
```

```html
<button type="button" pButton pRipple (click)="addMessages()" label="Show" class="mr-2"></button>
<button type="button" pButton pRipple (click)="clearMessages()" icon="pi pi-times" label="Clear" class="p-button-secondary"></button>

<p-messages [(value)]="msgs2" [enableService]="false"></p-messages>
```

```html
<button type="button" pButton (click)="showViaService()" label="Via Service"></button>
<p-messages></p-messages>
```

```html
<p-messages severity="info">
    <ng-template pTemplate>
        <img src="assets/showcase/images/primeng.svg" width="32" />
        <div class="ml-2">Always bet on Prime.</div>
    </ng-template>
</p-messages>
```

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

### TabMenu Combined Properties Example

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

Demonstrates the usage of both 'activeItem' and 'scrollable' properties for TabMenu. This example initializes both regular and scrollable items with their respective active items.

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

<p-tabMenu [model]="scrollableItems" [scrollable]="true" [activeItem]="activeItem2"></p-tabMenu>
```

```typescript
export class TabMenuDemo {
    
    items: MenuItem[];

    scrollableItems: MenuItem[];

    activeItem: MenuItem;

    activeItem2: MenuItem;

    ngOnInit() {
        this.items = [
            {label: 'Home', icon: 'pi pi-fw pi-home'},
            {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
            {label: 'Settings', icon: 'pi pi-fw pi-cog'}
        ];

        this.scrollableItems = Array.from({ length: 50 }, (_, i) => ({ label: `Tab ${i + 1}`}));

        this.activeItem = this.items[0];

        this.activeItem2 = this.scrollableItems[0];
    }

}
```

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

### Basic OverlayPanel Usage

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

Demonstrates the basic implementation of an OverlayPanel with dismissable behavior and a close icon.

```APIDOC
## Dismissable and CloseIcon

Clicking outside the overlay hides the panel, setting `dismissable` to false disables this behavior. Additionally enabling `showCloseIcon` property displays a close icon at the top right corner to close the panel.

```html
<p-overlayPanel #op [dismissable]="true" [showCloseIcon]="true">
    <ng-template pTemplate>
        Content
    </ng-template>
</p-overlayPanel>
```
```

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

### Menubar Template with Start and End Content

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

This template demonstrates how to integrate the p-menubar component into an Angular application. It includes custom content for the start and end sections of the menubar, such as an image and a search input.

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

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

### Disabled Rating

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

Example of a disabled Rating component.

```APIDOC
## Disabled Rating

### Description
Disabled Rating component.

### Component
```html
<p-rating [ngModel]="val4" disabled="true" stars="10"></p-rating>
```

### TypeScript
```typescript
export class RatingDemo {
    val4: number = 5;
}
```
```

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

### Read-Only Rating

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

Example of a read-only Rating component.

```APIDOC
## Read-Only Rating

### Description
Rating component configured as read-only.

### Component
```html
<p-rating [ngModel]="val3" readonly="true" stars="10" [cancel]="false"></p-rating>
```

### TypeScript
```typescript
export class RatingDemo {
    val3: number = 5;
}
```
```

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

### Basic Dropdown Setup

Source: https://primeng-v14.pages.dev/dropdown

A basic dropdown requires a collection of options and a bound value. Use optionLabel to specify the property for display.

```html
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
```

```typescript
interface City {
    name: string,
    code: string
}

export class DropdownDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}
```

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

### Basic CascadeSelect Setup

Source: https://primeng-v14.pages.dev/cascadeselect

Configure the CascadeSelect with data, option labels, and children hierarchy. Ensure the data structure matches the specified optionGroupChildren.

```html
<p-cascadeSelect [(ngModel)]="selectedCity1" [options]="countries" optionLabel="cname" optionGroupLabel="name"
    [optionGroupChildren]="['states', 'cities']" [style]="{'minWidth': '14rem'}"></p-cascadeSelect>
```

```typescript
countries: any[];

selectedCity1: any;

ngOnInit() {
    this.countries = [
        {
            name: 'Australia',
            code: 'AU',
            states: [
                {
                    name: 'New South Wales',
                    cities: [
                        {cname: 'Sydney', code: 'A-SY'},
                        {cname: 'Newcastle', code: 'A-NE'},
                        {cname: 'Wollongong', code: 'A-WO'}
                    ]
                },
                {
                    name: 'Queensland',
                    cities: [
                        {cname: 'Brisbane', code: 'A-BR'},
                        {cname: 'Townsville', code: 'A-TO'}
                    ]
                },

            ]
        },
        {
            name: 'Canada',
            code: 'CA',
            states: [
                {
                    name: 'Quebec',
                    cities: [
                        {cname: 'Montreal', code: 'C-MO'},
                        {cname: 'Quebec City', code: 'C-QU'}
                    ]
                },
                {
                    name: 'Ontario',
                    cities: [
                        {cname: 'Ottawa', code: 'C-OT'},
                        {cname: 'Toronto', code: 'C-TO'}
                    ]
                },

            ]
        },
        {
            name: 'United States',
            code: 'US',
            states: [
                {
                    name: 'California',
                    cities: [
                        {cname: 'Los Angeles', code: 'US-LA'},
                        {cname: 'San Diego', code: 'US-SD'},
                        {cname: 'San Francisco', code: 'US-SF'}
                    ]
                },
                {
                    name: 'Florida',
                    cities: [
                        {cname: 'Jacksonville', code: 'US-JA'},
                        {cname: 'Miami', code: 'US-MI'},
                        {cname: 'Tampa', code: 'US-TA'},
                        {cname: 'Orlando', code: 'US-OR'}
                    ]
                },
                {
                    name: 'Texas',
                    cities: [
                        {cname: 'Austin', code: 'US-AU'},
                        {cname: 'Dallas', code: 'US-DA'},
                        {cname: 'Houston', code: 'US-HO'}
                    ]
                }
            ]
        }
    ];
}
```

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

### Phone InputMask

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

Example of an InputMask for phone number input.

```APIDOC
## Phone

<p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
```

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

### Basic Rating Usage

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

Example of a basic Rating component implementation.

```APIDOC
## Basic Rating

### Description
Basic usage of the Rating component.

### Component
```html
<p-rating [(ngModel)]="val1"></p-rating>
```

### TypeScript
```typescript
export class RatingDemo {
    val1: number;
}
```
```

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

### Dynamic Checkbox Values and Options

Source: https://primeng-v14.pages.dev/checkbox

Example showing dynamic values, preselection, value binding, and disabled options for checkboxes.

```html
<div *ngFor="let category of categories" class="field-checkbox">
    <p-checkbox name="group2" value="category" [value]="category"  [(ngModel)]="selectedCategories" [inputId]="category.key" [disabled]="category.key === 'R'"></p-checkbox>
    <label [for]="category.key">{{category.name}}</label>
</div>
```

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

### Global ContextMenu Setup

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

Attach a ContextMenu to the document for global right-click functionality. Ensure the 'items' property is bound to your menu model.

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

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

### Message Component Examples

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

Illustrates the usage of the Message component with different severities (info, success, warn, error) and static text content.

```html
<p-message severity="info" text="Message Content"></p-message>
<p-message severity="success" text="Message Content"></p-message>  
<p-message severity="warn" text="Message Content"></p-message>  
<p-message severity="error" text="Message Content"></p-message>

```

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

### PrimeNG Table Sorting Setup

Source: https://primeng-v14.pages.dev/table/sort

This TypeScript code sets up the necessary imports and component structure for PrimeNG table demonstrations. It includes fetching product data and initializing arrays for different table configurations.

```typescript
import { Component, OnInit } from '@angular/core';
import { Product } from '../../domain/product';
import { ProductService } from '../../service/productservice';
import { SortEvent } from 'primeng/api';

@Component({
    templateUrl: './tablesortdemo.html'
})
export class TableSortDemo implements OnInit {

    products1: Product[];

    products2: Product[];

    products3: Product[];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService.getProductsSmall().then(data => this.products1 = data);
        this.productService.getProductsSmall().then(data => this.products2 = data);
        this.productService.getProductsSmall().then(data => this.products3 = data);
    }

    customSort(event: SortEvent) {
        let data = [...this.products3];
        if (event.data) {
            data.sort((a, b) => {
                let result = (a[event.field] < b[event.field]) ? -1 : (a[event.field] > b[event.field]) ? 1 : 0;
                return (event.order * result);
            });
        }

        this.products3 = data;
    }
}
```

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

### TabMenu Scrollable Example

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

Demonstrates a scrollable TabMenu for cases with many items.

```typescript
this.items = [
    {label: 'Tab 1', icon: 'pi pi-bookmark'},
    {label: 'Tab 2', icon: 'pi pi-bookmark'},
    {label: 'Tab 3', icon: 'pi pi-bookmark'},
    {label: 'Tab 4', icon: 'pi pi-bookmark'},
    {label: 'Tab 5', icon: 'pi pi-bookmark'},
    {label: 'Tab 6', icon: 'pi pi-bookmark'},
    {label: 'Tab 7', icon: 'pi pi-bookmark'},
    {label: 'Tab 8', icon: 'pi pi-bookmark'},
    {label: 'Tab 9', icon: 'pi pi-bookmark'},
    {label: 'Tab 10', icon: 'pi pi-bookmark'},
    {label: 'Tab 11', icon: 'pi pi-bookmark'},
    {label: 'Tab 12', icon: 'pi pi-bookmark'},
    {label: 'Tab 13', icon: 'pi pi-bookmark'},
    {label: 'Tab 14', icon: 'pi pi-bookmark'},
    {label: 'Tab 15', icon: 'pi pi-bookmark'},
    {label: 'Tab 16', icon: 'pi pi-bookmark'},
    {label: 'Tab 17', icon: 'pi pi-bookmark'},
    {label: 'Tab 18', icon: 'pi pi-bookmark'},
    {label: 'Tab 19', icon: 'pi pi-bookmark'},
    {label: 'Tab 20', icon: 'pi pi-bookmark'},
    {label: 'Tab 21', icon: 'pi pi-bookmark'},
    {label: 'Tab 22', icon: 'pi pi-bookmark'},
    {label: 'Tab 23', icon: 'pi pi-bookmark'},
    {label: 'Tab 24', icon: 'pi pi-bookmark'},
    {label: 'Tab 25', icon: 'pi pi-bookmark'},
    {label: 'Tab 26', icon: 'pi pi-bookmark'},
    {label: 'Tab 27', icon: 'pi pi-bookmark'},
    {label: 'Tab 28', icon: 'pi pi-bookmark'},
    {label: 'Tab 29', icon: 'pi pi-bookmark'},
    {label: 'Tab 30', icon: 'pi pi-bookmark'},
    {label: 'Tab 31', icon: 'pi pi-bookmark'},
    {label: 'Tab 32', icon: 'pi pi-bookmark'},
    {label: 'Tab 33', icon: 'pi pi-bookmark'},
    {label: 'Tab 34', icon: 'pi pi-bookmark'},
    {label: 'Tab 35', icon: 'pi pi-bookmark'},
    {label: 'Tab 36', icon: 'pi pi-bookmark'},
    {label: 'Tab 37', icon: 'pi pi-bookmark'},
    {label: 'Tab 38', icon: 'pi pi-bookmark'},
    {label: 'Tab 39', icon: 'pi pi-bookmark'},
    {label: 'Tab 40', icon: 'pi pi-bookmark'},
    {label: 'Tab 41', icon: 'pi pi-bookmark'},
    {label: 'Tab 42', icon: 'pi pi-bookmark'},
    {label: 'Tab 43', icon: 'pi pi-bookmark'},
    {label: 'Tab 44', icon: 'pi pi-bookmark'},
    {label: 'Tab 45', icon: 'pi pi-bookmark'},
    {label: 'Tab 46', icon: 'pi pi-bookmark'},
    {label: 'Tab 47', icon: 'pi pi-bookmark'},
    {label: 'Tab 48', icon: 'pi pi-bookmark'},
    {label: 'Tab 49', icon: 'pi pi-bookmark'},
    {label: 'Tab 50', icon: 'pi pi-bookmark'}
];
```

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

### Menu Item Definition

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

Example of defining menu items for the Menu component.

```APIDOC
```typescript
export class MenuDemo {

    items: MenuItem[];

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.items = [{
            label: 'Options',
            items: [{
                label: 'Update',
                icon: 'pi pi-refresh',
                command: () => {
                    this.update();
                }
            },
            {
                label: 'Delete',
                icon: 'pi pi-times',
                command: () => {
                    this.delete();
                }
            }
            ]},
            {
                label: 'Navigate',
                items: [{
                    label: 'Angular',
                    icon: 'pi pi-external-link',
                    url: 'http://angular.io'
                },
                {
                    label: 'Router',
                    icon: 'pi pi-upload',
                    routerLink: '/fileupload'
                }
            ]}
        ];
    }

    update() {
        this.messageService.add({severity:'success', summary:'Success', detail:'Data Updated'});
    }

    delete() {
        this.messageService.add({severity:'warn', summary:'Delete', detail:'Data Deleted'});
    }

}
```
```

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

### OverlayPanel Demo Styles

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

CSS styles for the OverlayPanel demo, including button minimum width and product image styling.

```css
button {
    min-width: 15rem;
}

.product-image {
    width: 50px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}

}
```

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

### Date InputMask

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

Example of an InputMask for date input, with a custom slot character.

```APIDOC
## Date

<p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
```

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

### Basic Fieldset Usage

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

A basic example of how to implement a PrimeNG Fieldset with a legend.

```html
<p-fieldset legend="Header">
    Content
</p-fieldset>
```

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

### Configure Responsive Overlay Options

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

Define responsive behavior for the overlay based on media queries or breakpoints. Options include styling, content styling, breakpoint conditions, media queries, and display direction.

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

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

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

```

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

### Handling Tab Events

Source: https://primeng-v14.pages.dev/accordion

Example of handling the `onOpen` event for Accordion tabs.

```APIDOC
## Handling Tab Events

### Description
Handle events emitted by the Accordion component, such as `onOpen`.

### Example
```html
<p-accordion (onOpen)="onTabOpen($event)">
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
</p-accordion>
```

```typescript
onTabOpen(e) {
    var index = e.index;
    console.log('Tab opened with index: ' + index);
}
```
```

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

### Lazy Loading Accordion

Source: https://primeng-v14.pages.dev/accordion

Example of implementing lazy loading for Accordion tabs.

```APIDOC
## Lazy Loading Accordion

### Description
Lazy loading improves initial load performance by initializing only the active tab. Inactive tabs are initialized upon selection. Lazy loaded content is cached by default.

### Usage
Use `ng-template` with `pTemplate="content"` within an `p-accordionTab` to enable lazy loading.

### Example
```html
<p-accordion>
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        <ng-template pTemplate="content">
            Complex Content to Lazy Load
        </ng-template>
    </p-accordionTab>
</p-accordion>
```
```

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

### Basic Terminal Usage

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

A basic example of how to include the terminal component in your HTML template. Customize welcome messages and prompts as needed.

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

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

### Disabling Animations

Source: https://primeng-v14.pages.dev/toast

Example of how to disable toast animations by setting transition options to '0ms'.

```APIDOC
## Disabling Animations

### Description
Example of how to disable toast animations by setting transition options to '0ms'.

### Code Example
```html
<p-toast [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-toast>
```
```

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

### Form Layout Example

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

Illustrates a form layout with input fields and associated error messages using PrimeNG components.

```html
<div class="field p-fluid">
    <label for="username">Username</label>
    <input id="username" type="username" aria-describedby="username-help" class="ng-invalid ng-dirty" pInputText />
    <small id="username-help" class="p-error">Username is not available.</small>
</div>
```

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

### Phone with Extension InputMask

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

Example of an InputMask for phone numbers including an optional extension.

```APIDOC
## Phone Ext

<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
```

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

### ConfirmDialog Usage

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

This snippet shows how to import the ConfirmDialogModule and ConfirmationService, and how to use the ConfirmationService to display a confirmation dialog.

```APIDOC
## Import
```
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
```

## Getting Started
ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it by calling confirm method.
```html
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

<button (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button>
```
```typescript
export class ConfirmDialogDemo {

    constructor(private confirmationService: ConfirmationService) {}

    confirm() {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to perform this action?',
            accept: () => {
                //Actual logic to perform a confirmation
            }
        });
    }
}
```
```

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

### KeyFilter Basic Filtering Examples

Source: https://primeng-v14.pages.dev/keyfilter

Use pKeyFilter with predefined values like 'int', 'num', 'money', 'hex', 'alpha', and 'alphanum' for common filtering needs.

```html
<input type="text" pInputText pKeyFilter="int" placeholder="Integers">

```

```html
<input type="text" pInputText pKeyFilter="num" placeholder="Numbers">

```

```html
<input type="text" pInputText pKeyFilter="money" placeholder="Money">

```

```html
<input type="text" pInputText pKeyFilter="hex" placeholder="Hex">

```

```html
<input type="text" pInputText pKeyFilter="alpha" placeholder="Alphabetic">

```

```html
<input type="text" pInputText pKeyFilter="alphanum" placeholder="Alphanumberic">

```

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

### SSN InputMask

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

Example of an InputMask configured for Social Security Number (SSN) input.

```APIDOC
## SSN

<p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
```
Tokens:
Raw