0
# PrimeNG
1

2
A comprehensive Angular UI component library providing 80+ components for building modern web applications.
3

4
## Overview
5

6
PrimeNG is a feature-rich Angular UI library that offers a complete set of components for form controls, data display, navigation, layout, overlays, and utilities. Built with TypeScript and following Angular best practices, it supports both standalone components (Angular 14+) and traditional NgModule imports.
7

8
## Installation
9

10
```bash
11
npm install primeng
12
npm install primeicons  # Optional: for built-in icons
13
```
14

15
## Basic Setup
16

17
### Global Configuration
18

19
```typescript
20
import { bootstrapApplication } from '@angular/platform-browser';
21
import { providePrimeNG } from 'primeng/config';
22
import { AppComponent } from './app.component';
23

24
bootstrapApplication(AppComponent, {
25
  providers: [
26
    providePrimeNG({
27
      theme: {
28
        preset: 'Aura'
29
      }
30
    })
31
  ]
32
});
33
```
34

35
### Component Import (Standalone)
36

37
```typescript
38
import { Component } from '@angular/core';
39
import { Button } from 'primeng/button';
40
import { InputText } from 'primeng/inputtext';
41

42
@Component({
43
  selector: 'app-example',
44
  standalone: true,
45
  imports: [Button, InputText],
46
  template: `
47
    <input pInputText placeholder="Enter text" />
48
    <p-button label="Submit" />
49
  `
50
})
51
export class ExampleComponent {}
52
```
53

54
### Module Import (Traditional)
55

56
```typescript
57
import { NgModule } from '@angular/core';
58
import { ButtonModule } from 'primeng/button';
59
import { InputTextModule } from 'primeng/inputtext';
60

61
@NgModule({
62
  imports: [ButtonModule, InputTextModule],
63
  // ...
64
})
65
export class AppModule {}
66
```
67

68
## Core Services
69

70
PrimeNG provides several global services for cross-component functionality:
71

72
```typescript { .api }
73
// Core Services
74
class ConfirmationService {
75
  confirm(confirmation: Confirmation): void;
76
  close(): void;
77
}
78

79
class MessageService {
80
  add(message: Message): void;
81
  addAll(messages: Message[]): void;
82
  clear(key?: string): void;
83
}
84

85
class OverlayService {
86
  onShow: Subject<any>;
87
  onHide: Subject<any>;
88
}
89

90
class FilterService {
91
  filter(data: any[], fields: string[], filterValue: any, filterMatchMode: string): any[];
92
  filters: { [key: string]: (value: any, filter: any, filterLocale?: string) => boolean };
93
}
94
```
95

96
## Core Interfaces
97

98
```typescript { .api }
99
// Menu System
100
interface MenuItem {
101
  label?: string;
102
  icon?: string;
103
  command?: (event?: any) => void;
104
  url?: string;
105
  routerLink?: any;
106
  items?: MenuItem[];
107
  expanded?: boolean;
108
  disabled?: boolean;
109
  visible?: boolean;
110
  target?: string;
111
  separator?: boolean;
112
  badge?: string;
113
  badgeStyleClass?: string;
114
  style?: any;
115
  styleClass?: string;
116
  title?: string;
117
  id?: string;
118
}
119

120
// Selection System
121
interface SelectItem {
122
  label?: string;
123
  value: any;
124
  styleClass?: string;
125
  icon?: string;
126
  title?: string;
127
  disabled?: boolean;
128
}
129

130
interface SelectItemGroup {
131
  label: string;
132
  value?: any;
133
  items: SelectItem[];
134
}
135

136
// Tree Data
137
interface TreeNode {
138
  label?: string;
139
  data?: any;
140
  icon?: string;
141
  expandedIcon?: string;
142
  collapsedIcon?: string;
143
  children?: TreeNode[];
144
  leaf?: boolean;
145
  expanded?: boolean;
146
  type?: string;
147
  parent?: TreeNode;
148
  partialSelected?: boolean;
149
  styleClass?: string;
150
  draggable?: boolean;
151
  droppable?: boolean;
152
  selectable?: boolean;
153
  key?: string;
154
}
155

156
// Data Operations
157
interface LazyLoadEvent {
158
  first?: number;
159
  rows?: number;
160
  sortField?: string;
161
  sortOrder?: number;
162
  multiSortMeta?: SortMeta[];
163
  filters?: { [key: string]: FilterMetadata };
164
  globalFilter?: any;
165
  filterMatchModes?: { [key: string]: string };
166
}
167

168
interface SortMeta {
169
  field: string;
170
  order: number;
171
}
172

173
interface FilterMetadata {
174
  value?: any;
175
  matchMode?: string;
176
  operator?: string;
177
}
178
```
179

