Transforma tus datos y tu aplicación: la magia de los Pipes en Angular

Angular nos ayuda a convertir valores para mostrarlos en la vista mediante Pipes. Los pipes son una forma sencilla de transformar datos de entrada en el resultado o formato que deseamos mostrar.

Una mala práctica común es usar un método dentro del template para convertir datos, ya que esto afecta negativamente el rendimiento de la aplicación. Cuando necesites transformar datos para su visualización, la mejor opción es usar un Pipe.

Los pipes funcionan en los templates de nuestros componentes utilizando el operador barra vertical |. Toman el dato situado a la izquierda, lo pasan a la función del pipe a la derecha y devuelven el resultado transformado para mostrarlo en el template.

Angular cuenta con una lista de pipes disponibles listos para usar, y también podemos crear un pipe personalizado para obtener exactamente el dato esperado.

Puedes ver el ejemplo final en StackBlitz.

Uso del pipe currency

Por ejemplo, imaginemos que tenemos una lista de puestos de trabajo con sus salarios:

salaryRanges = [
    {
      title: 'developer',
      salary: 90000,
    },
    {
      title: 'nbaPlayer',
      salary: 139883,
    },
    {
      title: 'doctor',
      salary: 72000,
    },
  ];

<ul>
  <li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary }}
  </li>
</ul>

Queremos mostrar el símbolo de moneda, por ejemplo $, y los decimales correspondientes utilizando el pipe currency. Angular, por defecto, usa el formato USD:

<ul>
  <li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary | currency }}
  </li>
</ul>

El resultado en pantalla se ve así: developer $90,000.00 nbaPlayer $139,883.00 doctor $72,000.00. ¡Muy bien! Pero, ¿qué pasa si queremos convertir esos montos a otras monedas como dólares o euros aplicando una tasa de cambio? ¿Angular no tiene nada listo para esto?

¡Vamos a construir un pipe personalizado!

Crear un pipe personalizado

Un Pipe es simplemente una clase que implementa la interfaz PipeTransform.

Nuestro pipe convertExchange toma el valor recibido y devuelve el salario dividido entre 55:

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'convertExchange'
})
export class ConvertToExchange implements PipeTransform {
  transform(value: any, args?: any): any {
    return value / 55
  }
}

Ten en cuenta registrar el Pipe en tu módulo.

Podemos encadenar pipes, por ejemplo currency y convertToExchange. De esta forma, nuestro pipe realiza el cálculo y currency muestra el formato: {{ profesional.salary | convertToExchange | currency }}. ¡Listo! El monto se muestra con el formato de moneda y la tasa de conversión aplicada.

developer $1,636.36
nbaPlayer $2,543.33
doctor $1,309.09

Nuestro pipe es muy práctico porque realiza operaciones sobre los datos, pero ¿qué pasa si quiero hacerlo más flexible para permitir cambiar la moneda en el futuro a USD o EURO?

Primero, creamos un objeto con las monedas y sus valores de conversión:

const currencyValues = {
  USD: 55,
  EURO: 75,
};

Luego, agregamos un nuevo parámetro en el método transform para recibir el nombre de la moneda y creamos un método para obtener el valor correspondiente a esa divisa.

Nuestro código queda así:

import { Pipe, PipeTransform } from '@angular/core';
const currencyValues = {
  USD: 55,
  EURO: 75,
};
 
@Pipe({
  name: 'convertToExchange',
  pure: false,
})
export class ConvertToExchange implements PipeTransform {
  transform(value: any, currency: string): any {
    return value / this.getCurrencyValue(currency);
  }
 
  getCurrencyValue(currency) {
    return currencyValues[currency] | 1;
  }
}

¡Perfecto! Ahora usamos el pipe con parámetros en el template del componente. Para pasar el parámetro utilizamos : seguido del valor, en nuestro caso 'USD' o 'EURO'.

Nuestro convertToExchange realiza los cálculos según la moneda USD y currency le da formato a la salida de convertToExchange:

  {{ profesional.salary | convertToExchange: 'USD' | currency }}

El resultado final se ve así:

developer $1,636.36
nbaPlayer $2,543.33
doctor $1,309.09

Cómo hacerlo dinámico

Podemos crear un selector con la lista de monedas para que el usuario elija la conversión: <select (change)="changeTo($any($event.target).value)">

 currentCurrency = 'DOP';
changeTo(currency) {
    this.currentCurrency = currency;
  }

Luego, usamos currentCurrency en el template como parámetro para el pipe:

<li *ngFor="let profesional of salaryRanges">
    {{ profesional.title }}
    {{ profesional.salary | convertToExchange: currentCurrency | currency }}
  </li>

¡Perfecto! Si seleccionas una moneda en el selector, el cálculo se vuelve a ejecutar automáticamente :)

Puedes probar y experimentar con el código en la demo de StackBlitz: https://stackblitz.com/edit/angular-ivy-opaevp?file=src%2Fapp%2Fapp.component.html

Resumen

En resumen, los pipes son herramientas muy útiles para transformar datos en pantalla sin comprometer el rendimiento. Te invito a revisar más sobre ellos en la documentación oficial de Angular, donde encontrarás más ejemplos y casos de uso:

https://angular.io/guide/pipes

Foto por T K en Unsplash