Los pipes son una de las utilidades que nos ofrece Angular para realizar transformaciones de los datos, a la hora de mostrarlos en los templates de los componentes. Son muy útiles en inmensas situaciones y usarlos es muy sencillo.

Crear pipes requiere unos conocimientos extra pero con los detalles que te vamos a explicar no vas a tener ningún problema.

Cómo usar pipes en Angular

Angular ya tiene incorporados algunos pipes de uso habitual que podemos implementar cómodamente para comenzar a experimentar con esta utilidad.

Un pipe muy útil para debugear lo que te llegan en los objetos que recibes de los servicios web es "json". Seguramente lo hayas usado ya. Dentro de un template lo puedes implementar con el carácter de tubería, indicando después de la tubería el nombre del pipe que deseas usar.

<pre>{{users | json}}</pre>

Suponiendo que "users" es un array de objetos usuario, este pipe te mostrará la cadena de su representación JSON.

Usar el pipe date

Vamos a ver un ejemplo un poco más completo de uso de pipes para mostrar fechas de manera más adecuada para nuestros usuarios. El pipe en cuestión se llama "date" y está integrado dentro de Angular.

Vamos a tener un componente que declara una fecha como propiedad, con la fecha del día, en el atributo "hoy".

@Component({
  selector: 'app-usar-pipes',
  templateUrl: './usar-pipes.component.html',
  styleUrls: ['./usar-pipes.component.css']
})
export class UsarPipesComponent implements OnInit {

  hoy = new Date();

  constructor() { }

  ngOnInit(): void {
  }

}

Ahora, en el template del componente, vamos a mostrar la fecha con el pipe date, de esta manera:

<p>Hoy es {{ hoy | date }}</p>

Enviar datos a los pipes

Los pipes pueden recibir datos adicionales para realizar su trabajo de manera determinada. Para ello indicamos el nombre del pipe, seguido de el caracter dos puntos ":" y luego el dato que le queremos pasar al pipe.

El pipe "date" permite indicarle como dato extra el formato de la fecha que queremos mostrar, por ejemplo para indicarle que la fecha la muestre tal como estamos acostumbrados en español.

<p>Hoy es {{ hoy | date:"dd/MM/yy" }}</p>

Cómo crear nuestros propios pipes

Con lo que hemos visto ya conoces lo básico para usar pipes en Angular. Sin embargo la gracia es que puedas crear pipes en Angular por ti mismo, para poder hacer las transformaciones que sean necesarias en tus aplicaciones.

En este ejemplo vamos a hacer un pipe que permita filtrar usuarios de un array de usuarios que podemos recibir desde un API cualquiera.

Generar el scaffolding del pipe

Para crear un pipe comenzamos generando el esqueleto de la clase, con el comando siguiente:

ng generate pipe nombre

A continuación podemos ver cómo, además de crearse dos archivos "nombre.pipe.ts" y "nombre.pipe.spec.ts", se ha editado el módulo de la aplicación, generando el código necesario para usar el pipe en ella.

En app.module.ts encontrarás el import del pipe:

import { NombrePipe } from './nombre.pipe';

Además en el array declarations estará incluido el pipe recién creado.

declarations: [
  AppComponent,
  NombrePipe,
  // ...
],

Crear el código para realizar la transformación del pipe

Ahora vamos a ver el código de nuestro pipe, que nos sirve para filtrar usuarios de un array, encontrando coincidencias de una cadena de búsqueda en su nombre.

Todo pipe tiene un método "transform", que recibe siempre el valor de entrada del pipe. Adicionalmente recibirá datos extra que el pipe necesite para operar. En nuestro caso como valor de entrada recibiremos un array y como dato extra recibiremos la cadena que se desea buscar en el atributo nombre de los objetos de ese array.

Veamos el código del pipe:

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

@Pipe({
  name: 'nombre'
})
export class NombrePipe implements PipeTransform {

  transform(value: any[], query: string): unknown {
    if(query === '' || query === undefined) {
      return value;
    }
    return value.filter(user => user.name.toLowerCase().indexOf(query) != -1)
  }

}

Como puedes ver, lo primero que hacemos es comprobar si la consulta recibida en el parámetro query está vacía o es igual a undefined. En ese caso devolvemos el objeto de usuarios, tal cual.

Si tenemos alguna consulta en el parámetro query, entonces realizamos el filtrado de usuarios mediante la búsqueda de esos caracteres en el atributo "name". Devolvemos finalmente el array filtrado.

Usar el pipe que hemos creado

Ahora vamos a usar ese pipe. Para ello tenemos un componente que recibe unos usuarios desde un servicio. Esos usuarios los almacena en la propiedad "users". Además tenemos otra propiedad de tipo cadena que se llama "query".

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../users.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users = [];
  query = '';

  constructor(private usersService: UsersService) { }

  ngOnInit(): void {
    this.usersService.getUsers().subscribe(
        users => this.users = users
      )
  }

}

El template del componente hace uso del pipe que acabamos de crear, pero además tiene un campo de texto donde se puede escribir algo para realizar el filtrado. El campo de texto está asociado con la propiedad query del componente, de modo que cada vez que se escriba algo nuevo, se realice el filtrado entre los usuarios recibidos.

<p>
  Escribe el filtrado de usuarios: <input type="text" [(ngModel)]="query">
</p>

<pre>{{users | nombre:query | json}}</pre>

Fíjate que el listado de usuarios se muestra finalmente en el template como un JSON. Pero primero se aplica el filtrado por el nombre "nombre:query" y luego el pipe para convertir el array en un JSON. Como puedes ver, es perfectamente posible encadenar varios pipes de Angular si fuera necesario para conseguir varias transformaciones.

Conclusión

Los pipes son una herramienta indispensable para sacar todo el poder de Angular y conseguir transformaciones de los datos a la hora de mosrarlos en los templates. Usar pipes es inmediato, pero crearlos también resulta bastante sencillo.

En este artículo hemos podido hacer varios ejemplos con pipes. Si lo deseas puedes ver el código completo de la aplicación Angular de ejemplo en GitHub en este enlace: https://github.com/deswebcom/pipes-en-angular