13.02.2021 a las 12:32
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.
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 }}
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.
{{ 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
{{ 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.
Percent
{{ mi_variable | percent: '(string con 3 valores numéricos) N1.N2-N3' }}
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' }}
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.
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 { }
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 🖖
Software
IoT
Digitalización
Aplicaciones móviles
Consultoría