Creación de pipes para transformar datos

Pipes en Angular (II)

Una Pipe personalizada en Angular te permitirá transformar y formatear datos de acuerdo con tus necesidades específicas. En este tutorial, aprenderemos a crear una Pipe que convierta euros a doláres.

Imagina que estás desarrollando una aplicación web que muestra una lista de productos a los usuarios. Cada producto tiene un precio en euros, pero queremos añadir la posibilidad de mostrar el precio en dólares estadounidenses. En este caso, una Pipe sería útil para formatear y mostrar el precio en esa moneda en concreto.

Para resolver este problema, podríamos crear una Pipe personalizada llamada CurrencyConverterPipe. Esta Pipe tomaría como entrada el precio del producto en euros y devolvería el precio formateado en USD.

Para ello, lo primero que debemos hacer es ejecutar el comando correspondiente para la creación de una nueva pipe usando el CLI:

ng g p CurrencyConverter

currency-converter.pipe.ts

Ahora debemos implementar la lógica que nos permita transformar el valor en EUR a USD. Para ello lo ideal sería realizar una petición a alguna API que nos devuelva el valor del dolar a tiempo real, pero como aún no hemos llegado a esa clase vamos a suponer que el dólar es un valor constante (1,10). Si un euro equivale a 1,10 dólares, lo que debemos hacer para calcular su valor es una simple multiplicación.

currency-converter.pipe.ts

En TypeScript, la declaración public static readonly tipoCambio = 1.10; define una propiedad pública y estática que tiene un valor fijo de 1.10 y no puede ser modificado después de ser asignado.

Luego, en la plantilla HTML donde se muestra la lista de productos, podemos usar la Pipe currencyConverter para mostrar el precio en dólares:

products.component.html

Donde products es la lista de productos obtenida de la API, product.price es el precio del producto en euros.

De esta manera, cada vez que se muestre el precio de un producto en la lista, se aplicará la Pipe currencyConverter para convertir y formatear el precio en USD, proporcionando una experiencia más personalizada y amigable para los usuarios de diferentes países.