DEV Community

Cover image for Cómo crear pipes custom en Angular
Danniel Navas
Danniel Navas

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
  }

}

Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

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.

Warp.dev image

Warp is the highest-rated coding agent—proven by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

Top comments (0)

Developer-first embedded dashboards

Developer-first embedded dashboards

Embed in minutes, load in milliseconds, extend infinitely. Import any chart, connect to any database, embed anywhere. Scale elegantly, monitor effortlessly, CI/CD & version control.

Get early access

👋 Kindness is contagious

Dive into this thoughtful piece, beloved in the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A sincere "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay