En Angular, los pipes son una forma poderosa de transformar datos en plantillas. Los pipes incorporados proporcionan funcionalidades comunes que puedes usar directamente en tus aplicaciones sin necesidad de escribir código adicional. En esta sección, exploraremos los pipes más utilizados y cómo aplicarlos en tus componentes.
¿Qué es un Pipe?
Un pipe toma datos como entrada y los transforma antes de mostrarlos en la vista. Los pipes se utilizan en las plantillas de Angular y se denotan con el símbolo |.
Sintaxis Básica
Pipes Incorporados Comunes
- DatePipe
El DatePipe se utiliza para formatear fechas. Puedes especificar diferentes formatos de fecha según tus necesidades.
Ejemplo
Explicación
fechaActuales una variable en tu componente que contiene una fecha.date:'fullDate'formatea la fecha en un formato completo (por ejemplo, "Monday, January 1, 2023").
Formatos Comunes
| Formato | Descripción | Ejemplo |
|---|---|---|
'short' |
Fecha y hora corta | 1/1/23, 1:00 PM |
'medium' |
Fecha y hora media | Jan 1, 2023, 1:00:00 PM |
'long' |
Fecha y hora larga | January 1, 2023 at 1:00:00 PM GMT+1 |
'fullDate' |
Fecha completa | Monday, January 1, 2023 |
'shortDate' |
Fecha corta | 1/1/23 |
'mediumDate' |
Fecha media | Jan 1, 2023 |
'longDate' |
Fecha larga | January 1, 2023 |
- UpperCasePipe y LowerCasePipe
Estos pipes se utilizan para convertir cadenas de texto a mayúsculas o minúsculas.
Ejemplo
<p>Texto en mayúsculas: {{ 'hola mundo' | uppercase }}</p>
<p>Texto en minúsculas: {{ 'HOLA MUNDO' | lowercase }}</p>Explicación
uppercaseconvierte el texto a mayúsculas.lowercaseconvierte el texto a minúsculas.
- CurrencyPipe
El CurrencyPipe se utiliza para formatear números como monedas.
Ejemplo
Explicación
precioes una variable en tu componente que contiene un número.currency:'USD':trueformatea el número como una moneda en dólares estadounidenses, incluyendo el símbolo de la moneda.
Opciones Comunes
| Opción | Descripción | Ejemplo |
|---|---|---|
'USD' |
Dólar estadounidense | $1,000.00 |
'EUR' |
Euro | €1,000.00 |
'GBP' |
Libra esterlina | £1,000.00 |
- DecimalPipe
El DecimalPipe se utiliza para formatear números decimales.
Ejemplo
Explicación
numeroes una variable en tu componente que contiene un número.number:'1.2-2'formatea el número con al menos 1 dígito entero, 2 dígitos decimales mínimos y 2 dígitos decimales máximos.
- PercentPipe
El PercentPipe se utiliza para formatear números como porcentajes.
Ejemplo
Explicación
porcentajees una variable en tu componente que contiene un número.percent:'1.0-2'formatea el número como un porcentaje con al menos 1 dígito entero y entre 0 y 2 dígitos decimales.
Ejercicio Práctico
Ejercicio
Crea un componente que muestre una lista de productos con su nombre, precio y fecha de lanzamiento. Utiliza los pipes uppercase, currency, y date para formatear los datos.
Paso 1: Crear el Componente
Paso 2: Definir los Datos en el Componente
// product-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
products = [
{ name: 'Producto A', price: 29.99, releaseDate: new Date(2023, 0, 1) },
{ name: 'Producto B', price: 49.99, releaseDate: new Date(2023, 1, 15) },
{ name: 'Producto C', price: 19.99, releaseDate: new Date(2023, 2, 20) }
];
}Paso 3: Utilizar los Pipes en la Plantilla
<!-- product-list.component.html -->
<ul>
<li *ngFor="let product of products">
<h2>{{ product.name | uppercase }}</h2>
<p>Precio: {{ product.price | currency:'USD':true }}</p>
<p>Fecha de lanzamiento: {{ product.releaseDate | date:'fullDate' }}</p>
</li>
</ul>Solución
Al ejecutar la aplicación, deberías ver una lista de productos con sus nombres en mayúsculas, precios formateados como moneda y fechas de lanzamiento en formato completo.
Conclusión
Los pipes incorporados en Angular son herramientas poderosas para transformar y formatear datos en tus plantillas. En esta sección, hemos cubierto algunos de los pipes más comunes y cómo utilizarlos. Practica utilizando estos pipes en tus proyectos para familiarizarte con sus capacidades y mejorar la presentación de tus datos.
En la siguiente sección, exploraremos cómo crear tus propios pipes personalizados para satisfacer necesidades específicas de tu aplicación.
Curso de Angular 2+
Módulo 1: Introducción a Angular
- ¿Qué es Angular?
- Configuración del Entorno de Desarrollo
- Tu Primera Aplicación Angular
- Arquitectura de Angular
Módulo 2: Conceptos Básicos de TypeScript
- Introducción a TypeScript
- Variables y Tipos de Datos en TypeScript
- Funciones y Funciones Flecha
- Clases e Interfaces
Módulo 3: Componentes y Plantillas
- Creación de Componentes
- Plantillas de Componentes
- Estilos de Componentes
- Interacción entre Componentes
Módulo 4: Directivas y Pipes
Módulo 5: Servicios e Inyección de Dependencias
- Introducción a los Servicios
- Creación y Uso de Servicios
- Inyección de Dependencias
- Inyectores Jerárquicos
Módulo 6: Enrutamiento y Navegación
Módulo 7: Formularios en Angular
- Formularios Basados en Plantillas
- Formularios Reactivos
- Validación de Formularios
- Formularios Dinámicos
Módulo 8: Cliente HTTP y Observables
- Introducción al Cliente HTTP
- Realizando Solicitudes HTTP
- Manejo de Respuestas HTTP
- Uso de Observables
Módulo 9: Gestión de Estado
- Introducción a la Gestión de Estado
- Uso de Servicios para la Gestión de Estado
- NgRx Store
- NgRx Effects