Uso de pipes integrados
Dé formato a fechas, números y texto con pipes.
Uso de pipes integrados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué es un pipe?
Un pipe transforma datos directamente en la plantilla para mostrarlos. Escriba un valor, el carácter de pipe | y después el nombre del pipe.
Los pipes son ideales para dar formato a fechas, números, monedas y texto sin escribir lógica adicional en el componente.
La sintaxis de los pipes
La forma básica es {{ value | pipeName }}. Angular pasa el valor al pipe y renderiza el resultado transformado.
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->Los pipes uppercase y lowercase
uppercase y lowercase cambian las mayúsculas y minúsculas de una cadena. Son sencillos y se usan habitualmente en etiquetas y encabezados.
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULAREl pipe date
El pipe date da formato a un objeto Date o a una marca de tiempo y lo convierte en una cadena legible. De forma predeterminada, usa un formato de fecha medio.
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();Dar formato a fechas
Puede pasar una cadena de formato al pipe date, como "shortDate", "fullDate" o un patrón personalizado como "yyyy-MM-dd".
<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->
<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->El pipe currency
El pipe currency da formato a un número como importe monetario. De forma predeterminada, usa USD, pero puede pasar un código de moneda.
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;Los pipes number y percent
El pipe number da formato a los números con opciones de dígitos, y percent muestra un valor como porcentaje.
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->Entender digitsInfo
El pipe number acepta una cadena digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Por ejemplo, "1.2-2" siempre muestra exactamente dos decimales.
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->El pipe json
El pipe json serializa cualquier objeto como una cadena JSON. Se usa principalmente para depurar plantillas y poder ver la estructura de los datos.
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };El pipe slice
El pipe slice devuelve una parte de un array o una cadena, de forma similar a slice de JavaScript. Resulta útil para truncar listas.
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>Importar pipes en componentes independientes
En los componentes independientes debe importar los pipes que utilice, por ejemplo DatePipe o CurrencyPipe, desde @angular/common.
import { DatePipe, CurrencyPipe } from "@angular/common";
@Component({
selector: "app-demo",
standalone: true,
imports: [DatePipe, CurrencyPipe],
template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
today = new Date();
}Comprobación rápida
Compruebe su comprensión de los pipes integrados.
Resumen
Ha aprendido los principales pipes integrados: uppercase, lowercase, date, currency, number, percent, json y slice.
Los pipes mantienen el formato en la plantilla de forma limpia y declarativa. A continuación, encadenará pipes y les pasará argumentos.
Preguntas frecuentes
¿La lección «Uso de pipes integrados» es gratis?
Sí — el texto completo de «Uso de pipes integrados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Uso de pipes integrados»?
Dé formato a fechas, números y texto con pipes. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Uso de pipes integrados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Uso de pipes integrados
- Encadenamiento y parametrización de pipes
- Creación de pipes personalizados
- Pipes puros frente a impuros