Instalación de PrimeNG

Integración con PrimeNG

flowchart TD
    NPM["npm install primeng primeicons"] --> THEME["Tema: Aura, Material, Lara, Nora"]
    NPM --> ICONS["primeicons CSS"]
    THEME --> CONFIG["providePrimeNG en app.config.ts"]
    CONFIG --> ANIM["provideAnimationsAsync()"]
    NPM --> COMP["Importación standalone por componente"]
    COMP --> BTN["ButtonModule, InputTextModule"]
    COMP --> TABLE["TableModule: ordenación, paginación"]
    COMP --> CHART["ChartModule, EditorModule"]

PrimeNG es una biblioteca de componentes UI rica y completa para Angular que ofrece más de 100 componentes, temas personalizables y una excelente integración con las últimas versiones del framework. A diferencia de otras librerías, PrimeNG destaca por su amplio catálogo de componentes avanzados como tablas de datos, calendarios, editores de texto enriquecido y gráficos.

Instalación de PrimeNG

La instalación de PrimeNG en un proyecto Angular moderno es directa mediante npm:

npm install primeng primeicons

El paquete primeicons incluye una colección de iconos optimizados que complementan perfectamente los componentes de PrimeNG.

Configuración en aplicaciones standalone

Para proyectos Angular 21 con arquitectura standalone, la integración se realiza importando los componentes específicos que necesites directamente en tus componentes:

import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { CardModule } from 'primeng/card';

@Component({
  selector: 'app-ejemplo',
  imports: [ButtonModule, InputTextModule, CardModule],
  template: `
    <p-card header="Formulario de ejemplo">
      <input pInputText placeholder="Escribe tu nombre" />
      <p-button label="Enviar" icon="pi pi-check"></p-button>
    </p-card>
  `
})
export class EjemploComponent {}

Configuración de estilos

PrimeNG requiere la importación de sus hojas de estilo CSS. Añade las siguientes líneas en tu archivo styles.css global:

@import 'primeicons/primeicons.css';
@import 'primeng/resources/themes/aura-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

La línea del tema puede cambiarse por cualquiera de los temas disponibles que ofrece PrimeNG. Algunos ejemplos populares incluyen:

• aura-light-blue/theme.css - Tema claro moderno
• aura-dark-blue/theme.css - Tema oscuro moderno
• bootstrap4-light-blue/theme.css - Estilo Bootstrap 4
• material-design-compact/indigo-pink.css - Material Design

Importación selectiva de componentes

Una de las ventajas principales de PrimeNG con componentes standalone es la importación selectiva. Solo importas los módulos que realmente utilizas, optimizando el tamaño final del bundle:

import { Component } from '@angular/core';
import { TableModule } from 'primeng/table';
import { TagModule } from 'primeng/tag';
import { RatingModule } from 'primeng/rating';

@Component({
  selector: 'app-productos',
  imports: [TableModule, TagModule, RatingModule],
  template: `
    <p-table [value]="productos">
      <ng-template pTemplate="header">
        <tr>
          <th>Nombre</th>
          <th>Precio</th>
          <th>Valoración</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-producto>
        <tr>
          <td>{{ producto.nombre }}</td>
          <td>{{ producto.precio | currency }}</td>
          <td>
            <p-rating 
              [ngModel]="producto.rating" 
              [readonly]="true">
            </p-rating>
          </td>
        </tr>
      </ng-template>
    </p-table>
  `
})
export class ProductosComponent {
  productos = [
    { nombre: 'Laptop', precio: 899, rating: 4 },
    { nombre: 'Mouse', precio: 25, rating: 5 }
  ];
}

Configuración de animaciones

PrimeNG utiliza animaciones CSS para mejorar la experiencia de usuario. Para habilitar las animaciones, asegúrate de añadir provideAnimations() en tu configuración de bootstrap:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    // otros providers...
  ]
});

Verificación de la instalación

Para verificar que PrimeNG se ha integrado correctamente, crea un componente simple de prueba:

import { Component, inject } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { MessagesModule } from 'primeng/messages';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-test-primeng',
  imports: [ButtonModule, MessagesModule],
  providers: [MessageService],
  template: `
    <div class="p-4">
      <h2>Test PrimeNG</h2>
      <p-button 
        label="Probar PrimeNG" 
        icon="pi pi-star" 
        (onClick)="mostrarMensaje()">
      </p-button>
      <p-messages></p-messages>
    </div>
  `
})
export class TestPrimeNGComponent {
  private messageService = inject(MessageService);
  
  mostrarMensaje() {
    this.messageService.add({
      severity: 'success',
      summary: '¡Éxito!',
      detail: 'PrimeNG está funcionando correctamente'
    });
  }
}

Con esta configuración básica, tendrás PrimeNG completamente integrado en tu aplicación Angular 21, listo para utilizar cualquiera de sus componentes avanzados con la sintaxis moderna del framework.

Caso B2B: backoffice y dashboards en banca, telco y AAPP

En entidades bancarias, los sistemas de backoffice (gestión de incidencias, paneles de fraude, dashboards de operaciones) suelen apoyarse en <p-table> con columnas dinámicas, filtros por columna, paginación servidor y exportación a CSV/Excel. Vuestro equipo gana porque construir un CRUD enterprise en una semana es viable: la tabla soporta selección múltiple, edición inline, frozen columns y virtual scrolling para listas con decenas de miles de filas. La organización se ahorra meses de desarrollo de un componente equivalente desde cero.

En telco con plataformas de NOC (Network Operations Center), <p-chart> integrado con Chart.js renderiza gráficos de tráfico, latencia y errores en tiempo real. El componente <p-treeTable> modela jerarquías de equipos (región → CPD → rack → servidor → interfaz) con expansión perezosa que evita cargar el árbol entero al inicio. La organización gana visibilidad operativa con un esfuerzo de UI proporcional al tiempo de un sprint.

En administraciones públicas con sedes electrónicas, los formularios de tramitación se modelan con <p-stepper> (pasos guiados), <p-fileUpload> (multifichero con preview), <p-calendar> (con bloqueo de festivos por comunidad) y <p-toast> (avisos accesibles WCAG AA). Vuestra organización entrega rápido y mantiene la accesibilidad exigida por el RD 1112/2018 sin desarrollar componentes a medida.

En retail con paneles para el equipo de marketing, <p-dataView> ofrece la dualidad lista/grid con un toggle, ideal para catálogos de producto donde el responsable alterna vistas según la tarea.

Versiones (2025)

PrimeNG 18 (noviembre 2024) es la versión actual con soporte para Angular 18 y 19. La gran novedad de PrimeNG 17/18 es PrimeNG Theming v2 basado en design tokens (variables CSS) que reemplaza el sistema de temas precompilados. Los temas modernos son Aura, Material, Lara y Nora, y permiten personalización con definePreset(). Se recomienda actualizar a PrimeNG 18 si vuestro proyecto está en Angular 18+.

PrimeNG mantiene compatibilidad con standalone components desde la versión 16. La inyección moderna usa providePrimeNG() y provideAnimationsAsync() en app.config.ts.

Anti-patrones y pitfalls

Importar BrowserAnimationsModule en componentes standalone. La forma correcta en Angular 17+ es provideAnimationsAsync() en la configuración de la aplicación. El módulo legacy sigue funcionando pero contradice el paradigma standalone.

Cargar el tema global y un tema custom. Genera CSS conflictivo. Elegid uno y, si necesitáis branding, usad el sistema de design tokens de PrimeNG 18 con definePreset().

p-table con miles de filas sin virtual scrolling. El DOM crece linealmente y el browser se ralentiza más allá de unos pocos miles de nodos. Activad [virtualScroll]="true" y [virtualScrollItemSize]="46".

No leer la guía de breaking changes al subir versión mayor. PrimeNG 17 → 18 introdujo cambios en el sistema de temas (design tokens) y deprecó la importación de temas precompilados. Saltar versiones mayores sin migrar suele romper estilos sutilmente.

Usar p-confirmDialog y p-toast sin MessageService/ConfirmationService provistos. Aparecen como componentes inertes sin error claro en consola. Añadid los services en providers: del componente o globalmente.

Cargar PrimeIcons solo desde CDN externo. En entornos B2B con políticas estrictas de CSP, las cargas externas se bloquean. Importad PrimeIcons como dependencia npm e incluidlas desde el bundle.

Comparativa con alternativas

Frente a Angular Material, PrimeNG ofrece más componentes (PrimeNG ~90, Angular Material ~35) y temas comerciales más variados. Angular Material es la opción canónica si vuestra organización sigue Material Design. PrimeNG es preferida en B2B europeo por la riqueza de componentes para tablas y formularios complejos.

Frente a NG-ZORRO (Ant Design para Angular), ambas tienen catálogo similar. NG-ZORRO refleja la estética Ant; PrimeNG es más neutral. Para clientes B2B con marca propia, PrimeNG con tokens de diseño es más fácil de personalizar.

Frente a DevExtreme o Kendo UI, PrimeNG es gratis (MIT). DevExtreme y Kendo UI tienen licencias comerciales por desarrollador, pero ofrecen componentes especializados (gantt, scheduler, pivot grid) que PrimeNG cubre solo parcialmente. Para banca con presupuesto, Kendo UI suele justificarse en algunos paneles concretos.

Frente a PrimeReact y PrimeVue (mismas familia), PrimeNG aprovecha mejor la integración con Angular: lazy loading, signals, hidratación SSR y standalone. Las alternativas no Angular tienen menor cohesión.

Documentación oficial

La referencia es primeng.org (v18). La sección "Theming" detalla design tokens y CSS variables. Cada componente tiene su página con ejemplos en vivo y la lista completa de props/events. Para la migración a PrimeNG 18, consultad la guía oficial "Migration Guide v17 to v18". Para soporte enterprise, PrimeFaces ofrece PrimeNG PRO (suscripción de pago) con componentes adicionales y soporte SLA.

PrimeNG es la elección por defecto para vuestro equipo cuando construyáis backoffices ricos en Angular y queráis evitar reinventar componentes. Bien usada con design tokens y signals, mantiene proyectos B2B mantenibles y consistentes durante años.