PrimeNG

Language: JavaScript

UI Framework

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.

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.

Installation

npm: npm install primeng primeicons

yarn: yarn add primeng primeicons

manual:

Include PrimeNG modules in your Angular application and import the CSS from node_modules/primeng/resources/themes and node_modules/primeicons/primeicons.css

Usage

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.

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.

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.

Error Handling

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.

Official Docs Github