Skip to content

PrimeNG

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

PrimeNG is a comprehensive UI component library for Angular, offering a wide range of rich and responsive components including forms, data tables, charts, menus, and more, following modern design patterns.

PrimeNG provides Angular modules for each component. You can import and use them in your templates, with support for two-way binding, events, and customization.

Installation

npm install primeng primeicons

Getting started

The smallest useful thing you can do with it, and what each part means.

Button usage
import { ButtonModule } from 'primeng/button';

@NgModule({ imports: [ButtonModule] })
export class AppModule {}

<p-button label="Click Me" icon="pi pi-check"></p-button>
Imports the ButtonModule and uses a PrimeNG button with label and icon.
Input text
import { InputTextModule } from 'primeng/inputtext';

<input type="text" pInputText placeholder="Enter text" />
Uses the PrimeNG input text component for styled input fields.

Advanced usage

Where the library earns its place over a simpler alternative.

Data Table
import { TableModule } from 'primeng/table';

<p-table [value]="cars">
  <ng-template pTemplate="header">
    <tr>
      <th>Vin</th>
      <th>Year</th>
      <th>Brand</th>
      <th>Color</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>{{car.vin}}</td>
      <td>{{car.year}}</td>
      <td>{{car.brand}}</td>
      <td>{{car.color}}</td>
    </tr>
  </ng-template>
</p-table>
Displays tabular data using PrimeNG DataTable component with templates for headers and body rows.
Dialog component
<p-dialog header="Title" [(visible)]="display">
  <p>Content goes here.</p>
</p-dialog>
<p-button label="Show Dialog" icon="pi pi-external-link" (onClick)="display=true"></p-button>
Shows a modal dialog with a button to toggle its visibility.
Dropdown component
import { DropdownModule } from 'primeng/dropdown';

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
Provides a styled dropdown selection using PrimeNG dropdown module.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Styles not applied
Ensure you imported PrimeNG theme CSS and PrimeIcons CSS in angular.json.
Two-way binding not working
Ensure [(ngModel)] is used and FormsModule is imported in your module.
Components not rendered
Verify that the corresponding PrimeNG module is imported in your NgModule.

Best practices

  • Import only the PrimeNG modules you need to reduce bundle size.
  • Use Angular reactive forms for form components with two-way binding.
  • Apply themes from PrimeNG for consistent styling.
  • Combine PrimeNG components with Angular services for dynamic data handling.
  • Check component documentation for available events and properties for better integration.

Background

Why it exists, and what it was reacting to.

PrimeNG was developed by PrimeTek Informatics to provide Angular developers with a robust and feature-rich set of UI components. It emphasizes accessibility, responsiveness, and ease of use, making it popular in both enterprise and community projects.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide