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

  {{ mi_variable | thePipe }}
  

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

  {{ mi_string | uppercase }}
  

¿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

    {{ mi_variable | slice:param }}
    

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

    {{ mi_variable | slice:3 }}
    

  Devolverá ariable

  Con dos parámetros

    {{ mi_variable | slice:paramOne:paramTwo }}
    

  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.

    {{ mi_variable | number: '(string con 3 valores numéricos) N1.N2-N3' }}
    

  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

    {{ mi_variable | percent: '(string con 3 valores numéricos) N1.N2-N3' }}
    

  • 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.

    {{ mi_variable | currency }}
    

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

    {{ mi_variable | currency:'currencyCharacter':'symbol/code':N1.N2-N3' }}
    

  • 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

    <div class="terminal"><pre>{{ mi_json | json }} </pre>
    

• Async

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

    {{ mi_variable | async }}
    

• Date

    {{ myVar | date:'parameter' }}
    

  En la documentación oficial puedes encontrar los detalles

  Un ejemplo:

    {{ mi_fecha date:'dd/MM/yyyy' }}
    

  
  

  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:

       import { BrowserModule } from '@angular/platform-browser';
       import { LOCALE_ID, NgModule } from '@angular/core';
     
       import { AppComponent } from './app.component';
     
       import localeEs from '@angular/common/locales/es';
       import { registerLocaleData } from '@angular/common';
       registerLocaleData(localeEs);
     
       @NgModule({
         imports: [BrowserModule],
         declarations: [AppComponent],
         providers: [{ provide: LOCALE_ID, useValue: 'es' }],
         bootstrap: [AppComponent]
       })
       export class AppModule { }
       

¿Cómo se crea un pipe personalizado?

Haremos uso del Angular CLI, escribiendo el siguiente comando:

ng g pipe pipes/mi_pipe --skip-tests

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:

ng g m pipes/pipes --flat

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í:

  import { MiPipePipe } from './mi-pipe.pipe';
  import { NgModule } from '@angular/core';

  @NgModule({
    declarations: [MiPipePipe],
    exports:[MiPipePipe],
  })
  export class PipesModule { }

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:

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

@Pipe({
  name: 'miPipe'
})
export class MiPipePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

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:

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

@Pipe({
  name: 'miPipe'
})
export class MiPipePipe implements PipeTransform {

  transform(cadena: string, categoria: 'categoria1' | 'categoria2' | 'categoria3'): string {
    return 'hola mundo ' + cadena + ' ' + tipo;
  }
}

En el HTML habría que poner:

{{ cadena | miPipe: 'categoria1'}}

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

Hasta luego 🖖