Introducción

Imaginemos que desde Angular hacemos llamadas a una API y en una de esas llamadas recibimos un string con una fecha, por ejemplo, ‘Fri Apr 15 1988 00:00:00 GMT-0700’ Si queremos pintar esa fecha en la vista pero con otro formato, podemos transformarlo directamente cuando venga de la API para guardar la fecha con el formato que queremos para después pintarlo en la vista, pero si este nuevo formato de fecha solo lo necesitamos para su visualización podemos usar las pipes.

Las pipes son etiquetas que se ponen al visualizar una variable en un template para transformar el valor de la variable que se está imprimiendo.

Cómo usar las pipes

Los pipes se usan poniendo el carácter | al pintar una variable, por ejemplo podemos poner:

{% raw %}

  {{ 'BBBBB' | lowercase }}

{% endraw %}

Y lo que imprimirá será: bbbbb

También se pueden combinar varias pipes, por ejemplo:

{% raw %}

{{ 459.67 | currency: 'USD' | lowercase }}

{% endraw %}

Lo que imprimirá: $459.67 (se han aplicado las dos pipes, pero en este caso, no hay letras para ponerlas en minúsculas).

Pipes por defecto

Angular ya viene con varias pipes listas para usarse:

{% raw %}

  {{ 345.76 | currency: 'EUR' }}

{% endraw %}

Lo que imprimira: €345.76

{% raw %}

  {{myVar | date: 'shortDate'}}

{% endraw %}

myVar es una variable creada en el componente de tipo Date.

Los formatos de fecha que podemos pasarle a estas pipes son:

También podemos pasar directamente el formato que queremos:

{% raw %}

  {{myVar | date: 'M/d/yy'}}

{% endraw %}

{% raw %}

  {{ 3.14159265 | number: '3.1-2' }}</p>

{% endraw %}

Indicamos que queremos 3 números antes de la coma y de 1 a 2 elementos tras la coma, lo cual imprimira: 003.14

{% raw %}

  <p>{{ myVal | json }}</p>

{% endraw %}

myVal es la variable del componente en la que guardamos el JSON. Esta pipe imprimirá:

{ moo: 'foo', goo: { too: 'new' }}

{% raw %}

  <p>{{ 'prueba' | uppercase }}</p>

{% endraw %}

{% raw %}

  <p>{{ 'PRUEBA' | lowercase }}</p>

{% endraw %}

{% raw %}

   <p>{{ 0.38679 | percent: '2.1-2' }}</p>

{% endraw %}

Lo que imprimirá: 38.68%

{% raw %}

   <p>{{ [1,2,3,4,5,6] | slice:1:3 }}</p>

{% endraw %}

El resultado será: 2,3

Pipes personalizadas

Si queremos hacer algo más específico, también podemos crear nuestra propia pipe. Para crear pipes, Angular cli viene con un comando para crearlas directamente:

ng generate pipe

Aunque también podemos crearlas a mano por ejemplo, creando un archivo llamado reversed.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reversed'})
export class ReverseStr implements PipeTransform {
  transform(value: string): string {
    let newStr: string = "";
    for (var i = value.length - 1; i >= 0; i--) {
      newStr += value.charAt(i);
    }
    return newStr;
  }
}

Como ves, primero importamos Pipe y PipeTransform desde Angular core. Con la anotación @Pipe creamos la pipe y le asignamos un nombre, el cual pondremos en el html para usar esta pipe que estamos creando. Con el método transform declaramos una variable que será la que venga desde el html, es decir, la variable sobre la que se aplica la pipe. Si queremos pasar párametros a la pipe desde el html como en las pipes anteriores, tenemos que declararlas en el transform también. A continuación hacemos la transformación que queramos a la variable y hacemos un return con la variable nueva.

Para usar esta pipe que acabamos de crear debemos importarla en la sección imports del app.module.ts

Por último para usarla en cualquier vista, simplemente creamos la pipe con el nombre que le dimos y listo:

{% raw %}

{{ variable | reversed }}

{% endraw %}

Conclusiones

Todas las transformaciones que haces en las pipes las puedes hacer en un método en el componente, pero de ésta forma, se hace más rápido y el código queda limpio. Además si creamos nuestras propias pipes las podemos usar en todos los componentes de la app, lo que facilita la mantenibilidad del código y hace que la aplicación sea más testeable.

Como recomendación, recomiendo tener todas las pipes localizadas en archivos dentro de una misma carpeta, por ejemplo, en un carpeta llamada pipes.

Las pipes también se pueden usar con Observables y con Promises, permitiendo que no tengas que hacer subscribe manualmente a a los observales, en la mayoría de los casos. Te dejo un par de artículos por si te interesa aprender sobre esta funcionalidad:




También te puede intersar...