Encadenamiento y parametrización de pipes
Combine pipes y pase argumentos.
Encadenamiento y parametrización de pipes es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.
Pasar argumentos a los pipes
Los pipes pueden aceptar argumentos después de dos puntos. La forma es {{ value | pipeName:arg1:arg2 }}. Cada argumento se separa con sus propios dos puntos.
Un solo argumento
Muchos pipes aceptan un argumento. Por ejemplo, el pipe date acepta una cadena de formato.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Varios argumentos
El pipe slice acepta un índice inicial y uno final, cada uno introducido con sus propios dos puntos.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Argumentos dinámicos
Los argumentos pueden ser propiedades del componente, no solo literales. Esto le permite cambiar el comportamiento del pipe de forma reactiva.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;¿Qué es el encadenamiento de pipes?
Puede encadenar pipes para que la salida de uno se convierta en la entrada del siguiente. Se ejecutan de izquierda a derecha.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Ejemplo de encadenamiento
Aquí se da formato a una fecha y luego se convierte a mayúsculas. El pipe date se ejecuta primero y después uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->El orden importa
El orden de los pipes encadenados cambia el resultado. Aplicar uppercase antes de slice o después produce aquí el mismo texto, pero con pipes que transforman datos el orden puede ser muy importante.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Combinar argumentos y encadenamiento
Puede combinar argumentos y encadenamiento libremente. Cada pipe sigue recibiendo como valor la salida del pipe anterior.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Encadenamiento con currency
Dé formato a un número como moneda y luego recórtelo. Aunque no es habitual, esto muestra que los pipes son bloques de construcción componibles.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Consejos de legibilidad
Las cadenas largas de pipes pueden dificultar la lectura. Si una cadena se vuelve compleja, considere calcular el valor en el componente o utilizar un pipe personalizado.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Espacios alrededor de los pipes
Los espacios alrededor de | y : son opcionales, pero se recomiendan para mejorar la legibilidad. Angular ignora los espacios en blanco adicionales.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Comprobación rápida
Compruebe su comprensión de los argumentos y el encadenamiento de pipes.
Resumen
Ha aprendido a pasar uno o varios argumentos mediante dos puntos, a utilizar argumentos dinámicos de las propiedades del componente y a encadenar pipes para que la salida fluya de izquierda a derecha.
A continuación, creará su propio pipe personalizado.
Preguntas frecuentes
¿La lección «Encadenamiento y parametrización de pipes» es gratis?
Sí — el texto completo de «Encadenamiento y parametrización de pipes» 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 «Encadenamiento y parametrización de pipes»?
Combine pipes y pase argumentos. 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 2 de 4.
¿Cuánto tiempo toma la lección «Encadenamiento y parametrización de pipes»?
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