NGX PrimeNG Toolkit

A comprehensive TypeScript utility library for Angular component state management, including PrimeNG table helpers, ng-select integration, data storage, and HTTP caching utilities with NgRx Signals. Compatible with Angular 19+ and PrimeNG 19+ (optimized for Angular 20+ and PrimeNG 20+).

✨ Features

- 🏗️ Table State Management - PrimeNG table helpers with lazy loading, filtering, and sorting
- 🎛️ NgSelect Integration - Complete ng-select lifecycle with search & pagination
- 💾 Data Storage - Memoized HTTP caching and component data management
- 🎛️ Component State - Reactive state management for UI components
- 🛠️ Utility Functions - Helper functions and TypeScript utility types
- 📦 Tree-shakeable - Import only what you need
- 🔒 Type Safe - Full TypeScript support with strict type checking

🚀 Quick Start

$3

``bash
npm install ngx-primeng-toolkit
`

$3

`bash


Core dependencies (Angular 19+ supported, 20+ recommended)

npm install @angular/common@^19.0.0 @angular/core@^19.0.0 @ngrx/signals@^19.0.0 rxjs@^7.0.0

UI library dependencies (choose what you need)

npm install primeng@^19.0.0 # For PrimeNG table helpers
npm install @ng-select/ng-select@^15.0.0 # For ng-select helpers

Optional (for response validation)

npm install zod@^3.0.0
`

$3

`typescript
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PrimeNgDynamicTableStateHelper } from 'ngx-primeng-toolkit';

interface User {
id: number;
name: string;
email: string;
}

@Component({
selector: 'app-user-table',
template:
[value]="tableState.data()"
[lazy]="true"
[loading]="tableState.isLoading()"
[totalRecords]="tableState.totalRecords()"
[paginator]="true"
[rows]="10"
(onLazyLoad)="tableState.onLazyLoad($event)">



Name
Email





{{ user.name }}
{{ user.email }}




})
export class UserTableComponent {
private httpClient = inject(HttpClient);

readonly tableState = PrimeNgDynamicTableStateHelper.create({
url: '/api/users/query',
httpClient: this.httpClient
});
}
`

📚 Documentation

$3

- Table State Management - PrimeNG table helpers with lazy loading, filtering, and sorting
- Data Storage - Memoized HTTP caching and component data management
- Component State - Reactive state management for UI components
- NgSelect Integration - Complete ng-select lifecycle with search & pagination
- Utility Functions - Helper functions and TypeScript utility types

$3

- Complete Examples - Comprehensive examples and integration patterns
- API Integration - Expected request/response formats
- Best Practices - Performance tips and recommendations

🔗 Key Concepts

$3

`typescript
interface ApiResponse {
data: T[]; // Array of table row data
last_row: number; // Total number of records
}
`

$3

The library maps PrimeNG filter types to backend operations:
- contains → like
- equals → =
- startsWith → starts
- greaterThan → >
- And many more...

$3

Full generic typing for type-safe development:
`typescript
const tableState = PrimeNgDynamicTableStateHelper.create({
url: '/api/users',
httpClient: this.httpClient
});
// tableState.data() is typed as Signal
``

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.

Support

For issues and questions, please use the GitHub issues page.