angular

Crear pipe personalizado en Angular

Un pipe en Angular nos permite a través de nuestras vistas tomar un dato como entrada y transformarlo en una salida deseada. En ocasiones ocurre que a través de nuestras APIs obtenemos datos en formatos poco amigables para los usuario y deseamos formatearlo a algo más legible. Un ejemplo sencillo de esto sería una fecha, la cual podríamos recibir en formato ISO (Tue Mar 24 2015 19:30:00 GMT-0430 (hora de Venezuela) ) y deseamos mostrarla en nuestra vista en un formato corto (03/24/2020).

En esta ocasión crearemos un pipe personalizado que recibirá el valor de un producto en euros y lo mostrará en dolares.

Para ello crearemos un nuevo proyecto de angular con ng new PipesPersonalizadosEnAngular y dentro de la carpeta /app de nuestro proyecto, crearemos un nuevo pipe con ng generate pipe convertirEuroADolar ó más brevemente ng g p convertirEuroADolar.

//convertir-euro-adolar.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'convertirEuroADolar'
})
export class ConvertirEuroADolarPipe implements PipeTransform {

  transform(value: number, args?: any): any {
    const tasaCambio = 1.07
    return value * tasaCambio
  }

}

El pipe recibe un valor (el precio en euros) el cual será el que operará en este caso con la tasa de cambio que hemos establecido como un valor constante, por otro lado retornaremos el producto del valor por la tasa de cambio para obtener en la vista el precio en dolares.

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  producto = {
    nombre: "computadora",
    precio: 188
  }
}
<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Pipes Personalizados en Angular
  </h1>
</div>
<h2>Convertir Euro a Dolar: </h2>
<p>Producto: {{ producto.nombre }}</p>
<p>Precio: {{ producto.precio | convertirEuroADolar }}</p>

Por otra parte también podemos utilizar más de 1 pipe a la vez, en este ejemplo utilizaremos uno de los pipes por defecto que existen en angular, este sería el pipe number, el cual usaremos en este caso para truncar los decimales del precio final del producto.

<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Pipes Personalizados en Angular
  </h1>
</div>
<h2>Convertir Euro a Dolar: </h2>
<p>Producto: {{ producto.nombre }}</p>
<p>Precio: {{ producto.precio | convertirEuroADolar | number }}</p>

Y todo se hace mucho más interesante cuando podemos enviar parámetros a través de nuestro pipe.

//convertir-euro-adolar.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'convertirEuroADolar'
})
export class ConvertirEuroADolarPipe implements PipeTransform {

  transform(value: number, tasaCambio: number): any {
    return value * tasaCambio
  }

}
//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  producto = {
    nombre: "computadora",
    precio: 188
  }
  tasaCambio = 1.07
}
<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Pipes Personalizados en Angular
  </h1>
</div>
<h2>Convertir Euro a Dolar: </h2>
<p>Producto: {{ producto.nombre }}</p>
<p>Precio: {{ producto.precio | convertirEuroADolar: tasaCambio | number }}</p>

Declaramos nuestra variable tasaCambio dentro de nuestro archivo de componente app.component.ts, luego agregamos un nuevo parámetro de tipo number (tasaCambio: number) al método transform de nuestro pipe. Y finalmente agregamos el parámetro a la llamada de nuestro pipe (convertirEuroADolar: tasaCambio) en el archivo html de nuestro componente app.component.html.

Puedes encontrar el código fuente de este proyecto y estos ejemplos en este repositorio de github.

Compartir:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *