En el artículo anterior, de Introducción a Pipes + trabajando con Pipes predefinidas ya vimos que son las Pipes, para que sirven, los tipos de pipes que tenemos, y como trabajar con las Pipes predefinidas.

Si hacemos repaso, podemos ver que podemos crear nuestras propias Pipes customizadas.

¡Vamos a crear nuestras propias Pipes!

Creando nuestras propias Pipes personalizadas

Acabamos de ver algunas de las Pipes que vienen predefinidas en Angular. Ahora, vamos a aprender a crear nuestras propias Pipes personalizadas.

Para ello, tenemos dos opciones:

  • Crearla de forma manual
  • Crearla mediante a una instrucción de @angular/cli

En este manual, veremos las dos maneras.

Creando nuestra primera Pipe personalizada de forma manual:

Para crear nuestras propias pipes vamos al directorio src>app y creamos un nuevo fichero:

Que tendrá la siguiente estructura: nombreDeLaPipe.pipe.ts

Y una vez creada, creamos la clase sobre la que importaremos nuestra interfaz PipeTransform y exportamos dicha clase para poder usarla dentro de nuestra aplicación:

Para que nuestro Pipe funcione correctamente necesitamos utilizar el decorador @Pipe, mediante el que definimos el nombre con el que será llamado dicho pipe en nuestro template.

Además añadimos el método transform ya que la interfaz Pipe transform nos obliga a utilizar dicho método. Sobre el que añadimos el valor que recibimos en nuestro caso será un string y simplemente por el momento, mostraremos un mensaje por la consola.

Una vez creada la Pipe, tenemos que ir a nuestro modulo para importarla (mediante al nombre del fichero sin la extensión .ts) de la siguiente manera:

Y ya la tenemos lista nuestra Pipe, ahora solamente nos falta ir a nuestro template para trabajar con ella:

Si vamos al navegador podemos ver que nos muestra el mensaje en la consola:

Ejercicio:

Bien, vamos a realizar un Pipe sobre una variable que contiene un nombre completo por ejemplo: Rocky Balboa y queremos que únicamente nos muestre el nombre sin el apellido, es decir, que nos muestre solo hasta justo antes de llegar al espacio.

Además vamos a pasarle argumentos para que podamos y si la llama es true devolverá el string inicial por consola, el string resultante y los argumentos.

El resultado será el mismo tanto si realizamos la llamado sin parámetros como con el  parámetro a false:

En cambio, si ponemos true, podemos ver que además nos va a dejar una traza en nuestra consola del navegador:

Creando nuestra primera Pipe personalizada con @angular/cli:

Para crear una pipe, desde la línea de comandos podemos utilizar las siguientes dos instrucciones:

ng generate pipe <name> [options]
ng g pipe <name> [options]

Vamos a ver un ejemplo. Para ello, vamos a nuestra terminal y escribimos cualquiera de las dos (con ambas obtendremos el mismo resultado):

Si nos fijamos, nos ha creado dos ficheros, el de la Pipe en sí y el de los test de dicha Pipe. Y además de ello, nos ha añadido dicha Pipe a nuestro módulo app.module.ts para que una vez tengamos nuestro código picado ya la tengamos lista para funcionar.

Ejemplo:

Si escribimos un nombre y no indicamos le pasamos parámetros al Pipe, este mostrará el nombre. En caso de pasarle un número como parámetro, el string se cortará por dicho parámetro:

Si no le pasamos parámetro, podemos ver que muestra el nombre al completo:

Esto es todo por hoy, espero que os haya gustado. Un saludo y hasta la próxima 🙂