9.Pipes

Objetivo

Aprender a utilizar pipes en Angular para transformar datos en las plantillas.

Ejemplo de Pipe Incorporado

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<p>{{ today | date:'fullDate' }}</p>

Crear un Pipe Personalizado

En la terminal, navega al directorio del proyecto y ejecuta:

ng generate pipe my-custom

Esto generará un nuevo pipe llamado my-custom en tu proyecto.

Editar el Pipe Personalizado

Abre src/app/my-custom.pipe.ts y agrega la lógica para transformar los datos:

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

@Pipe({
  name.'myCustom'
})
export class MyCustomPipe implements PipeTransform {
  transform(value.string).string {
    return value.toUpperCase();
  }
}

Usar el Pipe Personalizado en un Componente

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<p>{{ 'hola mundo' | myCustom }}</p>

Conceptos Básicos

Los pipes en Angular permiten transformar datos en las plantillas. Los pipes incorporados, como date y currency, proporcionan transformaciones comunes. Los pipes personalizados permiten definir transformaciones específicas.

Ejercicio

Utiliza pipes incorporados y personalizados en tu proyecto Angular para transformar datos en las plantillas. Verifica que las transformaciones se apliquen correctamente en el navegador.