### Basic FileUpload Example

Source: https://primeng.dev/fileupload

Demonstrates a basic file upload setup with a choose button and upload functionality. Requires no special properties to be set.

```html
<p-fileUpload name="myFile" url="./upload" accept="image/*" maxFileSize="5000000" (onUpload)="onUpload($event)" 
    chooseLabel="Choose" uploadLabel="Upload" cancelLabel="Cancel"></p-fileUpload>
```

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

### Basic Toolbar Example

Source: https://primeng.dev/toolbar

A simple toolbar demonstrating the grouping of action buttons.

```html
<div class="flex flex-wrap gap-2">
    <p-toolbar>
        <div class="p-toolbar-group-start">
            <p-button label="Cancel" styleClass="p-button-danger mr-2"></p-button>
            <p-button label="Save"></p-button>
        </div>
    </p-toolbar>
</div>
```

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

### Basic Drawer Example

Source: https://primeng.dev/drawer

A fundamental example of a slide-in drawer from the edge of the screen.

```html
<p-drawer [(visible)]="visible" [modal]="true" [styleClass]="'w-25rem'">
    <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between">
            <div class="font-bold">Header</div>
            <p-button icon="pi pi-times" (click)="visible = false" styleClass="p-button-text"></p-button>
        </div>
    </ng-template>
    <ng-template pTemplate="content">
        <p>Content</p>
    </ng-template>
    <ng-template pTemplate="footer">
        <div class="flex justify-content-end">
            <p-button label="Cancel" (click)="visible = false" styleClass="p-button-outlined"></p-button>
            <p-button label="Save" (click)="visible = false"></p-button>
        </div>
    </ng-template>
</p-drawer>

<p-button label="Show" (click)="visible = true"></p-button>
```

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

### Basic Toolbar Setup

Source: https://primeng.dev/toolbar

A simple PrimeNG Toolbar implementation. Ensure you have imported the ToolbarModule.

```typescript
import { Component } from '@angular/core';
import { ToolbarModule } from 'primeng/toolbar';

@Component({
    selector: 'app-toolbar-basic-demo',
    standalone: true,
    imports: [ToolbarModule],
    template: `<p-toolbar>
        <div class="p-toolbar-group-start">
            <p-button label="New" icon="pi pi-plus" styleClass="mr-2"></p-button>
            <p-button label="Upload" icon="pi pi-upload" severity="success"></p-button>
        </div>
        <div class="p-toolbar-group-end">
            <p-button icon="pi pi-search" styleClass="mr-2"></p-button>
            <p-button icon="pi pi-cog" severity="secondary"></p-button>
        </div>
    </p-toolbar>`
})
export class ToolbarBasicDemoComponent {}
```

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

### Responsive Drawer Example

Source: https://primeng.dev/drawer

Configures the drawer to be responsive using style classes with responsive utilities.

```html
<p-drawer [(visible)]="visible" [modal]="true" styleClass="lg:w-30rem md:w-20rem sm:w-15rem w-10rem">
    <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between">
            <div class="font-bold">Header</div>
            <p-button icon="pi pi-times" (click)="visible = false" styleClass="p-button-text"></p-button>
        </div>
    </ng-template>
    <ng-template pTemplate="content">
        <p>Content</p>
    </ng-template>
    <ng-template pTemplate="footer">
        <div class="flex justify-content-end">
            <p-button label="Cancel" (click)="visible = false" styleClass="p-button-outlined"></p-button>
            <p-button label="Save" (click)="visible = false"></p-button>
        </div>
    </ng-template>
</p-drawer>

<p-button label="Show Responsive Drawer" (click)="visible = true"></p-button>
```

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

### Headless Drawer Example

Source: https://primeng.dev/drawer

Demonstrates the headless mode of the drawer, allowing full customization of the UI.

```html
<p-drawer [(visible)]="visible" [headless]="true" [modal]="true" [styleClass]="'w-25rem'">
    <div class="custom-drawer-content">
        <div class="custom-drawer-header">
            <span class="font-bold">Headless Drawer</span>
            <button class="close-button" (click)="visible = false">&times;</button>
        </div>
        <div class="custom-drawer-body">
            <p>This is a completely custom drawer interface.</p>
            <input type="text" placeholder="Custom input">
        </div>
        <div class="custom-drawer-footer">
            <button class="cancel-button" (click)="visible = false">Cancel</button>
            <button class="submit-button" (click)="visible = false">Submit</button>
        </div>
    </div>
</p-drawer>

<p-button label="Show Headless Drawer" (click)="visible = true"></p-button>

<style>
    .custom-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }
    .custom-drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1rem;
        border-bottom: 1px solid #ccc;
    }
    .custom-drawer-body {
        flex-grow: 1;
        padding: 1rem 0;
    }
    .custom-drawer-footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 1rem;
        border-top: 1px solid #ccc;
    }
    .close-button, .cancel-button, .submit-button {
        background: none;
        border: 1px solid #ccc;
        padding: 0.5rem 1rem;
        cursor: pointer;
    }
    .submit-button {
        margin-left: 0.5rem;
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
</style>
```

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

### Basic InputGroup Example

Source: https://primeng.dev/inputgroup

Combines an input with addons such as buttons or text labels.

```html
<div class="p-inputgroup">
    <span class="p-inputgroup-addon">
        <i class="pi pi-user"></i>
    </span>
    <input type="text" pInputText placeholder="Username">
    <button pButton type="button" label="Search"></button>
</div>
```

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

### Nested Splitter Example

Source: https://primeng.dev/splitter

Illustrates how to nest Splitter components within each other to create complex layouts.

```html
<div class="card">
    <div class="flex">
        <p-splitter [panelSizes]="[50,50]" styleClass="flex-initial">
            <p-splitterpanel header="Panel 1" [size]="50" [minSize]="20">
                <ng-template pTemplate="content">
                    <div class="flex align-items-center justify-content-center h-full font-bold">Panel 1</div>
                </ng-template>
            </p-splitterpanel>
            <p-splitterpanel header="Panel 2" [size]="50" [minSize]="20">
                <ng-template pTemplate="content">
                    <div class="flex flex-column">
                        <p-splitter layout="vertical" [panelSizes]="[30,70]" styleClass="flex-initial">
                            <p-splitterpanel header="Nested Panel 1" [size]="30" [minSize]="10">
                                <ng-template pTemplate="content">
                                    <div class="flex align-items-center justify-content-center h-full font-bold">Nested Panel 1</div>
                                </ng-template>
                            </p-splitterpanel>
                            <p-splitterpanel header="Nested Panel 2" [size]="70" [minSize]="10">
                                <ng-template pTemplate="content">
                                    <div class="flex align-items-center justify-content-center h-full font-bold">Nested Panel 2</div>
                                </ng-template>
                            </p-splitterpanel>
                        </p-splitter>
                    </div>
                </ng-template>
            </p-splitterpanel>
        </p-splitter>
    </div>
</div>
```

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

### Show Overlay

Source: https://primeng.dev/overlay

This snippet demonstrates how to display a basic overlay. It serves as a foundational example for using the Overlay API.

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

@Component({
    selector: 'overlay-basic-demo',
    templateUrl: './overlay-basic-demo.html'
})
export class OverlayBasicDemo {}
```

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

### Basic InputOtp Configuration

Source: https://primeng.dev/inputotp

A basic setup for InputOtp where each digit of the OTP is entered into a separate field.

```html
<p-inputOtp></p-inputOtp>
```

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

### Basic InputOtp Configuration

Source: https://primeng.dev/inputotp

This snippet shows the basic setup for the InputOtp component in Angular. It requires importing the InputOtpModule.

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

@Component({
    selector: 'inputotp-basic-demo',
    templateUrl: './inputotp-basic-demo.html'
})
export class InputOtpBasicDemo {}
```

```html
<p-inputOtp [(ngModel)]="val" [numCols]="6"></p-inputOtp>

<p>Value: {{val}}</p>
```

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

### Sample UI with InputOtp Templating

Source: https://primeng.dev/inputotp

A sample UI implementation showcasing templating for InputOtp, including additional elements like buttons and text for a complete user flow.

```html
<div class="card">
    <div class="flex flex-column align-items-center justify-content-center">
        <h4 class="mb-2">Authenticate Your Account</h4>
        <p class="mb-4">Please enter the code sent to your phone.</p>
        <p-inputOtp></p-inputOtp>
        <div class="flex align-items-center justify-content-center gap-2 mt-4">
            <p-button label="Resend Code" styleClass="p-button-text"></p-button>
            <p-button label="Submit Code"></p-button>
        </div>
    </div>
</div>
```

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

### InputNumber Localization Examples

Source: https://primeng.dev/inputnumber

Demonstrates InputNumber's locale-aware formatting for different regions.

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

@Component({
    selector: 'inputnumber-locale-demo',
    templateUrl: './inputnumber-locale-demo.html'
})
export class InputNumberLocaleDemo {
    public value1: number;

    public value2: number;

    public value3: number;

    public value4: number;
}
```

```html
<h5>User Locale</h5>
<p-inputNumber mode="decimal" [(ngModel)]="value1"></p-inputNumber>

<h5>United States Locale</h5>
<p-inputNumber mode="decimal" locale="en-US" [(ngModel)]="value2"></p-inputNumber>

<h5>German Locale</h5>
<p-inputNumber mode="decimal" locale="de-DE" [(ngModel)]="value3"></p-inputNumber>

<h5>Indian Locale</h5>
<p-inputNumber mode="decimal" locale="en-IN" [(ngModel)]="value4"></p-inputNumber>
```

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

### Toggleable Fieldset Example

Source: https://primeng.dev/fieldset

Content of the fieldset can be expanded and collapsed using the toggleable property.

```html
<p-fieldset legend="Invoice #1024" toggleable="true">
    <p>Design Service$120.00</p>
    <p>Hosting$30.00</p>
    <p>Total$150.00</p>
</p-fieldset>
```

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

### Basic ConfirmDialog Usage

Source: https://primeng.dev/confirmdialog

Demonstrates the basic setup of ConfirmDialog using the p-confirmdialog tag and ConfirmationService. An instance of ConfirmationService is required to display the dialog by calling the confirm method.

```typescript
import { Component } from '@angular/core';
import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api';

@Component({
    selector: 'app-confirmdialog-basic-demo',
    templateUrl: './confirmdialog-basic-demo.html',
    providers: [ConfirmationService, MessageService]
})
export class ConfirmDialogBasicDemo {

    constructor(private confirmationService: ConfirmationService) {}

    show() {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                //action to execute when user confirms
            },
            reject: () => {
                //action to execute when user rejects
            }
        });
    }
}
```

```html
<p-confirmDialog [style]="{width: '50vw'}"></p-confirmDialog>
<p-button (click)="show()" icon="pi pi-check"></p-button>
```

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

### Basic Fieldset Example

Source: https://primeng.dev/fieldset

A simple Fieldset is created with a legend property and content as children.

```html
<p-fieldset legend="Invoice #1024">
    <p>Design Service$120.00</p>
    <p>Hosting$30.00</p>
    <p>Total$150.00</p>
</p-fieldset>
```

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

### Basic Chip Example

Source: https://primeng.dev/chip

A basic chip displaying information with an optional remove action.

```html
<p-chip label="GitHub"></p-chip>
```

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

### Basic Dock Configuration

Source: https://primeng.dev/dock

This snippet demonstrates the basic setup of a PrimeVue Dock component, including its model for defining items. Ensure the Dock component and its necessary CSS are imported.

```javascript
import Dock from 'primevue/dock';
import { ref } from 'vue';

const items = ref([
    {
        label: 'Search',
        icon: '/images/dock/search.svg',
        command: () => {
            // Action for search
        }
    },
    {
        label: 'Cloud',
        icon: '/images/dock/cloud.svg',
        command: () => {
            // Action for cloud
        }
    },
    {
        label: 'Support',
        icon: '/images/dock/support.svg',
        command: () => {
            // Action for support
        }
    },
    {
        label: 'Terminal',
        icon: '/images/dock/terminal.svg',
        command: () => {
            // Action for terminal
        }
    }
]);
```

```html
<Dock :model="items" />
```

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

### Dock with Custom Template

Source: https://primeng.dev/dock

This example shows how to use a template to customize the appearance of individual items within the Dock. The 'item' slot provides access to the item data and its index.

```html
<Dock :model="items">
    <template #item="{item, index}">
        <a href="#" class="flex align-items-center justify-content-center p-ripple dock-item-box p-shadow-2 border-round hover:surface-300 transition-colors transition-duration-200 p-ripple"
            :class="item.class"
            @click="item.command(event)"
            v-ripple>
            <img :alt="item.label" :src="item.icon" style="width: 60%;" />
            <span class="dock-tooltip p-tooltip-top">{{ item.label }}</span>
        </a>
    </template>
</Dock>
```

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

### Toolbar with Icons Only

Source: https://primeng.dev/toolbar

A PrimeNG Toolbar example using only icons for actions. Ensure ToolbarModule is imported.

```typescript
import { Component } from '@angular/core';
import { ToolbarModule } from 'primeng/toolbar';

