Cómo crear pipes custom en Angular

Los "pipes" son una característica esencial en Angular que posibilita la transformación de la salida de un componente o directiva. Aunque los "pipes" incorporados en Angular proporcionan una amplia gama de funcionalidades, hay ocasiones en las que se requiere la creación de un "pipe" personalizado para llevar a cabo una transformación que no está disponible de forma predeterminada.

Creando un pipe personalizado

Para crear un pipe personalizado, primero debemos ejecutar el siguiente comando en nuestra terminal

ng g pipe my-pipe

Esta interfaz tiene un solo método, transform, que recibe el valor de entrada del pipe un argumento y debe devolver el valor transformado.

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

@Pipe({
  name: 'myPipe'
})
export class CustomCurrencyPipe implements PipeTransform {

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

}

Una vez que hemos generado el pipe, podemos registrarlo en nuestra aplicación Angular. Podemos hacerlo en el archivo app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyPipe } from './pipes/my-pipe';

@NgModule({
  declarations: [
    AppComponent,
    MyPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora que hemos registrado el pipe, podemos utilizarlo en las plantillas. Para ello, utilizamos el símbolo de pipe (|) seguido del nombre del pipe.

<p>{{ value | myPipe }}</p>

En este ejemplo, el pipe myPipe se utilizará para transformar el valor value.

---

Ejemplos de pipes personalizados

Aqui un ejemplo de un pipe para el formato moneda para usd, eur y cop:

codesandbox.io

Crear pipes personalizados es una forma sencilla de añadir funcionalidad personalizada a nuestras aplicaciones Angular. Con un poco de esfuerzo, podemos crear pipes que se adapten a nuestras necesidades específicas.