Qué es y cómo usar los pipes en Angular

Qué es un pipe

Un pipe es una herramienta que nos permite modificar o transformar la información presentada en pantalla.


La data de la información no se modifica, sólo se transforma y se presenta de una determinada manera pero es sólo a efectos de presentación.


Si deseas profundizar, lo puedes hacer en la documentación oficial.

¿Cómo se usan los pipes?

Es muy fácil, a continuación de la variable, se escribe el carácter | (en mi teclado se escribe pulsando en alt + 1) que lo puedes ver como un conducto, pipe en inglés y a continuación el pipe

Por ejemplo, imagina que quieres poner un string en mayúsculas, pues para ello:

¿Cuales son los pipes por defecto?

  • Uppercase y lowercase

    Son muy descriptivos, es decir, pasan un string a mayúsculas o minúsculas

  • Slice

    El slice es un pipe que requiere mínimo un parámetro.

    Con un parámetro

    El parámetro que pongamos será el carácter hasta el que cortará el string. Por ejemplo:

    Devolverá ariable

    Con dos parámetros

    El primer parámetro recoge desde donde queremos empezar a cortar, y el segundo parámetro es hasto dónde queremos cortar

  • Decimal

    Este pipe se utiliza para dar formato a números y decimales

    Personalmente, cada vez que lo tengo que usar tengo que mirar qué es lo que hace cada parámetro.

    Lo sé, el pipe se llama decimal pero se usa la palabra clave number, es lo que hay.

    • N1 es la cantidad de números enteros
    • N2 es la cantidad mínima de números decimales
    • N3 es la cantidad máxima de números decimales
  • Percent

    • N1 es la cantidad de números enteros. Por defecto 1
    • N2 es la cantidad mínima de números decimales. Por defecto 0
    • N3 es la cantidad máxima de números decimales. Por defecto 0
  • Currency

    Utiliza de referencia el documento ISO 4217, una lista con el código asociado a cada divisa.

    Por defecto aparecerán $, pero admite parámetros:

    • currencyCharacter --> lo podemos encontrar en el ISO 4217. Son los EUR, USD, etc.
    • symbol/code --> o uno u otro.
      • N1 = 1 (valor por defecto) --> cantidad de números enteros
      • N2 = 2 (valor por defecto) --> cantidad mínima de números decimales
      • N3 = 2 (valor por defecto) --> cantidad máxima de números decimales
  • Json

    Es especialmente útil cuando queremos mostrar objetos JSON en el navegador, porque si intentamos mostrarlos sin este pipe, lo único que veremos será [object Object]

    El pipe Json se uso normalmente con la etiqueta HTML pre

  • Async

    Nos permite mostrar información proveniente de código basado en promises u observables.

  • Date

    En la documentación oficial puedes encontrar los detalles

    Un ejemplo:


    El pipe date por defecto está en inglés. Para mostrarlo en cualquier otro idioma, como el español, debemos hacer una pequeña configuración en el módulo app.module.ts.

    1. Importamos una constante llamada LOCALE_ID desde el paquete @angular/core.
    2. En el array providers, añadimos un objeto donde especificaremos el idioma. Debemos también importar el idioma y el módulo para registrar dicho idioma. Así nos queda el archivo app.module.ts:

¿Cómo se crea un pipe personalizado?

Haremos uso del Angular CLI, escribiendo el siguiente comando:

La línea anterior creará un fichero mi_pipe.pipe.ts en la carpeta src/app/pipes

Por defecto, el Angular CLI importará este fichero al app.module.ts, no es buena práctica. Lo ideal será que te crees un módulo distinto para los pipes y que ahí los tengas todos y así sólo importar el módulo de los pipes en el app.module.ts

Para crearte un módulo para los pipes:

La línea anterior creará un módulo llamado pipes.module.ts en la carpeta de pipes, por eso pongo el flag de --flat, para que no cree un nuevo directorio.

En el nuevo módulo pipes.module.ts importaré el pipe y también lo exportaré para que esté disponible fuera del módulo. El fichero debería quedar así:

No necesito el CommonModule proque no usaremos ninguna directiva en los pipes


Cuando Angular CLI crea un pipe, el fichero que te crea por defecto es:

Si yo quisiera que mi pipe transformara una cadena tipo string dependiendo de una categoria que fuera del tipo categoria1 o categoria2 o categoria3 y dijera hola mundo cadena categoría sería:

En el HTML habría que poner:

El primer parámetro del pipe será lo que hay antes del símbolo | y el segundo lo que hay detrás del nombre del pipe en este caso miPipe y los :



Puedes obtener más detalles en la documentación oficial


Saludos,

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría