¿Qué son los pipes de Angular?

¿Qué es un pipe en Angular?

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 en Angular?

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 de Angular?

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.

Importamos una constante llamada LOCALE_ID desde el paquete @angular/core.

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 en Angular?

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: