Pipes transforman datos para su visualización directamente en plantillas, usando el operador |. Te permiten formatear valores (fechas, monedas, texto) sin cambiar los datos subyacentes ni escribir lógica de transformación en el componente.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
El valor a la izquierda se pasa a través del pipe; los argumentos siguen después de dos puntos (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async es especialmente importante: se suscribe a un Observable (p. ej. un resultado HTTP), renderiza el valor emitido, y se desuscribe automáticamente cuando el componente se destruye — previniendo fugas de memoria sin gestión manual de suscripciones.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Los pipes puros se cachean y solo se recalculan cuando su entrada cambia — haciéndolos eficientes.
Los pipes mantienen el formato de datos declarativo y en la plantilla donde pertenece, separado de la lógica del componente — reutilizables, encadenables, y (cuando son puros) eficientes.
Los pipes integrados cubren formatos comunes, los pipes personalizados manejan transformaciones específicas de la aplicación, y el async pipe es la forma idiomática y libre de fugas para mostrar datos de Observable — un patrón que usarás constantemente en Angular.