### Project Setup and Development Commands

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Provides basic commands for setting up and running the PrimeNG examples project. It includes instructions to navigate to the desired project variant and implies further steps for dependency installation and server start.

```bash
# Navigate to desired variant
cd primeng-quickstart

```

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

### Start Development Server with Angular CLI

Source: https://github.com/primefaces/primeng-examples/blob/main/primeng-quickstart-tailwind/README.md

Starts a local development server for the Angular project. Changes to source files will trigger automatic reloads. Access the application at http://localhost:4200/.

```bash
ng serve
```

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

### Bootstrap Angular App with PrimeNG Configuration

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Configures an Angular application with PrimeNG, including theme setup and zoneless change detection. This snippet shows the main application bootstrap process and the configuration file for setting up routing and PrimeNG theming.

```typescript
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

// app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
    providePrimeNG({
      theme: {
        preset: Aura,
        options: { darkModeSelector: '.p-dark' },
      },
    })
  ],
};

```

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

### Configure Tailwind CSS with PrimeNG Compatibility

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Integrates Tailwind CSS with PrimeNG for UI styling, specifically for the 'tailwind' variant. This involves adding necessary dependencies to `package.json` and configuring PostCSS via `.postcssrc.json` to enable Tailwind processing.

```json
// package.json additions
{
  "dependencies": {
    "@tailwindcss/postcss": "^4.1.4",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.4",
    "tailwindcss-primeui": "^0.6.1"
  }
}

// .postcssrc.json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

```

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

### Recent Activity Widget - Angular

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Displays a list of recent activities, each with a colored icon and timestamp. Utilizes Angular's common directives and Primeng's ButtonModule for interactive elements. The UI is driven by a predefined array of activity objects.

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

@Component({
  selector: 'recent-activity-widget',
  standalone: true,
  imports: [CommonModule, ButtonModule],
  template: `
    <span class="chart-title">Recent Activity</span>
    <div class="activity-list">
      <div *ngFor="let activity of activities" class="activity-item">
        <i [ngClass]="['activity-icon', activity.color, 'pi', activity.icon]"></i>
        <div class="activity-content">
          <span class="activity-text">{{ activity.text }}</span>
          <span class="activity-time">{{ activity.time }}</span>
        </div>
      </div>
    </div>
  `,
  host: { class: 'layout-card col-item-2' },
})
export class RecentActivityWidget {
  activities = [
    { icon: 'pi-shopping-cart', text: 'New order #1123', time: '2 minutes ago', color: 'pink' },
    { icon: 'pi-user-plus', text: 'New customer registered', time: '15 minutes ago', color: 'green' },
    { icon: 'pi-check-circle', text: 'Payment processed', time: '25 minutes ago', color: 'blue' },
    { icon: 'pi-inbox', text: 'Inventory updated', time: '40 minutes ago', color: 'yellow' },
  ];
}
```

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

### Create Statistics Widget Component with PrimeNG

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Develops a reusable statistics widget component for dashboards using PrimeNG UI elements and Angular's standalone component architecture. It displays key metrics with icons and allows for easy customization of displayed statistics.

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

@Component({
  selector: 'stats-widget',
  standalone: true,
  imports: [CommonModule, ButtonModule],
  template: `
    <div *ngFor="let stat of stats" class="layout-card">
      <div class="stats-header">
        <span class="stats-title">{{ stat.title }}</span>
        <span class="stats-icon-box">
          <i [ngClass]="['pi', stat.icon]"></i>
        </span>
      </div>
      <div class="stats-content">
        <div class="stats-value">{{ stat.value }}</div>
        <div class="stats-subtitle">{{ stat.subtitle }}</div>
      </div>
    </div>
  `,
  host: { class: 'stats' },
})
export class StatsWidget {
  stats = [
    { title: 'Total Orders', icon: 'pi-shopping-cart', value: '1,234', subtitle: 'Last 7 days' },
    { title: 'Active Users', icon: 'pi-users', value: '2,573', subtitle: 'Last 7 days' },
    { title: 'Revenue', icon: 'pi-dollar', value: '$45,200', subtitle: 'Last 7 days' },
    { title: 'Success Rate', icon: 'pi-chart-line', value: '95%', subtitle: 'Last 7 days' },
  ];
}

```

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

### Compose Root Application Component in Angular

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Defines the root application component for a dashboard layout, importing and arranging various widget components like Topbar, Stats, Sales Trend, Recent Activity, Product Overview, and Footer. It utilizes Angular's component composition.

```typescript
import { Component } from '@angular/core';
import { AppTopbar } from './components/app.topbar';
import { StatsWidget } from './components/dashboard/statswidget';
import { SalesTrendWidget } from './components/dashboard/salestrendwidget';
import { RecentActivityWidget } from './components/dashboard/recentactivitywidget';
import { ProductOverviewWidget } from './components/dashboard/productoverviewwidget';
import { AppFooter } from './components/app.footer';

@Component({
  selector: 'app-root',
  imports: [
    AppTopbar,
    StatsWidget,
    SalesTrendWidget,
    RecentActivityWidget,
    ProductOverviewWidget,
    AppFooter
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {}
```

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

### Create Searchable Product Table in Angular

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Implements a searchable and sortable product table using PrimeNG's Table and Tag components in Angular. It includes features like loading states, status badges, and a search input. Dependencies include Angular core modules and PrimeNG components.

```typescript
import { Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';
import { TagModule } from 'primeng/tag';
import { InputTextModule } from 'primeng/inputtext';
import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
import { LayoutService } from '../../service/layout.service';

interface Product {
  name: string;
  category: string;
  price: number;
  status: 'In Stock' | 'Low Stock' | 'Out of Stock';
}

@Component({
  selector: 'product-overview-widget',
  standalone: true,
  imports: [FormsModule, TableModule, TagModule, InputTextModule, IconFieldModule, InputIconModule],
  template: `
    <div class="products-header">
      <span class="products-title">Products Overview</span>
      <p-iconfield class="search-field">
        <p-inputicon class="pi pi-search" />
        <input pInputText [(ngModel)]="searchQuery"
               placeholder="Search products..."
               (ngModelChange)="searchProducts()" />
      </p-iconfield>
    </div>
    <div class="products-table-container">
      <p-table [value]="filteredProducts"
               selectionMode="single"
               [(selection)]="selectedProduct"
               [loading]="loading"
               [rows]="5"
               [ngClass]="{ 'p-dark': isDarkMode() }">
        <ng-template #header>
          <tr>
            <th pSortableColumn="name">Name <p-sortIcon field="name" /></th>
            <th pSortableColumn="category">Category <p-sortIcon field="category" /></th>
            <th pSortableColumn="price">Price <p-sortIcon field="price" /></th>
            <th pSortableColumn="status">Status <p-sortIcon field="status" /></th>
          </tr>
        </ng-template>
        <ng-template #body let-product>
          <tr>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.price }}</td>
            <td>
              <p-tag [severity]="product.status === 'In Stock' ? 'success' :
                                 product.status === 'Low Stock' ? 'warn' : 'danger'">
                {{ product.status }}
              </p-tag>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  `,
  host: { class: 'layout-card' },
})
export class ProductOverviewWidget {
  layoutService = inject(LayoutService);
  isDarkMode = computed(() => this.layoutService.appState().darkMode);

  selectedProduct!: Product;
  searchQuery = '';
  loading = false;
  filteredProducts: Product[] = [];

  products: Product[] = [
    { name: 'Laptop Pro', category: 'Electronics', price: 2499, status: 'In Stock' },
    { name: 'Wireless Mouse', category: 'Accessories', price: 49, status: 'Low Stock' },
    { name: 'Monitor 4K', category: 'Electronics', price: 699, status: 'Out of Stock' },
    { name: 'Keyboard', category: 'Accessories', price: 149, status: 'In Stock' },
  ];

  ngOnInit() {
    this.filteredProducts = [...this.products];
  }

  searchProducts = () => {
    this.loading = true;
    this.filteredProducts = this.products.filter(product =>
      product.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      product.category.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      product.status.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
    setTimeout(() => this.loading = false, 300);
  };
}

```

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

### Manage Layout Theme and Dark Mode with Angular Signals

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Implements a layout service to manage application theme state, including dark mode toggling with smooth transitions using Angular signals. It also demonstrates how to use this service within a component to update the theme state.

```typescript
import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LayoutService {
  appState = signal<AppState>({
    preset: 'Aura',
    primary: 'emerald',
    surface: null,
    darkMode: false,
  });

  toggleDarkMode(appState?: AppState): void {
    const _appState = appState || this.appState();
    if (_appState.darkMode) {
      document.documentElement.classList.add('p-dark');
    } else {
      document.documentElement.classList.remove('p-dark');
    }
  }
}

// Usage in component
import { Component, computed, inject } from '@angular/core';
import { LayoutService } from '../service/layout.service';

@Component({
  selector: 'app-topbar',
  template: `
    <p-button (click)="toggleDarkMode()">
      <i class="pi" [ngClass]="{ 'pi-moon': isDarkMode(), 'pi-sun': !isDarkMode() }"></i>
    </p-button>
  `
})
export class AppTopbar {
  layoutService = inject(LayoutService);
  isDarkMode = computed(() => this.layoutService.appState().darkMode);

  toggleDarkMode() {
    this.layoutService.appState.update((state) => ({
      ...state,
      darkMode: !state.darkMode,
    }));
  }
}

```

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

### Sales Trend Chart Widget - Angular

Source: https://context7.com/primefaces/primeng-examples/llms.txt

Implements an interactive stacked bar chart using Chart.js and Primeng's ChartModule. It dynamically updates chart data based on application state changes and supports theming through CSS variables. Designed for responsive layouts.

```typescript
import { Component, inject } from '@angular/core';
import { ChartModule } from 'primeng/chart';
import { LayoutService } from '../../service/layout.service';
import { debounceTime, Subscription } from 'rxjs';

@Component({
  selector: 'sales-trend-widget',
  standalone: true,
  imports: [ChartModule],
  template: `
    <div class="chart-header">
      <span class="chart-title">Sales Trend</span>
    </div>
    <div class="chart-content">
      <p-chart type="bar" height="300px" [data]="chartData" [options]="chartOptions" />
    </div>
  `,
  host: { class: 'layout-card col-item-2' },
})
export class SalesTrendWidget {
  layoutService = inject(LayoutService);
  subscription!: Subscription;
  chartData: any;
  chartOptions: any;

  constructor() {
    this.subscription = this.layoutService.appStateUpdate$
      .pipe(debounceTime(25))
      .subscribe(() => this.initChart());
  }

  ngOnInit() {
    this.initChart();
  }

  initChart() {
    const documentStyle = getComputedStyle(document.documentElement);

    this.chartData = {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        {
          type: 'bar',
          label: 'Subscriptions',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
          data: [4000, 10000, 15000, 4000],
          barThickness: 32,
        },
        {
          type: 'bar',
          label: 'Advertising',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
          data: [2100, 8400, 2400, 7500],
          barThickness: 32,
        },
      ],
    };

    this.chartOptions = {
      maintainAspectRatio: false,
      responsive: true,
      plugins: { legend: { position: 'top' } },
      scales: {
        x: { stacked: true, grid: { color: 'transparent' } },
        y: { stacked: true, grid: { color: 'transparent' } },
      },
    };
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
```

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

### Build Project for Production with Angular CLI

Source: https://github.com/primefaces/primeng-examples/blob/main/primeng-quickstart-tailwind/README.md

Compiles and optimizes the Angular project for production deployment. The build artifacts are placed in the 'dist/' directory, ensuring the application is performant and fast.

```bash
ng build
```

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

### Run Unit Tests with Angular CLI

Source: https://github.com/primefaces/primeng-examples/blob/main/primeng-quickstart-tailwind/README.md

Executes unit tests for the project using the Karma test runner. This command is essential for verifying the functionality of individual code units.

```bash
ng test
```

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

### Generate New Component with Angular CLI

Source: https://github.com/primefaces/primeng-examples/blob/main/primeng-quickstart-tailwind/README.md

Uses the Angular CLI to generate a new component. This command scaffolds the necessary files for a component, such as .ts, .html, .css, and .spec.ts files. For other schematics, refer to 'ng generate --help'.

```bash
ng generate component component-name
```

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

### Run End-to-End Tests with Angular CLI

Source: https://github.com/primefaces/primeng-examples/blob/main/primeng-quickstart-tailwind/README.md

Initiates end-to-end (e2e) tests for the project. Note that Angular CLI does not include an e2e testing framework by default; you need to choose and configure one separately.

```bash
ng e2e
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.