Uso de Pipes

Pipes integrados

Los pipes en Angular son transformadores de datos que permiten formatear información directamente en las plantillas sin modificar los datos originales del componente. Funcionan como filtros que toman un valor de entrada, lo procesan según una lógica específica y devuelven el resultado transformado.

La sintaxis básica utiliza el símbolo de tubería | seguido del nombre del pipe:

{{ valor | nombrePipe }}

Angular proporciona una amplia colección de pipes integrados que cubren las necesidades más comunes de formateo de datos. Estos pipes están disponibles de forma inmediata sin necesidad de importaciones adicionales.

Pipes de formato de texto

Los pipes de transformación de texto modifican la capitalización y presentación de strings:

<p>{{ 'angular framework' | uppercase }}</p>
<!-- Resultado: ANGULAR FRAMEWORK -->

<p>{{ 'ANGULAR FRAMEWORK' | lowercase }}</p>
<!-- Resultado: angular framework -->

<p>{{ 'angular framework' | titlecase }}</p>
<!-- Resultado: Angular Framework -->

Pipes numéricos

Para el formateo de números, Angular ofrece pipes que manejan decimales, monedas y porcentajes:

<p>{{ 123.456 | number }}</p>
<!-- Resultado: 123.456 -->

<p>{{ 123.456 | number:'1.0-2' }}</p>
<!-- Resultado: 123.46 (1 entero mínimo, 0-2 decimales) -->

<p>{{ 29.99 | currency:'EUR':'symbol':'1.2-2' }}</p>
<!-- Resultado: €29.99 -->

<p>{{ 0.85 | percent }}</p>
<!-- Resultado: 85% -->

El pipe number acepta parámetros para controlar el formato: 'minIntegerDigits.minFractionDigits-maxFractionDigits'.

Pipe de fecha

El pipe date es uno de los más utilizados para formatear fechas:

<p>{{ fechaActual | date }}</p>
<!-- Resultado: Dec 15, 2024 -->

<p>{{ fechaActual | date:'dd/MM/yyyy' }}</p>
<!-- Resultado: 15/12/2024 -->

<p>{{ fechaActual | date:'shortDate' }}</p>
<!-- Resultado: 12/15/24 -->

<p>{{ fechaActual | date:'fullDate':'':'es' }}</p>
<!-- Resultado: domingo, 15 de diciembre de 2024 -->

Pipe slice para arrays y strings

El pipe slice extrae porciones de arrays o strings:

<p>{{ 'Angular Framework' | slice:0:7 }}</p>
<!-- Resultado: Angular -->

<ul>
  @for (item of elementos | slice:0:3; track item.id) {
    <li>{{ item.nombre }}</li>
  }
</ul>
<!-- Muestra solo los primeros 3 elementos -->

Pipe JSON para debugging

El pipe json convierte objetos a formato JSON legible, útil para depuración:

<pre>{{ usuario | json }}</pre>
<!-- Resultado: 
{
  "nombre": "Juan",
  "email": "juan@email.com"
}
-->

Encadenamiento de pipes

Los pipes pueden encadenarse para aplicar múltiples transformaciones:

<p>{{ producto.nombre | uppercase | slice:0:10 }}</p>
<!-- Primero convierte a mayúsculas, luego toma los primeros 10 caracteres -->

<p>{{ precio | currency:'EUR':'symbol':'1.2-2' | slice:0:-3 }}</p>
<!-- Formatea como moneda y luego corta los últimos 3 caracteres -->

Pipes puros y rendimiento

Los pipes integrados de Angular son pipes puros por defecto. Esto significa que solo se ejecutan cuando cambia el valor de entrada o los parámetros, no en cada ciclo de detección de cambios. Esta característica optimiza el rendimiento de la aplicación al evitar cálculos innecesarios.

Un pipe puro mantiene el mismo resultado para las mismas entradas, lo que permite a Angular cachear los resultados y mejorar la eficiencia general del renderizado.

Transformación de datos

Los pipes van más allá del simple formateo, actuando como transformadores de datos que pueden modificar, filtrar y restructurar información de maneras sofisticadas. Esta capacidad de transformación permite crear interfaces más dinámicas y adaptadas a las necesidades específicas del usuario.

Transformación con parámetros múltiples

Los pipes pueden recibir múltiples parámetros para personalizar la transformación de datos. Estos parámetros se separan con dos puntos y permiten configuraciones detalladas:

export class ProductoComponent {
  producto = {
    precio: 1234.567,
    fechaLanzamiento: new Date('2024-03-15'),
    descripcion: 'Este es un producto increíble con muchas características'
  };
}

<!-- Transformación de precio con configuración específica -->
<p>Precio: {{ producto.precio | currency:'USD':'symbol-narrow':'1.2-2':'es' }}</p>
<!-- Resultado: $1,234.57 con localización española -->

<!-- Fecha con formato personalizado y zona horaria -->
<p>Lanzado: {{ producto.fechaLanzamiento | date:'EEEE, d MMMM y':'GMT+1':'es' }}</p>
<!-- Resultado: viernes, 15 marzo 2024 -->

Transformación contextual de datos

La transformación contextual permite adaptar los datos según el contexto de la aplicación:

export class TiendaComponent {
  productos = [
    { nombre: 'Laptop Gaming', precio: 1299.99, stock: 5 },
    { nombre: 'Mouse Inalámbrico', precio: 49.99, stock: 0 },
    { nombre: 'Teclado Mecánico', precio: 129.99, stock: 12 }
  ];
  
  monedaSeleccionada = 'EUR';
  idiomaSeleccionado = 'es';
}

