¡No te preocupes! Vamos a enfocarnos en Angular y a explicar los pipes desde cero, con ejemplos claros y prácticos para que puedas entenderlos y aplicarlos en tus proyectos. ¡Aquí vamos!
¿Qué son los Pipes en Angular?
En Angular, los pipes son herramientas que nos permiten transformar datos directamente en las plantillas HTML. Son como "filtros" que toman un valor, lo procesan y devuelven un resultado transformado. Esto es especialmente útil cuando necesitas mostrar datos en un formato específico, como fechas, números o texto.
Por ejemplo, si tienes una fecha en formato ISO (2025-03-11T00:00:00) y quieres mostrarla como 11/03/2025, puedes usar un pipe para hacerlo sin necesidad de escribir lógica adicional en tu componente.
¿Para qué sirven los Pipes?
Los pipes en Angular tienen varios usos importantes:
- Formatear datos: Puedes transformar fechas, números, monedas, textos, etc.
- Simplificar plantillas: En lugar de escribir lógica compleja en el componente, puedes usar un pipe directamente en el HTML.
- Reutilización: Los pipes son reutilizables, lo que significa que puedes aplicarlos en diferentes partes de tu aplicación sin duplicar código.
¿Cómo se usan los Pipes en Angular?
Angular incluye varios pipes integrados que puedes usar de inmediato. Aquí tienes algunos ejemplos comunes:
1. Pipe para fechas (date)
El pipe date transforma una fecha en un formato legible.
<p>Fecha original: {{ fecha }}</p>
<p>Fecha formateada: {{ fecha | date:'dd/MM/yyyy' }}</p>
Si fecha = '2025-03-11T00:00:00', el resultado será:
Fecha original: 2025-03-11T00:00:00
Fecha formateada: 11/03/2025
2. Pipe para texto (uppercase y lowercase)
Estos pipes transforman texto a mayúsculas o minúsculas.
<p>Texto original: {{ 'Hola Mundo' }}</p>
<p>Texto en mayúsculas: {{ 'Hola Mundo' | uppercase }}</p>
<p>Texto en minúsculas: {{ 'Hola Mundo' | lowercase }}</p>
Resultado:
Texto original: Hola Mundo
Texto en mayúsculas: HOLA MUNDO
Texto en minúsculas: hola mundo
3. Pipe para números (number)
El pipe number formatea números con decimales.
<p>Número original: {{ 12345.6789 }}</p>
<p>Número formateado: {{ 12345.6789 | number:'1.2-2' }}</p>
-
1.2-2significa que queremos al menos 1 dígito entero, y entre 2 y 2 decimales.
Resultado:
Número original: 12345.6789
Número formateado: 12,345.68
4. Pipe para monedas (currency)
El pipe currency formatea números como monedas.
<p>Precio: {{ 1234.5 | currency:'USD':'symbol':'1.2-2' }}</p>
Resultado:
Precio: $1,234.50
¿Cómo se personalizan los Pipes?
A veces, los pipes integrados no son suficientes y necesitas crear uno personalizado. Por ejemplo, supongamos que quieres un pipe que invierta un texto.
1. Crear un Pipe Personalizado
Primero, genera el pipe con Angular CLI:
ng generate pipe invertirTexto
Esto creará dos archivos: invertir-texto.pipe.ts y invertir-texto.pipe.spec.ts.
2. Implementar la Lógica del Pipe
Edita el archivo invertir-texto.pipe.ts para agregar la lógica de inversión de texto:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'invertirTexto'
})
export class InvertirTextoPipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}
3. Usar el Pipe en la Plantilla
Ahora puedes usar tu pipe personalizado en cualquier plantilla:
<p>Texto original: {{ 'Hola Mundo' }}</p>
<p>Texto invertido: {{ 'Hola Mundo' | invertirTexto }}</p>
Resultado:
Texto original: Hola Mundo
Texto invertido: odnuM aloH
Ejemplo Completo: Combinando Pipes
Puedes combinar varios pipes en una sola expresión. Por ejemplo:
<p>Texto original: {{ 'Hola Mundo' }}</p>
<p>Texto invertido y en mayúsculas: {{ 'Hola Mundo' | invertirTexto | uppercase }}</p>
Resultado:
Texto original: Hola Mundo
Texto invertido y en mayúsculas: ODNUM ALOH
Conclusión
Los pipes en Angular son una herramienta poderosa para transformar datos de manera sencilla y eficiente en las plantillas. Ya sea que uses los pipes integrados o crees los tuyos propios, te ayudarán a mantener tu código limpio y organizado.
Te recomiendo practicar con los pipes integrados primero (como date, uppercase, currency, etc.) y luego intentar crear tus propios pipes personalizados. ¡La práctica te ayudará a dominar este concepto y a aplicarlo en proyectos reales!
Top comments (0)