El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

En Angular, los pipes son una forma poderosa de transformar datos en plantillas. Los pipes personalizados permiten a los desarrolladores crear transformaciones específicas que no están disponibles en los pipes integrados. En esta sección, aprenderemos cómo crear y utilizar pipes personalizados en Angular.

¿Qué es un Pipe?

Un pipe toma datos como entrada y los transforma en una salida deseada. Angular proporciona varios pipes integrados, como DatePipe, UpperCasePipe, LowerCasePipe, etc. Sin embargo, a veces necesitamos una transformación específica que no está cubierta por los pipes integrados. Aquí es donde entran los pipes personalizados.

Creación de un Pipe Personalizado

Paso 1: Generar un Pipe

Angular CLI facilita la creación de un pipe personalizado. Utiliza el siguiente comando para generar un nuevo pipe:

ng generate pipe custom

Este comando crea dos archivos: custom.pipe.ts y custom.pipe.spec.ts. El archivo custom.pipe.ts contiene la lógica del pipe, mientras que custom.pipe.spec.ts es para pruebas unitarias.

Paso 2: Implementar la Lógica del Pipe

Abre el archivo custom.pipe.ts y define la lógica del pipe. Supongamos que queremos crear un pipe que convierta un texto a formato de título (capitaliza la primera letra de cada palabra).

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

@Pipe({
  name: 'titleCase'
})
export class TitleCasePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    return value.replace(/\w\S*/g, (txt) => {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }

}

Paso 3: Registrar el Pipe en el Módulo

Para usar el pipe en tu aplicación, debes registrarlo en el módulo correspondiente. Abre el archivo app.module.ts y añade el pipe a la lista de declaraciones.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TitleCasePipe } from './title-case.pipe';

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

Paso 4: Usar el Pipe en una Plantilla

Ahora puedes usar el pipe titleCase en cualquier plantilla de tu aplicación.

<p>{{ 'hello world' | titleCase }}</p>

La salida será:

<p>Hello World</p>

Ejercicio Práctico

Ejercicio 1: Crear un Pipe de Inversión de Texto

Objetivo: Crear un pipe personalizado que invierta el texto de una cadena.

Pasos:

Genera un nuevo pipe llamado reverse.
Implementa la lógica para invertir el texto.
Registra el pipe en el módulo.
Usa el pipe en una plantilla para mostrar el texto invertido.

Solución:

Generar el pipe:

ng generate pipe reverse

Implementar la lógica:

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    return value.split('').reverse().join('');
  }

}

Registrar el pipe en el módulo:

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

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

Usar el pipe en una plantilla:

<p>{{ 'hello world' | reverse }}</p>

La salida será:

<p>dlrow olleh</p>

Errores Comunes y Consejos

No registrar el pipe en el módulo: Asegúrate de añadir el pipe a la lista de declaraciones en el módulo correspondiente.
No manejar valores nulos o indefinidos: Siempre verifica si el valor de entrada es nulo o indefinido antes de aplicar la transformación.
No usar el decorador @Pipe: Asegúrate de usar el decorador @Pipe para definir el nombre del pipe.

Conclusión

Los pipes personalizados en Angular son una herramienta poderosa para transformar datos en plantillas de manera específica y reutilizable. En esta sección, hemos aprendido cómo crear, registrar y utilizar pipes personalizados, así como algunos errores comunes y consejos para evitarlos. Con esta base, puedes crear pipes personalizados que se adapten a las necesidades específicas de tu aplicación.

Pipes Personalizados

Introducción

¿Qué es un Pipe?

Creación de un Pipe Personalizado

Paso 1: Generar un Pipe

Paso 2: Implementar la Lógica del Pipe

Paso 3: Registrar el Pipe en el Módulo

Paso 4: Usar el Pipe en una Plantilla

Ejercicio Práctico

Ejercicio 1: Crear un Pipe de Inversión de Texto

Errores Comunes y Consejos

Conclusión

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas