¿Qué son los Pipes?

Las pipes son una especie de tuberías que nos permitirán editar el formato con el que presentamos los valores de variables u objetos que recibimos desde el TypeScript del componente  gracias al binding de String interpolation mostrándolo un formato personalizado en nuestro template y sin ser modificado en el TypeScript de nuestro componente.

Para utilizar un pipe utilizamos la siguiente estructura:  {{value | pipeAUtilizar}}

Un ejemplo podría ser una conversión hacía dólares de la siguiente manera:

Los pipes nos permiten por tanto transformar visualmente nuestros datos, de esta manera podemos mostrar datos con una mejor experiencia de usuario

¿Porque trabajar con Pipes?

La principal ventaja de utilizar  pipes es que te nos vamos a ahorrar mucho código en los componentes, ya que podemos reutilizar código y no tener que escribir tanto código dentro de nuestros componentes facilitará la lectura además del mantenimiento de dicho componente.

Tipos de Pipes:

Dentro de los pipes existen dos tipos:

  • Los pipes predefinidos (Built-in): vienen por defecto en Angular.
  • Los pipes customizados (Custom): existe la posibilidad de crear nuestros propios Pipes que se adapten a nuestras necesidades.

Pipes predefinidos

Existen multitud de pipes en Angular, podéis encontrar más información en su en la web oficial de Angular

Vamos a ver nosotros algunos de ellos (aunque no todos).

UpperCasePipe:

Nos mostrará el valor del binding de String Interpolation en mayúsculas. Pero no modifica el valor de nombre en el componente o en la vista . Sino que lo hace solamente para la presentación de nuestro String Interpolation que va acompañado de dicho pipe.

LowerCasePipe:

Nos mostrará el valor del binding de String Interpolation en minúsculas.

KeyValuePipe:

Hasta ahora hemos estado trabajando siempre con String Interpolation, pero también podemos utilizarlo con alternativas como por ejemplo un *ngFor. KeyValuePipe, transforma Objeto o Mapa en una matriz de pares clave-valor.

Vamos a ver un ejemplo:

Incluso podríamos hacer cosas como esta con muy poco esfuerzo:

JsonPipe:

Convierte el valor en un formato JSON, en nuestro caso un objeto:

CurrencyPipe

Aunque ya hemos trabajado con el currencyPipe, otro ejemplo de este tipo de dato podría ser el siguiente:

Incluso podríamos sacar el símbolo de euros mediante al Pipe de currency:

Cada uno de los pipes que existen como el de currency son un mundo y podemos buscar mucha información de cómo funcionan para la función en concreto que queremos realizar con él.

Un ejemplo de ello, podría ser el poner la divisa que nos muestra el pipe en el lado derecho. Para ello, realizaríamos lo siguiente:

El resultado será:

TitleCasePipe:

Nos permite transformar la primera letra de cada palabra a mayúsculas y el resto de la palabra a minúsculas.

Un ejemplo podría ser:

DatePipe:

Nos permite formatear fechas:

SlicePipe:

Nos permite crear subconjuntos (cortar) un String o un Array de elementos:

DecimalPipe:

Transforma un decimal en una cadena, formateada de acuerdo con las reglas que le establecemos.

La regla la definimos de la siguiente manera:

  • El primer número nos permite definir la cantidad de números enteros.
  • El segundo número nos permite definir la cantidad mínima de números decimales.
  • El tercer número nos permite definir la cantidad máxima de números decimales.

Los números van separados entre si con un .

Vamos a ver otro ejemplo:

Espero que os haya gustado. Un saludo 🙂