@Component({
    selector: 'app-toolbar-icons-demo',
    standalone: true,
    imports: [ToolbarModule],
    template: `<p-toolbar>
        <div class="p-toolbar-group-start">
            <p-button icon="pi pi-bars" styleClass="mr-2"></p-button>
        </div>
        <div class="p-toolbar-group-end">
            <p-button icon="pi pi-file-edit" styleClass="mr-2"></p-button>
            <p-button icon="pi pi-print" severity="secondary"></p-button>
        </div>
    </p-toolbar>`
})
export class ToolbarIconsDemoComponent {}
```

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

### Horizontal Timeline Example

Source: https://primeng.dev/timeline

Demonstrates how to change the Timeline orientation to horizontal using the 'layout' property.

```html
<div class="card">
    <p-timeline [value]="events" layout="horizontal">
        <ng-template pTemplate="content" let-event>
            <h5 class="mt-0 mb-1">{{event.year}}</h5>
            <span>{{event.data}}</span>
        </ng-template>
    </p-timeline>
</div>
```

```typescript
export class TimelineDemo {
    events: any[];

    ngOnInit() {
        this.events = [
            {year: 2020, data: 'Updates', icon: 'pi pi-check'},
            {year: 2021, data: 'Our গর্ব', icon: 'pi pi-cog'},
            {year: 2022, data: 'New Features', icon: 'pi pi-user'},
            {year: 2023, data: 'New Releases', icon: 'pi pi-server'}
        ];
    }
}
```

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

### Listbox Basic Usage

Source: https://primeng.dev/listbox

Demonstrates the basic setup for a Listbox component, allowing single or multiple selections from a list of options.

```html
<div class="card flex justify-content-center">
    <p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" listStyleClass="h-12rem"></p-listbox>
</div>
```

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

@Component({
    selector: 'listbox-basic-demo',
    templateUrl: './listbox-basic-demo.html',
    standalone: true,
    imports: [CommonModule, ListboxModule, FormsModule]
})
export class ListboxBasicDemo {
    cities: City[] | undefined;

    selectedCity: City | undefined;

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

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

### Basic Timeline Example

Source: https://primeng.dev/timeline

Demonstrates the fundamental usage of the Timeline component with a collection of events and a content template for event representation.

```html
<div class="card">
    <p-timeline [value]="events">
        <ng-template pTemplate="content" let-event>
            <div class="flex flex-column md:flex-row justify-content-between mb-5">
                <div>
                    <h4 class="mt-0 mb-1">{{event.status}}</h4>
                    <span class="font-medium text-gray-500">{{event.date}}</span>
                </div>
                <div class="mb-2">
                    <i class="pi pi-{{event.icon}}" style="font-size: 2rem"></i>
                </div>
            </div>
        </ng-template>
    </p-timeline>
</div>
```

```typescript
export class TimelineDemo {
    events: any[];

    ngOnInit() {
        this.events = [
            {status: 'Ordered', date: '15/10/2020', icon: 'check-square', color: '#9C8BCD', image: 'resource/images/logo.png'},
            {status: 'Processing', date: '10/10/2020', icon: 'arrow-right', color: '#67C7FF'},
            {status: 'Shipped', date: '15/10/2020', icon: 'money-bill-transfer', color: '#9BDD7C'},
            {status: 'Delivered', date: '25/10/2020', icon: 'check', color: '#F9A8A8'}
        ];
    }
}
```

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

### Basic Splitter

Source: https://primeng.dev/splitter

A fundamental example of the Splitter component dividing a layout into two resizable panels.

```html
<div class="card">
    <div class="flex">
        <p-splitter [panelSizes]="[50,50]" styleClass="flex-initial">
            <p-splitterpanel header="Panel 1" [size]="50" [minSize]="20">
                <ng-template pTemplate="content">
                    <div class="flex align-items-center justify-content-center h-full font-bold">Panel 1</div>
                </ng-template>
            </p-splitterpanel>
            <p-splitterpanel header="Panel 2" [size]="50" [minSize]="20">
                <ng-template pTemplate="content">
                    <div class="flex align-items-center justify-content-center h-full font-bold">Panel 2</div>
                </ng-template>
            </p-splitterpanel>
        </p-splitter>
    </div>
</div>
```

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

### Controlled Fieldset Example

Source: https://primeng.dev/fieldset

The collapsed property with two-way binding controls the open state programmatically.

```html
<p-fieldset legend="Invoice #1024" [collapsed]="collapsed" (onCollapse)="onCollapse()" (onExpand)="onExpand()" (onToggle)="onToggle()" (click)="collapsed = !collapsed">
    <p>Design Service$120.00</p>
    <p>Hosting$30.00</p>
    <p>Total$150.00</p>
</p-fieldset>

<p-button label="OpenClose" (click)="collapsed = !collapsed"></p-button>
```

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

### Basic Organization Chart Setup

Source: https://primeng.dev/organizationchart

Defines the basic structure and data for an Organization Chart component. Requires importing the OrganizationChartModule.

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

@Component({
    selector: 'organizationchart-basicdemo',
    templateUrl: './organizationchart-basicdemo.html'
})
export class OrganizationChartBasicDemo {

    data: any;

    constructor() {
        this.data = [
            {
                label: 'Root',
                expanded: true,
                children: [
                    {
                        label: 'Node 1',
                        children: [
                            {
                                label: 'Node 1.1'
                            },
                            {
                                label: 'Node 1.2'
                            }
                        ]
                    },
                    {
                        label: 'Node 2'
                    }
                ]
            }
        ];
    }
}
```

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

### Basic Carousel Setup - PrimeNG

Source: https://primeng.dev/carousel

Demonstrates the basic composition of a PrimeNG Carousel using native scroll-snap. Requires root, content, items, navigation, and indicator sub-components.

```html
<div class="carousel-basic-demo">
    <p-carousel [numVisible]="3" [numScroll]="3" [responsiveOptions]="responsiveOptions">
        <ng-template pTemplate="item" let-carItem>
            <div class="product-item">
                <div class="product-item-content">
                    <div class="p-mb-3">
                        <img [src]="'https://primefaces.org/primeng/images/demo/product/' + carItem.image" [alt]="carItem.name" class="product-image" />
                    </div>
                    <div>
                        <h4 class="p-mb-1">{{carItem.name}}</h4>
                        <h6 class="p-mt-0 p-mb-3">€{{carItem.price}}</h6>
                        <span [class]="'product-badge status-' + carItem.inventoryStatus.toLowerCase()">{{carItem.inventoryStatus}}</span>
                        <div class="car-buttons p-mt-3">
                            <p-button type="button" styleClass="p-button-secondary p-mr-2" icon="pi pi-external-link"></p-button>
                            <p-button type="button" icon="pi pi-shopping-cart"></p-button>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-carousel>
</div>
```

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

### Basic Divider Example

Source: https://primeng.dev/divider

A simple horizontal divider placed between content elements to create separation.

```html
<p>Subtotal$89.00</p>
<p>Shipping$5.99</p>
<p>Total$94.99</p>

<p-divider></p-divider>
```

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

### Drawer with Custom Templates

Source: https://primeng.dev/drawer

Illustrates how to customize the header, content, and footer of the drawer using templates.

```html
<p-drawer [(visible)]="visible" [modal]="true" [styleClass]="'w-25rem'">
    <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between">
            <div class="font-bold">Custom Header</div>
            <p-button icon="pi pi-times" (click)="visible = false" styleClass="p-button-text"></p-button>
        </div>
    </ng-template>
    <ng-template pTemplate="content">
        <div class="p-3">
            <p>This is custom content for the drawer.</p>
            <p-inputtext placeholder="Enter something..."></p-inputtext>
        </div>
    </ng-template>
    <ng-template pTemplate="footer">
        <div class="flex justify-content-end">
            <p-button label="Close" (click)="visible = false" styleClass="p-button-secondary"></p-button>
            <p-button label="Submit" (click)="visible = false"></p-button>
        </div>
    </ng-template>
</p-drawer>

<p-button label="Show Custom Template Drawer" (click)="visible = true"></p-button>
```

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

### InputTags with Custom Placeholder

Source: https://primeng.dev/inputtags

Configure a custom placeholder for the InputTags component to guide user input.

```html
<p-inputTags placeholder="Enter tags"></p-inputTags>
```

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

### Basic Menubar Setup

Source: https://primeng.dev/menubar

This snippet shows the basic structure for creating a PrimeNG Menubar component in an Angular application. It requires importing the MenubarModule.

```typescript
import { Component } from '@angular/core';
import { MenubarModule } from 'primeng/menubar';

@Component({
    selector: 'app-menubar-basic',
    standalone: true,
    imports: [MenubarModule],
    template: `<p-menubar [model]="items"></p-menubar>`
})
export class MenubarBasicDemo {
    items: MenuItem[] = [
        { label: 'New', icon: 'pi pi-plus' },
        { label: 'Open', icon: 'pi pi-folder-open' },
        { label: 'Save', icon: 'pi pi-save' }
    ];
}
```