No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Conociendo los pipes

15/20
Recursos

Si vamos a estar conociendo los pipes debemos empezar por definirlos, un Pipe es una función pura, o sea, una función que dado un determinado valor siempre devolverá el mismo resultado.

Los Pipes no modifican el valor de un dato, simplemente le cambian el aspecto visual, Angular utiliza el concepto de Pipes para la transformación de datos.

Tipos de pipes

Angular posee por defecto algunos pipes que puedes utilizar para transformar números, fechas o cadenas de texto. Veamos los más importantes:

  • DatePipe: Modifica fechas de acuerdo al formato necesitado.
  • UpperCasePipe: Convierte todo el texto a mayúscula.
  • LowerCasePipe: Convierte todo el texto en minúscula.
  • CurrencyPipe: Convierte un número a la moneda o divisa necesitada.

Podrás encontrar en la documentación oficial de Angular más Pipes y su funcionamiento.

Utilizando pipes

Los pipes se utilizan fácilmente en el HTML haciendo uso del carácter “|” seguido del nombre del pipe.

<div>
  {{ "hola soy platzi" | uppercase }}
</div>
<div>
  {{ 1000 | currency:'USD' }}
</div>

En los ejemplos anteriores, se mostrará en la vista el testo HOLA SOY PLATZI completamente en mayúscula y el número 1000 en formato $1,000.00. En algunos casos, los pipes reciben parámetros de configuración, como el caso del pipe currency que recibe :'USD' para indicar el tipo de divisa.

Contribución creada con los aportes de Kevin Fiorentino.

Aportes 8

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Tengo experiencia con Angular y estoy haciendo estos cursos como repaso, la importancia de estar atento a nuevas herramientas. No sabía que había un pipe de fechas, particularmente usaba la librería moment(). Algo nuevo que aprendí en la clase 👏👏👏

Importante nota: Los pipes no se utilizan en el Typescript van directamente en el html!!!

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, formatos numéricos. El valor de la información transformada no cambia, sólo lo hace su aspecto.

Me da la impresión que el video tiene un corte extraño en el minuto 3:00, como si se hubiera cortado una parte de la explicación

2050… vienes del futuro, eh?

Aquí la documentación oficial de Angular donde ofrece más información acerca del tema:

Dejo aqui buena documentación al respecto https://www.acontracorrientech.com/pipes-en-angular-guia-completa/