Instalación de PrimeNG

Integración con PrimeNG

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 20 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',
  standalone: true,
  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',
  standalone: true,
  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 importar BrowserAnimationsModule 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 } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { MessagesModule } from 'primeng/messages';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-test-primeng',
  standalone: true,
  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 {
  constructor(private messageService: 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 20, listo para utilizar cualquiera de sus componentes avanzados con la sintaxis moderna del framework.