Creación de pipes personalizados
Cree pipes de transformación reutilizables.
Creación de pipes personalizados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Por qué usar pipes personalizados?
Cuando los pipes integrados no son suficientes, puede crear un pipe personalizado para encapsular lógica de transformación reutilizable en sus plantillas.
El decorador @Pipe
Un pipe es una clase decorada con @Pipe. La propiedad name es la que utiliza en las plantillas.
import { Pipe } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}Implementar PipeTransform
Una clase de pipe implementa la interfaz PipeTransform, que requiere un único método transform.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string): string {
return value + "!";
}
}El método transform
El primer parámetro de transform es el valor que pasa por el pipe. Todo lo que devuelva se convertirá en la salida renderizada.
transform(value: string): string {
return value.trim();
}Usar su pipe
Importe el pipe en un componente independiente y utilice su nombre en la plantilla, igual que haría con un pipe integrado.
@Component({
selector: "app-demo",
standalone: true,
imports: [ExclaimPipe],
template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!Aceptar argumentos
Los parámetros adicionales después de value se convierten en argumentos del pipe. Los llamadores los pasan mediante dos puntos.
@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
transform(value: string, times: number): string {
return value.repeat(times);
}
}
// {{ "ab" | repeat:3 }} -> abababValores de argumentos predeterminados
Asigne valores predeterminados a los argumentos para que los llamadores puedan omitirlos. Esto mantiene la flexibilidad de su pipe.
transform(value: string, times: number = 2): string {
return value.repeat(times);
}
// {{ "ab" | repeat }} -> ababGestionar null y undefined
Proteja siempre el código frente a entradas ausentes. Devuelva un valor alternativo adecuado cuando el valor sea null o undefined.
transform(value: string | null): string {
if (value == null) return "";
return value.toUpperCase();
}Ejemplo de un pipe de truncamiento
Aquí tiene un pipe práctico que acorta el texto largo y añade puntos suspensivos.
@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 20): string {
if (!value) return "";
return value.length > limit
? value.slice(0, limit) + "..."
: value;
}
}Tipar el valor devuelto
Anote el tipo de retorno para que TypeScript y sus plantillas mantengan la seguridad de tipos. Un pipe puede devolver cualquier tipo, no solo cadenas.
@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
transform(value: number): number {
return value * 2;
}
}Registrar en un módulo (NgModule)
Si utiliza NgModules en lugar de componentes independientes, declare el pipe en declarations y expórtelo si es necesario.
@NgModule({
declarations: [TruncatePipe],
exports: [TruncatePipe]
})
export class SharedModule {}Comprobación rápida
Compruebe su comprensión de los pipes personalizados.
Resumen
Ha creado un pipe personalizado con @Pipe y PipeTransform, ha aceptado argumentos con valores predeterminados, ha protegido el código frente a null y lo ha registrado en componentes independientes o NgModules.
A continuación, aprenderá sobre los pipes puros e impuros.
Preguntas frecuentes
¿La lección «Creación de pipes personalizados» es gratis?
Sí — el texto completo de «Creación de pipes personalizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de pipes personalizados»?
Cree pipes de transformación reutilizables. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Creación de pipes personalizados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Uso de pipes integrados
- Encadenamiento y parametrización de pipes
- Creación de pipes personalizados
- Pipes puros frente a impuros