### Basic Angular Toolbar Example

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic usage of the Angular Toolbar component, including placing content in start, center, and end templates. Requires importing necessary PrimeNG modules.

```typescript
import { Component, OnInit } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { SplitButtonModule } from 'primeng/splitbutton';
import { ToolbarModule } from 'primeng/toolbar';
import { InputTextModule } from 'primeng/inputtext';
import { MenuItem } from 'primeng/api';

@Component({
    template: `
        <div class="card">
            <p-toolbar>
                <ng-template #start>
                    <p-button icon="pi pi-plus" class="mr-2" text severity="secondary" />
                    <p-button icon="pi pi-print" class="mr-2" text severity="secondary" />
                    <p-button icon="pi pi-upload" text severity="secondary" />
                </ng-template>
                <ng-template #center>
                    <p-iconfield iconPosition="left">
                        <p-inputicon class="pi pi-search" />
                        <input type="text" pInputText placeholder="Search" />
                    </p-iconfield>
                </ng-template>
                <ng-template #end>
                    <p-splitbutton label="Save" [model]="items" />
                </ng-template>
            </p-toolbar>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, IconFieldModule, InputIconModule, SplitButtonModule, ToolbarModule, InputTextModule]
})
export class ToolbarBasicDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            {
                label: 'Update',
                icon: 'pi pi-refresh'
            },
            {
                label: 'Delete',
                icon: 'pi pi-times'
            }
        ];
    }
}
```

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

### Basic PrimeNG Menu Setup

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of the PrimeNG Menu component by defining a collection of menu items. Ensure MenuModule is imported.

```typescript
import { Component, OnInit } from '@angular/core';
import { MenuModule } from 'primeng/menu';
import { MenuItem } from 'primeng/api';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-menu [model]="items" />
        </div>
    `,
    standalone: true,
    imports: [MenuModule]
})
export class MenuBasicDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            { label: 'New', icon: 'pi pi-plus' },
            { label: 'Search', icon: 'pi pi-search' }
        ];
    }
}
```

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

### PrimeNG InputGroup with Buttons Example

Source: https://primeng.org/llms/llms-full.txt

Shows how to place buttons at the start, end, or both sides of an input field within a PrimeNG InputGroup. Includes examples for search, voting, and menu triggers.

```typescript
import { Component, OnInit } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { InputGroupModule } from 'primeng/inputgroup';
import { MenuModule } from 'primeng/menu';
import { InputTextModule } from 'primeng/inputtext';
import { MenuItem } from 'primeng/api';

@Component({
    template: `
        <div class="card flex flex-col md:flex-row gap-4">
            <p-inputgroup>
                <p-button label="Search" />
                <input pInputText placeholder="Keyword" />
            </p-inputgroup>
            <p-inputgroup>
                <input pInputText placeholder="Keyword" />
                <p-inputgroup-addon>
                    <p-button icon="pi pi-search" severity="secondary" variant="text" (click)="menu.toggle($event)" />
                </p-inputgroup-addon>
            </p-inputgroup>
            <p-menu #menu [model]="items" popup styleClass="!min-w-fit" />
            <p-inputgroup>
                <p-inputgroup-addon>
                    <p-button icon="pi pi-check" severity="secondary" />
                </p-inputgroup-addon>
                <input pInputText placeholder="Vote" />
                <p-inputgroup-addon>
                    <p-button icon="pi pi-times" severity="secondary" />
                </p-inputgroup-addon>
            </p-inputgroup>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, InputGroupModule, MenuModule, InputTextModule]
})
export class InputgroupButtonDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }];
    }
}
```

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

### Basic Organization Chart Setup

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of an Organization Chart component by providing a collection of TreeNode instances to its 'value' property. Ensure TreeNode is imported from 'primeng/api'.

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

@Component({
    template: `
        <div class="card flex justify-center overflow-x-auto">
            <p-organization-chart [value]="data" />
        </div>
    `,
    standalone: true,
    imports: []
})
export class OrganizationchartBasicDemo {
    data: TreeNode[];
}
```

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

### Basic Breadcrumb Setup

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of the PrimeNG Breadcrumb component. Import BreadcrumbModule and define menu items and a home configuration.

