Skip to main content

Pipes

Los Pipes en Angular son funciones que transforman datos en las plantillas de una manera rápida y sencilla. Estos pipes son "funciones puras", lo que significa que no generan efectos secundarios, sino que toman un valor de entrada, lo transforman y devuelven un resultado. Angular incluye varios pipes integrados que podemos importar y utilizar, y también permite crear pipes personalizados según nuestras necesidades.

Ejemplo: Transformación de Datos con Pipes Integrados​

Supongamos que queremos mostrar un mensaje en mayúsculas. Para esto, usaremos el pipe uppercase, que convierte el texto a mayúsculas.

Paso 1: Importar el Pipe en el Componente​

Primero, importemos UpperCasePipe desde @angular/common:

import { UpperCasePipe } from '@angular/common';

Paso 2: Agregar el Pipe en la Configuración del Componente​

Luego, debemos declarar el pipe en la propiedad imports del decorador @Component() para que esté disponible en la plantilla del componente:

@Component({
    ...
    template: `{{ loudMessage | uppercase }}`,
    imports: [UpperCasePipe],
})
class AppComponent {
    loudMessage = 'we think you are doing great!';
}

En este ejemplo, {{ loudMessage | uppercase }} aplica el pipe uppercase a la propiedad loudMessage, transformando el texto a mayúsculas, y el resultado en la plantilla sería: "WE THINK YOU ARE DOING GREAT!".

Tu Turno: Usando el Pipe lowercase​

Intentemos transformar un texto a minúsculas usando el pipe lowercase:

Paso 1: Importar el Pipe LowerCasePipe​

Para esto, importemos LowerCasePipe desde @angular/common:

import { LowerCasePipe } from '@angular/common';

Paso 2: Agregar el Pipe a la Configuración del Componente​

Añadimos el pipe en la configuración del decorador @Component() para habilitarlo en la plantilla:

@Component({
    ...
    imports: [LowerCasePipe]
})

Paso 3: Usar el Pipe en la Plantilla​

Finalmente, actualicemos la plantilla para aplicar el pipe lowercase en la propiedad username:

@Component({
    ...
    template: `{{ username | lowercase }}`
})
class AppComponent {
    username = 'ANGULAR DEV';
}

Aquí, {{ username | lowercase }} convierte el valor de username a minúsculas, y el resultado en la plantilla será: "angular dev".

Los pipes son herramientas versátiles que permiten manipular datos directamente en la plantilla de manera sencilla. Además de los pipes integrados como uppercase y lowercase, Angular permite configurar parámetros en algunos pipes y crear pipes personalizados para transformar datos de acuerdo con necesidades específicas.