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.