180
## Template System
181

182
PrimeNG uses a powerful template system for component customization:
183

184
```typescript { .api }
185
// Template Directives
186
@Directive({ selector: '[pTemplate]' })
187
class PrimeTemplate {
188
  name: string;
189
  type: string;
190
}
191

192
// Usage in components
193
@Component({
194
  template: `
195
    <p-table [value]="data">
196
      <ng-template pTemplate="header">
197
        <tr><th>Name</th><th>Age</th></tr>
198
      </ng-template>
199
      <ng-template pTemplate="body" let-item>
200
        <tr><td>{{item.name}}</td><td>{{item.age}}</td></tr>
201
      </ng-template>
202
    </p-table>
203
  `
204
})
205
```
206

207
## Component Categories
208

209
The PrimeNG library is organized into logical categories:
210

211
- [Form Controls](./form-controls.md) - Input components for data collection (21 components)
212
- [Data Display](./data-display.md) - Components for presenting data (11 components)  
213
- [Navigation](./navigation.md) - Menu and navigation components (12 components)
214
- [Layout](./layout.md) - Container and layout components (7 components)
215
- [Overlay](./overlay.md) - Modal and popup components (8 components)
216
- [Services](./services.md) - Global services and utilities
217

218
## Icons
219

220
PrimeNG includes 200+ built-in icons through PrimeIcons:
221

222
```typescript { .api }
223
// Icon Constants
224
const PrimeIcons = {
225
  ALIGN_CENTER: 'pi pi-align-center',
226
  ALIGN_JUSTIFY: 'pi pi-align-justify',
227
  ALIGN_LEFT: 'pi pi-align-left',
228
  ALIGN_RIGHT: 'pi pi-align-right',
229
  ARROW_DOWN: 'pi pi-arrow-down',
230
  ARROW_LEFT: 'pi pi-arrow-left',
231
  ARROW_RIGHT: 'pi pi-arrow-right',
232
  ARROW_UP: 'pi pi-arrow-up',
233
  CHECK: 'pi pi-check',
234
  TIMES: 'pi pi-times',
235
  PLUS: 'pi pi-plus',
236
  MINUS: 'pi pi-minus',
237
  SEARCH: 'pi pi-search',
238
  // ... 200+ more icons
239
};
240
```
241

242
Individual icon components are also available:
243

244
```typescript
245
import { CheckIcon } from 'primeng/icons/check';
246
import { TimesIcon } from 'primeng/icons/times';
247
import { SearchIcon } from 'primeng/icons/search';
248
```
249

250
## Configuration
251

252
```typescript { .api }
253
interface PrimeNGConfigType {
254
  ripple?: boolean;
255
  inputStyle?: 'outlined' | 'filled';
256
  theme?: {
257
    preset?: string;
258
    options?: any;
259
  };
260
  translation?: Translation;
261
  filterMatchModeOptions?: {
262
    text: FilterMatchMode[];
263
    numeric: FilterMatchMode[];
264
    date: FilterMatchMode[];
265
  };
266
  zIndex?: ZIndex;
267
}
268

269
interface ZIndex {
270
  modal?: number;
271
  overlay?: number;
272
  menu?: number;
273
  tooltip?: number;
274
}
275

276
interface Translation {
277
  accept?: string;
278
  reject?: string;
279
  choose?: string;
280
  upload?: string;
281
  cancel?: string;
282
  clear?: string;
283
  // ... more translation keys
284
}
285
```
286

287
## Theming
288

289
PrimeNG supports multiple theming approaches:
290

291
1. **CSS Variables** - Runtime theme switching
292
2. **SASS Variables** - Build-time customization
293
3. **Styled Mode** - Component-specific styling
294
4. **Unstyled Mode** - Bring your own styles
295

296
## Accessibility
297

298
All components include:
299
- ARIA attributes and roles
300
- Keyboard navigation support
301
- Screen reader compatibility
302
- High contrast theme support
303
- Focus management
304

305
## Browser Support
306

307
- Chrome 90+
308
- Firefox 88+
309
- Safari 14+
310
- Edge 90+
311

312
## License
313

314
MIT License - Free for commercial and personal use.