Última actualización: 6 abril, 2023
¿Qué son los pipes?
Los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un texto a mayúsculas o minúsculas, o darle formato de fecha y hora.
El valor de la información transformada no cambia, sólo lo hace su aspecto.-->
Angular trae una serie de pipes por defecto (documentación oficial aquí) pero también nos permite construir nuestros propios pipes.
Estos son los pipes de Angular que vamos a ver:
- uppercase y lowercase
Ejemplo:
let name = 'sheldon';
{{ name | uppercase }}
Result --> SHELDON
- Slice
- Decimal
- Percent
- Currency
- Json
- Async
- Date
let birthday = new Date(1980, 6, 31);
{{ birthday | date:'dd/mm/yy' }}
Result --> 31/07/1980
Vamos a ver cada pipe en profundidad construyendo una pequeña demo-app que cogerá una variable y la transformará en algo distinto dependiendo del pipe que se le aplique. Será algo así:

El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos nuestro repaso a las pipes en Angular! Espero que hayas aprendido algo nuevo
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win
Otros artículos que pueden interesarte
Como sería un pipe para que un item en ngFor se muestre solamente una vez, por ejemplo, si en mi tabla tengo repetido el nombre Juan varias veces.
*ngFor = «let nombre of nombres»
{{ nombre.Persona }}
Gracias por su respuesta