```typescript
import { Component, OnInit } from '@angular/core';
import { BreadcrumbModule } from 'primeng/breadcrumb';
import { MenuItem } from 'primeng/api';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-breadcrumb [model]="items" [home]="home" />
        </div>
    `,
    standalone: true,
    imports: [BreadcrumbModule]
})
export class BreadcrumbBasicDemo implements OnInit {
    items: MenuItem[] | undefined;
    home: MenuItem | undefined;

    ngOnInit() {
        this.items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }];
        this.home = { icon: 'pi pi-home' };
    }
}
```

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

### Row Expansion Table Example

Source: https://primeng.org/llms/llms-full.txt

Demonstrates a PrimeNG table with row expansion enabled. Includes setup for data keys, expanded row templates, and toggler buttons. Requires Product and Customer domain models and ProductService.

```typescript
import { Component, OnInit, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { RatingModule } from 'primeng/rating';
import { TableModule } from 'primeng/table';
import { TagModule } from 'primeng/tag';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ProductService } from '@/service/productservice';
import { MessageService } from 'primeng/api';
import { Product } from '@/domain/product';
import { Customer } from '@/domain/customer';

@Component({
    template: `
        <div class="card">
            <p-toast />
            <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '60rem' }" [expandedRowKeys]="expandedRows" (onRowExpand)="onRowExpand($event)" (onRowCollapse)="onRowCollapse($event)">
                <ng-template #caption>
                    <div class="flex flex-wrap justify-end gap-2">
                        <p-button label="Expand All" icon="pi pi-plus" text (onClick)="expandAll()" />
                        <p-button label="Collapse All" icon="pi pi-minus" text (onClick)="collapseAll()" />
                    </div>
                </ng-template>
                <ng-template #header>
                    <tr>
                        <th style="width: 5rem"></th>
                        <th>Name</th>
                        <th>Image</th>
                        <th>Price</th>
                        <th>Category</th>
                        <th>Reviews</th>
                        <th>Status</th>
                    </tr>
                </ng-template>
                <ng-template #body let-product let-expanded="expanded">
                    <tr>
                        <td>
                            <p-button type="button" pRipple [pRowToggler]="product" [text]="true" severity="secondary" [rounded]="true" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'" />
                        </td>
                        <td>{{ product.name }}</td>
                        <td>
                            <img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-lg" />
                        </td>
                        <td>{{ product.price | currency: 'USD' }}</td>
                        <td>{{ product.category }}</td>
                        <td>
                            <p-rating [(ngModel)]="product.rating" [readonly]="true" [cancel]="false" />
                        </td>
                        <td>
                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
                        </td>
                    </tr>
                </ng-template>
                <ng-template #expandedrow let-product>
                    <tr>
                        <td colspan="7">
                            <div class="p-4">
                                <h5>Orders for {{ product.name }}</h5>
                                <p-table [value]="product.orders" dataKey="id">
                                    <ng-template #header>
                                        <tr>
                                            <th pSortableColumn="id">
                                                <div class="flex items-center gap-2">
                                                    Id
                                                    <p-sortIcon field="price" />
                                                </div>
                                            </th>
```

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

### Chart Component Methods

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the structure of a component that might utilize chart methods like refresh, reinit, and generateLegend. This example shows the basic Angular component setup.

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

@Component({
    template: `
        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>refresh</td>
                        <td>-</td>
                        <td>Redraws the graph with new data.</td>
                    </tr>
                    <tr>
                        <td>reinit</td>
                        <td>-</td>
                        <td>Destroys the graph first and then creates it again.</td>
                    </tr>
                    <tr>
                        <td>generateLegend</td>
                        <td>-</td>
                        <td>Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    `,
    standalone: true,
    imports: []
})
export class ChartMethodsDemo {}
```

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

### Basic Dialog Implementation

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup for a PrimeNG Dialog component. Ensure ButtonModule and DialogModule are imported.

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

@Component({
    template: `
        <div class="card flex justify-center">
            <p-button (click)="showDialog()" label="Show" />
            <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '50rem' }" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }">
                <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-dialog>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, DialogModule]
})
export class DialogDemo {
    visible: boolean = false;

    showDialog() {
        this.visible = true;
    }
}

```

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

### Cascadeselect with Fluid Prop

Source: https://primeng.org/llms/llms-full.txt

Use the 'fluid' prop on the p-cascadeselect component to enable full-width behavior. This example shows a typical setup with data binding and options.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CascadeSelectModule } from 'primeng/cascadeselect';

@Component({
    template: `
        <div class="card">
            <p-cascadeselect [(ngModel)]="selectedCity" [options]="countries" optionLabel="cname" optionGroupLabel="name" [optionGroupChildren]="['states', 'cities']" placeholder="Select a City" fluid />
        </div>
    `,
    standalone: true,
    imports: [CascadeSelectModule, FormsModule]
})
export class CascadeselectFluidDemo implements OnInit {
    countries: any[] | undefined;
    selectedCity: 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' }
                        ]
                    }
                ]
            }
        ];
    }
}
```

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

### Example Prompts for PrimeNG MCP Server

Source: https://primeng.org/llms/llms-full.txt

Sample prompts to interact with an AI assistant using the PrimeNG MCP server. These demonstrate how to query component details, props, styling, and migration information.

```typescript
"Show me how to use the Table component with sorting and filtering"
```

```typescript
"What props does the Button component have?"
```

```typescript
"How do I customize the Dialog component styling with Pass Through?"
```

```typescript
"Compare the Select and Listbox components"
```

```typescript
"What's the best component for a date picker?"
```

```typescript
"How do I migrate from PrimeNG v20 to v21?"
```

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

### PrimeNG Table with Striped Rows

Source: https://primeng.org/llms/llms-full.txt

Use the `stripedRows` property on the `p-table` component to display alternating row colors. This example shows a basic setup with product data.

```typescript
import { Component, OnInit, inject } from '@angular/core';
import { TableModule } from 'primeng/table';
import { ProductService } from '@/service/productservice';
import { Product } from '@/domain/product';

@Component({
    template: `
        <div class="card">
            <p-table [value]="products" stripedRows [tableStyle]="{ 'min-width': '50rem' }">
                <ng-template #header>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Quantity</th>
                    </tr>
                </ng-template>
                <ng-template #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>
    `,
    standalone: true,
    imports: [TableModule],
    providers: [ProductService]
})
export class TableStripedDemo implements OnInit {
    private productService = inject(ProductService);
    products!: Product[];

    ngOnInit() {
        this.productService.getProductsMini().then((data) => {
            this.products = data;
        });
    }
}
```

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

### IftaLabel with CascadeSelect Example

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to use the IftaLabel component to wrap a PrimeNG CascadeSelect. This setup is useful for creating form elements with labels positioned at the top and aligned within the input field.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CascadeSelectModule } from 'primeng/cascadeselect';
import { IftaLabelModule } from 'primeng/iftalabel';

@Component({
    template: \
        <div class=\"card flex justify-center\">
            <p-iftalabel class=\"w-full md:w-56\">
                <p-cascadeselect [(ngModel)]=\"selectedCity\" inputId=\"cs_city\" [options]=\"countries\" optionLabel=\"cname\" optionGroupLabel=\"name\" [optionGroupChildren]=\"['states', 'cities']\" class=\"w-full\" />
                <label for=\"cs_city\">City</label>
            </p-iftalabel>
        </div>
    \",
    standalone: true,
    imports: [CascadeSelectModule, IftaLabelModule, FormsModule]
})
export class CascadeselectIftalabelDemo implements OnInit {
    countries: any[] | undefined;
    selectedCity: 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' }
                        ]
                    }
                ]
            }
        ];
    }
}
```

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

### Basic Inplace Component Usage

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of the Inplace component, requiring display and content templates. Ensure InplaceModule is imported.

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

@Component({
    template: `
        <div class="card">
            <p-inplace>
                <ng-template #display>
                    <span>View Content</span>
                </ng-template>
                <ng-template #content>
                    <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>
                </ng-template>
            </p-inplace>
        </div>
    `,
    standalone: true,
    imports: [InplaceModule]
})
export class InplaceBasicDemo {}
```

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

### Basic ConfirmPopup Implementation

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of ConfirmPopup using the p-confirmPopup tag and ConfirmationService. Requires importing ButtonModule, ConfirmPopupModule, ToastModule, and services like MessageService and ConfirmationService.

```typescript
import { Component, inject } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { ConfirmPopupModule } from 'primeng/confirmpopup';
import { ToastModule } from 'primeng/toast';
import { MessageService, ConfirmationService } from 'primeng/api';

@Component({
    template: `
        <div class="card flex justify-center gap-2">
            <p-toast />
            <p-confirmpopup />
            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, ConfirmPopupModule, ToastModule],
    providers: [ConfirmationService, MessageService]
})
export class ConfirmpopupBasicDemo {
    private confirmationService = inject(ConfirmationService);
    private messageService = inject(MessageService);

    confirm2(event: Event) {
        this.confirmationService.confirm({
            target: event.currentTarget as EventTarget,
            message: 'Do you want to delete this record?',
            icon: 'pi pi-info-circle',
            rejectButtonProps: {
                label: 'Cancel',
                severity: 'secondary',
                outlined: true
            },
            acceptButtonProps: {
                label: 'Delete',
                severity: 'danger'
            },
            accept: () => {
                this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
            },
            reject: () => {
                this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
            }
        });
    }
}
```

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

### Basic InputGroup Example

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to group input elements with add-ons such as icons, text, or buttons. Ensure to import InputGroupModule and other necessary modules like InputTextModule, InputNumberModule, and SelectModule.

```typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SelectModule } from 'primeng/select';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputNumberModule } from 'primeng/inputnumber';
import { InputTextModule } from 'primeng/inputtext';

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

@Component({
    template: `
        <div class="card grid grid-cols-1 md:grid-cols-2 gap-4">
            <p-inputgroup>
                <p-inputgroup-addon>
                    <i class="pi pi-user"></i>
                </p-inputgroup-addon>
                <input pInputText [(ngModel)]="text1" placeholder="Username" />
            </p-inputgroup>
            <p-inputgroup>
                <p-inputgroup-addon>$</p-inputgroup-addon>
                <p-inputnumber [(ngModel)]="number" placeholder="Price" />
                <p-inputgroup-addon>.00</p-inputgroup-addon>
            </p-inputgroup>
            <p-inputgroup>
                <p-inputgroup-addon>www</p-inputgroup-addon>
                <input pInputText [(ngModel)]="text2" placeholder="Website" />
            </p-inputgroup>
            <p-inputgroup>
                <p-inputgroup-addon>
                    <i class="pi pi-map"></i>
                </p-inputgroup-addon>
                <p-select [(ngModel)]="selectedCity" [options]="cities" optionLabel="name" placeholder="City" />
            </p-inputgroup>
        </div>
    `,
    standalone: true,
    imports: [SelectModule, InputGroupModule, InputNumberModule, InputTextModule, FormsModule]
})
export class InputgroupBasicDemo {
    text1: string | undefined;
    text2: string | undefined;
    number: string | undefined;
    selectedCity: City | undefined;
    cities: City[];
}
```

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

### Custom Content in PrimeNG MegaMenu

Source: https://primeng.org/llms/llms-full.txt

This example shows how to integrate custom SVG content as the starting element of a PrimeNG MegaMenu. Ensure necessary PrimeNG modules like MegaMenuModule, ButtonModule, AvatarModule, RippleModule, and common Angular OnInit are imported.

```typescript
import { Component, OnInit } from '@angular/core';
import { AvatarModule } from 'primeng/avatar';
import { ButtonModule } from 'primeng/button';
import { MegaMenuModule } from 'primeng/megamenu';
import { RippleModule } from 'primeng/ripple';
import { MegaMenuItem } from 'primeng/api';

@Component({
    template: \
        <div class=\"card\">
            <p-megamenu [model]=\"items\" [style]=\"{\'border-radius\': \'3rem\', display: \'flex\'}\" class=\"p-4 bg-surface-0 dark:bg-surface-900\">
                <ng-template #start>
                    <svg width=\"31\" height=\"33\" viewBox=\"0 0 31 33\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">
                        <path d=\"M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z\" fill=\"var(--p-primary-color)\" />
                        <mask id=\"mask0_1_52\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"31\" height=\"33\">
                            <path d=\"M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z\" fill=\"var(--ground-background)\" />
                        </mask>
                        <g mask=\"url(#mask0_1_52)\">
                            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z\" fill=\"var(--p-primary-color)\" />
                        </g>
                        <path d=\"M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z\" fill=\"var(--ground-background)\" />
                        <path d=\"M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z\" fill=\"var(--ground-background)\" />
                        <path
                            fill-rule=\"evenodd\"
                            clip-rule=\"evenodd\"
                            d=\"M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z\"
                            fill=\"var(--ground-background)\" 
                        />
                        <path d=\"M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z\" fill=\"var(--ground-background)\" />
                        <path d=\"M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z\" fill=\"var(--ground-background)\" />
                        <path
                            fill-rule=\"evenodd\"
                            clip-rule=\"evenodd\"
                            d=\"M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z\"
                            fill=\"var(--ground-background)\" 
                        />
                        <path d=\"M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z\" fill=\"var(--ground-background)\" />
                        <path d=\"M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z\" fill=\"var(--ground-background)\" />
                        <path d=\"M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z\" fill=\"var(--ground-background)\" />
                        <path d=\"M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z\" fill=\"var(--ground-background)\" />
                    </svg>
                </ng-template>
                <ng-template #item let-item>
                    <a *ngIf=\"item.root\" pRipple class=\"flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase\" style=\"border-radius: 2rem\">
                        <i [ngClass]=\"item.icon\"></i>
                        <span class=\"ml-2\">{{ item.label }}</span>
                    </a>
                    <a *ngIf=\"!item.root && !item.image\" class=\"flex items-center p-4 cursor-pointer mb-2 gap-2\">
                        <span class=\"inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12\">
                            <i [ngClass]=\"item.icon + ' text-lg'\"></i>
                        </span>
                        <span class=\"inline-flex flex-col gap-1\">
                            <span class=\"font-medium text-lg text-surface-900 dark:text-surface-0\">{{ item.label }}</span>
                            <span class=\"whitespace-nowrap\">{{ item.subtext }}</span>
                        </span>
                    </a>
                    <div *ngIf=\"item.image\" class=\"flex flex-col items-start gap-4\">
                        <img [src]=\"item.image\" alt=\"megamenu-demo\" class=\"w-full\" />

```

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

### Dialog with Long Content Example

Source: https://primeng.org/llms/llms-full.txt

This example demonstrates how the PrimeNG Dialog component automatically displays a scroller when its content exceeds the viewport height.

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

@Component({
    template: `
        <div class="card flex justify-center">
            <p-button (click)="showDialog()" label="Show" />
            <p-dialog header="Header" [modal]="true" [(visible)]="visible" [style]="{ width: '50rem' }" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }">
                <p class="mb-8">
                    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 class="mb-8">
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
                    commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>
                <p class="mb-8">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
                    placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
                    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                </p>
                <p class="mb-8">
                    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 class="mb-8">
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea

```

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

### Basic Overlay Usage

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to display a basic overlay component triggered by a button click. Requires ButtonModule.

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

@Component({
    template: `
        <div class="card flex justify-center">
            <p-button (click)="toggle()" label="Show Overlay"></p-button>
            <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-6 bg-surface-0 dark:bg-surface-900 shadow rounded-border"> Content </p-overlay>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule]
})
export class OverlayBasicDemo {
    overlayVisible: boolean = false;

    toggle() {
        this.overlayVisible = !this.overlayVisible;
    }
}
```

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

### Basic SplitButton Configuration

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to configure a basic SplitButton with a default action and a list of menu items. Imports required modules and services for functionality.

```typescript
import { Component, inject } from '@angular/core';
import { SplitButtonModule } from 'primeng/splitbutton';
import { ToastModule } from 'primeng/toast';
import { MenuItem, MessageService } from 'primeng/api';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-toast />
            <p-splitbutton label="Save" (onClick)="save()" [model]="items" />
        </div>
    `,
    standalone: true,
    imports: [SplitButtonModule, ToastModule],
    providers: [MessageService]
})
export class SplitbuttonBasicDemo {
    private messageService = inject(MessageService);

    constructor() {
        this.items = [
                    {
                        label: 'Update',
                        command: () => {
                            this.update();
                        }
                    },
                    {
                        label: 'Delete',
                        command: () => {
                            this.delete();
                        }
                    },
                    { label: 'Angular.dev', url: 'https://angular.dev' },
                    { separator: true },
                    { label: 'Upload', routerLink: ['/fileupload'] }
                ];
    }

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

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

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

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

### Basic MeterGroup Configuration in Angular

Source: https://primeng.org/llms/llms-full.txt

Demonstrates the basic setup of the MeterGroup component in Angular. Requires MeterGroupModule import and a value array with label, value, and color properties.

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

@Component({
    template: `
        <div class="card">
            <p-metergroup [value]="value" />
        </div>
    `,
    standalone: true,
    imports: [MeterGroupModule]
})
export class MetergroupBasicDemo {
    value: any[] = [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }];
}
```

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

### Primeng Tree Filtering Example

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to enable and configure filtering for the Primeng Tree component. Includes examples for both default lenient filtering and strict filtering mode.

```typescript
import { Component, OnInit, inject, signal } from '@angular/core';
import { TreeModule } from 'primeng/tree';
import { NodeService } from '@/service/nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    template: `
        <div class="card flex flex-wrap gap-4">
            <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
                <p-tree [value]="files()" [filter]="true" filterPlaceholder="Lenient Filter" />
            </div>
            <div class="flex-auto md:flex md:justify-start md:items-center flex-col">
                <p-tree [value]="files2()" [filter]="true" filterMode="strict" filterPlaceholder="Strict Filter" />
            </div>
        </div>
    `,
    standalone: true,
    imports: [TreeModule],
    providers: [NodeService]
})
export class TreeFilterDemo implements OnInit {
    private nodeService = inject(NodeService);
    files = signal<TreeNode[]>(undefined);
    files2 = signal<TreeNode[]>(undefined);

    ngOnInit() {
        this.nodeService.getFiles().then((data) => {
            this.files.set(data);
            this.files2.set(data);
        });
    }
}
```

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

### KeyFilter Regex Example

Source: https://primeng.org/llms/llms-full.txt

Shows how to use custom regular expressions with the KeyFilter directive for more specific input control. This example demonstrates blocking spaces and specific characters.

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

@Component({
    template: `
        <div class="card flex flex-wrap gap-4">
            <div class="flex-auto">
                <label for="blockspace" class="font-bold block mb-2"> Block Space </label>
                <input pInputText id="blockspace" [pKeyFilter]="blockSpace" class="w-full" />
            </div>
            <div class="flex-auto">
                <label for="block" class="font-bold block mb-2"> Block < > * ! </label>
                <input pInputText id="block" [pKeyFilter]="blockChars" class="w-full" />
            </div>
        </div>
    `,
    standalone: true,
    imports: [InputTextModule]
})
export class KeyfilterRegexDemo {
    blockSpace: RegExp = /^[^\s]+$/;
    blockChars: RegExp = /^[^<>*!]+$/;
}
```

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

### Combine Multiple Add-ons in InputGroup

Source: https://primeng.org/llms/llms-full.txt

Demonstrates how to use multiple add-ons within a single InputGroup for complex input scenarios. This example includes text and currency add-ons.

```typescript
import { Component } from '@angular/core';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputTextModule } from 'primeng/inputtext';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-inputgroup class="w-full md:!w-[30rem]">
                <p-inputgroup-addon>
                    <i class="pi pi-clock"></i>
                </p-inputgroup-addon>
                <p-inputgroup-addon>
                    <i class="pi pi-star-fill"></i>
                </p-inputgroup-addon>
                <input type="text" pInputText placeholder="Price" />
                <p-inputgroup-addon>$</p-inputgroup-addon>
                <p-inputgroup-addon>.00</p-inputgroup-addon>
            </p-inputgroup>
        </div>
    `,
    standalone: true,
    imports: [InputGroupModule, InputTextModule]
})
export class InputgroupMultipleDemo {}
```