<div class="productos-grid">
  @for (producto of productos; track producto.nombre) {
    <div class="producto-card">
      <h3>{{ producto.nombre | titlecase }}</h3>
      
      <!-- Transformación dinámica según configuración del usuario -->
      <p class="precio">
        {{ producto.precio | currency:monedaSeleccionada:'symbol':'1.2-2':idiomaSeleccionado }}
      </p>
      
      <!-- Transformación condicional del estado del stock -->
      <span class="stock" 
            [class.agotado]="producto.stock === 0"
            [class.disponible]="producto.stock > 0">
        @if (producto.stock === 0) {
          {{ 'AGOTADO' | lowercase }}
        } @else {
          {{ producto.stock }} {{ producto.stock === 1 ? 'unidad' : 'unidades' }} disponibles
        }
      </span>
    </div>
  }
</div>

Transformación de colecciones de datos

Los pipes pueden procesar colecciones completas para crear vistas filtradas o reorganizadas:

export class BlogComponent {
  articulos = [
    {
      titulo: 'Introducción a Angular Signals',
      contenido: 'Los signals representan una nueva forma de manejar la reactividad...',
      fecha: new Date('2024-01-15'),
      categoria: 'tutorial'
    },
    {
      titulo: 'Novedades en Angular 20',
      contenido: 'La nueva versión de Angular incluye mejoras significativas...',
      fecha: new Date('2024-02-20'),
      categoria: 'noticias'
    }
  ];
}

<!-- Transformación y presentación de artículos -->
@for (articulo of articulos; track articulo.titulo) {
  <article class="blog-post">
    <h2>{{ articulo.titulo | titlecase }}</h2>
    
    <!-- Transformación de fecha con formato completo -->
    <time>{{ articulo.fecha | date:'fullDate':'':'es' }}</time>
    
    <!-- Transformación de contenido con límite de caracteres -->
    <p>{{ articulo.contenido | slice:0:150 }}...</p>
    
    <!-- Transformación de categoría para mostrar -->
    <span class="categoria">
      {{ articulo.categoria | uppercase }}
    </span>
  </article>
}

Transformación de datos numéricos complejos

Para datos numéricos que requieren formateo especializado, los pipes permiten transformaciones precisas:

export class EstadisticasComponent {
  estadisticas = {
    ventas: 1234567.89,
    crecimiento: 0.1523,
    usuarios: 45678,
    conversion: 0.0234
  };
}

<div class="dashboard-stats">
  <!-- Transformación de números grandes -->
  <div class="stat-card">
    <h3>Ventas Totales</h3>
    <p>{{ estadisticas.ventas | currency:'EUR':'symbol':'1.0-0' }}</p>
  </div>
  
  <!-- Transformación de porcentajes con precisión -->
  <div class="stat-card">
    <h3>Crecimiento</h3>
    <p>{{ estadisticas.crecimiento | percent:'1.1-1' }}</p>
  </div>
  
  <!-- Transformación con formato personalizado -->
  <div class="stat-card">
    <h3>Usuarios Activos</h3>
    <p>{{ estadisticas.usuarios | number:'1.0-0':'es' }}</p>
  </div>
  
  <!-- Transformación de tasas con formato específico -->
  <div class="stat-card">
    <h3>Tasa de Conversión</h3>
    <p>{{ estadisticas.conversion | percent:'1.2-2' }}</p>
  </div>
</div>

Transformación de datos estructurados

Los pipes pueden manejar datos estructurados complejos para crear representaciones útiles:

export class PerfilComponent {
  usuario = {
    nombre: 'juan carlos',
    apellidos: 'garcía lópez',
    configuracion: {
      tema: 'oscuro',
      idioma: 'es',
      notificaciones: true
    },
    ultimoAcceso: new Date('2024-12-10T14:30:00'),
    preferencias: ['angular', 'typescript', 'rxjs']
  };
}

<div class="perfil-usuario">
  <!-- Transformación de nombres compuestos -->
  <h1>
    {{ usuario.nombre | titlecase }} {{ usuario.apellidos | titlecase }}
  </h1>
  
  <!-- Transformación de fecha relativa -->
  <p>Último acceso: {{ usuario.ultimoAcceso | date:'medium':'':'es' }}</p>
  
  <!-- Transformación de array a string -->
  <div class="preferencias">
    <strong>Intereses:</strong>
    <span>{{ usuario.preferencias.join(', ') | titlecase }}</span>
  </div>
  
  <!-- Transformación de configuración para debugging -->
  <details class="config-debug">
    <summary>Configuración (Debug)</summary>
    <pre>{{ usuario.configuracion | json }}</pre>
  </details>
</div>

Optimización en transformaciones

Las transformaciones eficientes son cruciales para el rendimiento. Los pipes puros calculan el resultado una sola vez para los mismos datos de entrada:

export class ListaProductosComponent {
  productos = [
    { id: 1, nombre: 'PRODUCTO A', precio: 99.99 },
    { id: 2, nombre: 'PRODUCTO B', precio: 149.99 }
  ];
  
  // El pipe solo se ejecuta cuando cambian los datos
  obtenerProductoFormateado(producto: any) {
    return {
      ...producto,
      nombre: producto.nombre.toLowerCase()
    };
  }
}

<!-- Transformación eficiente con pipes puros -->
@for (producto of productos; track producto.id) {
  <div class="producto-item">
    <!-- El pipe titlecase solo se ejecuta si cambia el nombre -->
    <h3>{{ producto.nombre | titlecase }}</h3>
    
    <!-- El pipe currency solo se ejecuta si cambia el precio -->
    <p>{{ producto.precio | currency:'EUR':'symbol':'1.2-2' }}</p>
  </div>
}

Esta capacidad de transformación inteligente hace que los pipes sean herramientas fundamentales para crear interfaces reactivas y eficientes, procesando datos de manera optimizada sin comprometer el rendimiento de la aplicación.