Building modern, feature-rich user interfaces in Angular applications can be time-consuming and complex. Enter PrimeNG, a comprehensive open-source UI component library developed by PrimeTek Informatics that provides over 80 customizable, production-ready components for Angular applications. Whether you're building data tables, forms, charts, or complex dashboards, PrimeNG offers the tools you need to create professional, responsive, and accessible user interfaces.
What is PrimeNG?
PrimeNG is a rich set of Angular UI components that enables developers to build modern web applications with minimal effort. It's built on top of Angular and follows Angular best practices, making it a natural fit for any Angular project. The library includes everything from basic form controls to advanced data visualization components, all designed with consistency, accessibility, and performance in mind.
One of PrimeNG's greatest strengths is its extensive component library. You'll find components for data display (tables, trees, charts), form inputs (autocomplete, date pickers, file uploads), navigation (menus, breadcrumbs, tabs), overlays (dialogs, tooltips, popovers), and much more. Each component is highly customizable through properties, events, and theming, allowing you to match your application's design requirements perfectly.
PrimeNG emphasizes accessibility, ensuring that components work well with screen readers and follow WCAG guidelines. The library also provides excellent responsive design support, making it easy to create applications that work seamlessly across desktop, tablet, and mobile devices. With built-in theming capabilities and support for multiple themes (including Material, Bootstrap, and custom themes), PrimeNG gives you the flexibility to create the exact look and feel you need.
Key Features of PrimeNG
- 80+ Components: Comprehensive library covering all UI needs from basic inputs to complex data visualization
- Angular Integration: Built specifically for Angular with full TypeScript support
- Accessibility: WCAG compliant components with ARIA attributes and keyboard navigation
- Theming: Multiple built-in themes plus custom theme support
- Responsive Design: Mobile-first approach with responsive components
- TypeScript: Full TypeScript support with comprehensive type definitions
- Performance: Optimized components with lazy loading and virtual scrolling support
Getting Started with PrimeNG
Installing PrimeNG in your Angular project is straightforward. You'll need to install the core library and optionally include a theme. Here's how to get started:
Installation
# Install PrimeNG
npm install primeng
# Install PrimeIcons (optional but recommended)
npm install primeicons
# Install a theme (choose one)
npm install primeicons-themesBasic Setup
After installation, you need to import the PrimeNG styles and configure your Angular module. Here's a basic setup:
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
// Import PrimeNG modules you need
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule, // Required for PrimeNG animations
TableModule,
ButtonModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
In your styles.scss or
angular.json, add the
PrimeNG theme and PrimeIcons:
// styles.scss
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";PrimeNG Icons
PrimeIcons is PrimeNG's icon library, providing over 250 open-source icons that are designed to work seamlessly with PrimeNG components. These icons are font-based, making them lightweight, scalable, and easy to customize with CSS.
PrimeIcons use a simple class-based syntax that's easy to remember and implement. The icons are consistent in style and designed to complement PrimeNG components perfectly, though they can be used independently in any Angular application.
Installing PrimeIcons
PrimeIcons is installed separately from PrimeNG. After installation, you need to import the CSS file:
npm install primeicons
Then import the CSS in your styles.scss:
@import "primeicons/primeicons.css";Basic Usage
PrimeIcons use the pi pi-{icon-name} class
syntax. Simply add the classes to an <i> element:
<!-- Basic icon -->
<i class="pi pi-check"></i>
<!-- Icon with custom size and color -->
<i class="pi pi-user" style="font-size: 2rem; color: #007bff;"></i>
<!-- Icon in a button -->
<button class="btn">
<i class="pi pi-save"></i> Save
</button>Common PrimeIcons Examples
Here are some commonly used PrimeIcons with their class names:
<!-- Navigation icons -->
<i class="pi pi-home"></i> <!-- Home -->
<i class="pi pi-user"></i> <!-- User -->
<i class="pi pi-cog"></i> <!-- Settings -->
<i class="pi pi-search"></i> <!-- Search -->
<!-- Action icons -->
<i class="pi pi-check"></i> <!-- Check -->
<i class="pi pi-times"></i> <!-- Close -->
<i class="pi pi-trash"></i> <!-- Delete -->
<i class="pi pi-pencil"></i> <!-- Edit -->
<i class="pi pi-save"></i> <!-- Save -->
<!-- File and document icons -->
<i class="pi pi-file"></i> <!-- File -->
<i class="pi pi-folder"></i> <!-- Folder -->
<i class="pi pi-download"></i> <!-- Download -->
<i class="pi pi-upload"></i> <!-- Upload -->
<!-- Navigation arrows -->
<i class="pi pi-chevron-left"></i> <!-- Left arrow -->
<i class="pi pi-chevron-right"></i> <!-- Right arrow -->
<i class="pi pi-arrow-up"></i> <!-- Up arrow -->
<i class="pi pi-arrow-down"></i> <!-- Down arrow -->Using PrimeIcons with PrimeNG Components
PrimeIcons work seamlessly with PrimeNG components. Most PrimeNG components accept an icon property:
<!-- Button with icon -->
<p-button label="Save" icon="pi pi-check"></p-button>
<!-- Button with icon on the right -->
<p-button label="Download" icon="pi pi-download" iconPos="right"></p-button>
<!-- Icon-only button -->
<p-button icon="pi pi-trash" [rounded]="true" severity="danger"></p-button>
<!-- Menu with icons -->
<p-menu [model]="items"></p-menu>// component.ts
export class MyComponent {
items = [
{
label: 'Home',
icon: 'pi pi-home',
command: () => this.navigateHome()
},
{
label: 'Settings',
icon: 'pi pi-cog',
command: () => this.openSettings()
},
{
label: 'Logout',
icon: 'pi pi-sign-out',
command: () => this.logout()
}
];
}Customizing PrimeIcons
Since PrimeIcons are font-based, you can easily customize them with CSS:
// Custom icon styles
.my-icon {
font-size: 1.5rem;
color: #007bff;
margin-right: 0.5rem;
&:hover {
color: #0056b3;
transform: scale(1.1);
transition: all 0.2s;
}
}<i class="pi pi-star my-icon"></i>PrimeNG Table
The PrimeNG Table component is one of the most powerful and feature-rich components in the PrimeNG library. It provides a comprehensive solution for displaying data in tabular format with built-in support for sorting, filtering, pagination, row selection, editing, and much more.
The Table component uses Angular templates for maximum flexibility, allowing you to customize headers, body cells, and footers with your own HTML and Angular directives. This template-based approach gives you complete control over the table's appearance and behavior while still benefiting from PrimeNG's built-in features.
Basic Table Setup
To use the PrimeNG Table, first import the TableModule in your
Angular module:
import { TableModule } from 'primeng/table';
@NgModule({
imports: [TableModule]
})
export class AppModule { }Basic Table Example
Here's a simple table displaying product data:
<p-table [value]="products" [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>// component.ts
export class ProductTableComponent {
products = [
{ code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
{ code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 },
{ code: 'P003', name: 'Keyboard', category: 'Accessories', quantity: 15 },
{ code: 'P004', name: 'Monitor', category: 'Electronics', quantity: 8 }
];
}Dynamic Columns
You can define columns dynamically using Angular's *ngFor directive:
<p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template #header let-columns>
<tr>
@for (col of columns; track col) {
<th>
{{ col.header }}
</th>
}
</tr>
</ng-template>
<ng-template #body let-rowData let-columns="columns">
<tr>
@for (col of columns; track col) {
<td>
{{ rowData[col.field] }}
</td>
}
</tr>
</ng-template>
</p-table>// component.ts
export class DynamicTableComponent {
cols = [
{ field: 'code', header: 'Code' },
{ field: 'name', header: 'Name' },
{ field: 'category', header: 'Category' },
{ field: 'quantity', header: 'Quantity' }
];
products = [
{ code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
{ code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 }
];
}Table with Sorting
Adding sorting to your table is as simple as setting the sortable property on
columns:
<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template #header>
<tr>
<th pSortableColumn="code">
Code <p-sortIcon field="code"></p-sortIcon>
</th>
<th pSortableColumn="name">
Name <p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category <p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="quantity">
Quantity <p-sortIcon field="quantity"></p-sortIcon>
</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>
Don't forget to import SortIcon:
import { SortIcon } from 'primeng/sorticon';Table with Pagination
Add pagination to handle large datasets efficiently:
<p-table
[value]="products"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[5, 10, 20, 50]"
[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>Table with Filtering
Enable filtering to allow users to search through table data:
<p-table
[value]="products"
[globalFilterFields]="['name', 'category']"
[tableStyle]="{ 'min-width': '50rem' }">
<ng-template #header>
<tr>
<th>
<div class="flex justify-content-between align-items-center">
Code
<p-columnFilter type="text" field="code"></p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-between align-items-center">
Name
<p-columnFilter type="text" field="name"></p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-between align-items-center">
Category
<p-columnFilter type="text" field="category"></p-columnFilter>
</div>
</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>Table with Row Selection
Enable row selection with checkboxes or radio buttons:
<p-table
[value]="products"
[(selection)]="selectedProducts"
[tableStyle]="{ 'min-width': '50rem' }"
dataKey="code">
<ng-template #header>
<tr>
<th style="width: 3rem">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template #body let-product>
<tr>
<td>
<p-tableCheckbox [value]="product"></p-tableCheckbox>
</td>
<td>{{ product.code }}</td>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.quantity }}</td>
</tr>
</ng-template>
</p-table>// component.ts
export class SelectableTableComponent {
selectedProducts: any[] = [];
products = [
{ code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
{ code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 }
];
}Complete Table Example with Multiple Features
Here's a comprehensive example combining sorting, pagination, filtering, and custom templates:
<p-table
[value]="products"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[5, 10, 20]"
[globalFilterFields]="['name', 'category']"
[tableStyle]="{ 'min-width': '60rem' }">
<ng-template #caption>
<div class="flex items-center justify-between">
<span class="text-xl font-bold">Products</span>
<p-button icon="pi pi-refresh" [rounded]="true" [raised]="true"></p-button>
</div>
</ng-template>
<ng-template #header>
<tr>
<th pSortableColumn="name">
Name <p-sortIcon field="name"></p-sortIcon>
</th>
<th>Image</th>
<th pSortableColumn="price">
Price <p-sortIcon field="price"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category <p-sortIcon field="category"></p-sortIcon>
</th>
<th>Status</th>
</tr>
</ng-template>
<ng-template #body let-product>
<tr>
<td>{{ product.name }}</td>
<td>
<img
[src]="'https://example.com/images/' + product.image"
[alt]="product.name"
class="w-24 rounded" />
</td>
<td>{{ product.price | currency: 'USD' }}</td>
<td>{{ product.category }}</td>
<td>
<p-tag
[value]="product.inventoryStatus"
[severity]="getSeverity(product.inventoryStatus)">
</p-tag>
</td>
</tr>
</ng-template>
<ng-template #footer>
<tr>
<td colspan="5">
In total there are {{ products ? products.length : 0 }} products.
</td>
</tr>
</ng-template>
</p-table>Best Practices
1. Import Only What You Need
PrimeNG uses tree-shaking, so import only the modules you actually use to keep your bundle size small:
// ✅ Good: Import specific modules
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
// ❌ Avoid: Don't import everything
// import { PrimeNG } from 'primeng';2. Use Lazy Loading for Large Tables
For tables with large datasets, use lazy loading to improve performance:
<p-table
[value]="products"
[lazy]="true"
(onLazyLoad)="loadProducts($event)"
[totalRecords]="totalRecords">
</p-table>3. Optimize Icon Usage
PrimeIcons are font-based, so they're lightweight. However, if you only need a few icons, consider using SVG icons instead for even better performance.
4. Customize Themes
Create custom themes to match your brand. PrimeNG's theming system uses CSS variables, making it easy to customize:
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
// ... other theme variables
}Conclusion
PrimeNG is a powerful, comprehensive UI component library that can significantly accelerate your Angular development. With over 80 components, extensive theming options, and excellent accessibility support, it provides everything you need to build professional, production-ready applications.
The PrimeNG Icons library offers over 250 icons that integrate seamlessly with PrimeNG components and can be easily customized with CSS. The PrimeNG Table component is one of the most feature-rich table implementations available for Angular, supporting sorting, filtering, pagination, row selection, and much more.
Whether you're building a simple admin dashboard or a complex enterprise application, PrimeNG provides the tools and components you need. The library's focus on accessibility, performance, and customization makes it an excellent choice for any Angular project.
To get started, visit the PrimeNG website to explore the full component library, check out the PrimeIcons documentation for available icons, and dive into the Table component documentation for advanced table features. With PrimeNG, you'll be building beautiful, functional Angular applications in no time.
