Introducción a Angular y Fundamentos
Desarrolla una ToDoApp con Angular y Signals
Creando tu primer proyecto en Angular
Angular: Componentes y Rutas Básicas
Interpolación de Strings en Angular: Uso y Ejemplos Prácticos
Enlace de Propiedades HTML con Angular: Guía Práctica
Manejo de Eventos Click y Cambios en Angular
Eventos de Teclado en JavaScript: Captura y Manejo Eficiente
Reactividad granular en Angular: Implementación con Signals
Implementación de Reactividad en HTML con Signals
Estructuras de control en Angular
Control de Estructuras y Señales en Angular
Creación de listas dinámicas con JavaScript
Interfaz en TypeScript: Definición y Uso Práctico
Actualización de Arrays con Programación Inmutable en Angular
Uso de ngIf para Condicionales en Angular
Pluralización en Angular: Uso de directivas ngIf y ngSwitch
Formularios Reactivos en Angular: Controlando Inputs Eficazmente
Validaciones de Formularios en Angular: Control de Inputs
Alistando tu aplicación para producción
Integración de SVG en Angular para aplicaciones interactivas
Estilización Dinámica con Angular: Clases y Validaciones
Edición Dinámica de Tareas con JavaScript y CSS
Estados Computados con Signals en Angular
Persistencia de datos con localStorage en Angular
Compilación Angular: Optimización y Preparación para Producción
Despliegue de Aplicaciones en Fibers Hosting
Control de Flujo en Angular: Nueva Sintaxis Declarativa
Sintaxis de Bucle For en JavaScript Moderno
Migración de Sintaxis Angular: de ng-for/ng-if a Nuevas Directivas
Componentes Reutilizables y Comunicación
Integración de Tailwind CSS en Proyecto Angular
Creación y Gestión de Componentes en Angular
Componente Producto en Angular: Renderizado y Reutilización
Debugging de Apps Angular con DevTools
Inputs en Angular: Comunicación entre Componentes Padre e Hijo
Comunicación entre Componentes con Outputs en Angular
Maquetación de tiendas online con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes Angular: Aprende Cada Fase Paso a Paso
Desarrollo de Aplicaciones con Angular: Ciclo de Vida de Componentes
Ciclo de Vida de Componentes en Angular: ngOnInit y Otros Eventos
Validación de cambios en ngOnChanges en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular.
Uso de WaveSurfer.js para Crear Reproductor de Audio en Angular
Curso: Diseño de Interfaz con Tailwind CSS
Mejorando la interfaz del producto
Patrones de Diseño y Arquitectura para Aplicaciones Web
Creación de un Header Dinámico con Angular
Implementación de Side Menu en Carrito de Compras con JavaScript
Reactividad y Comunicación entre Componentes en Angular
Cálculo Total en Carrito de Compras con Angular Signals
Gestión de Estado en Angular: Supera el Problema del InputDrilling
Servicio en Angular para Estado Global del Carrito de Compras
Inyección de Dependencias en Angular: Uso y Buenas Prácticas
Integración y Datos
Conexión a APIs REST con Angular: Obteniendo y Gestionando Datos
Alias en TypeScript: Simplificando Imports en Proyectos Grandes
Uso de Pipes en Angular: Transformación de Datos Simplificada
Creación de Pipes Personalizados en Angular
Manipulación de Fechas con Date Functions en Angular
Directivas en Angular: Manipulación Directa del DOM
Despliegue de Aplicaciones Angular en Vercel: Guía Completa
Enrutamiento y Navegación
Página personalizable 404 con Angular: Guía paso a paso
Redirección con Router Link en Angular: Flujo sin Recarga Total
Uso de Layouts Compartidos en Angular para Estructura Sostenible
Uso de RouterLinkActive en Angular para Rutas Activas
Routing en Angular: Parámetros de URL para Detalle de Productos
Detalles y Renderizado de Producto con Angular
Galería de Imágenes Dinámica con Angular
Conexión de Servicios en Angular: Moneda, Carrito y Galería
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en Angular
Filtrado dinámico de productos con query params en Angular
Lazy Loading y Code Splitting en Aplicaciones Angular
Optimización de JavaScript con Dynamic Imports en Angular
Optimizar Angular: Preloading para Mejorar Carga en Redes Lentas
Migración a la Nueva Sintaxis de Angular Step-by-Step
Despliegue de Aplicaciones Web con Verzal Paso a Paso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Manipulación de Fechas con Date Functions en Angular
54/71¿Cómo integrar librerías en un proyecto Angular para manejar fechas?
Uno de los desafíos más comunes al programar en JavaScript es la manipulación y manejo de fechas. Sin embargo, existen librerías que pueden facilitarnos esta tarea, integrándolas en nuestros proyectos de Angular. A continuación, te explicamos cómo utilizar date-fns, una poderosa herramienta de JavaScript, para calcular distancias entre fechas de forma eficaz.
¿Cómo instalar y utilizar Date Functions?
Para integrarte al ecosistema de JavaScript desde Angular, es crucial contar con herramientas efectivas. Aquí es donde entra en juego date-fns, una librería que simplifica la utilización de fechas. Sigue estos pasos para instalarla y aplicarla en tu proyecto:
-
Instalación de la librería: Ejecuta el siguiente comando en tu terminal para agregar
date-fnsa tu proyecto:npm install date-fnsEsta acción integra las funcionalidades de manejo de fechas al entorno de Angular.
-
Uso de la función Format Distance: Tras la instalación, puedes utilizar el pipe
time agopara calcular el tiempo transcurrido desde una fecha específica hasta el presente:import { formatDistance } from 'date-fns'; transform(value: string): string { const date = new Date(value); return formatDistance(date, new Date()); }Aquí,
formatDistancedevuelve una cadena que describe el tiempo transcurrido entre las dos fechas, como "hace unas semanas" o "hace tres meses".
¿Cómo implementar Time Ago en HTML?
Una vez configurado el pipe en Angular, es hora de utilizarlo en tu componente HTML. Este enfoque reemplaza el uso de los pipes de Angular y te da control sobre cómo se muestran las fechas:
-
Borra elementos HTML innecesarios: Reajusta tu HTML eliminando elementos que no aporten al nuevo pipe, enfocándote en agregar el pipe de
time ago. -
Implementación del pipe Time Ago: En el HTML, utiliza el pipe creado para mostrar las fechas:
<div>{{ product.creationDate | timeAgo }}</div>Esta línea permite visualizar la diferencia entre la fecha de creación de un producto y la fecha actual directamente en la interfaz de usuario.
¿Cuáles son los beneficios de utilizar Date Functions?
El uso de date-fns no solo facilita el manejo de fechas, sino que también ofrece varias ventajas para tu proyecto en Angular:
- Precisión y simplicidad: Calcula distancias entre fechas de manera precisa y sencilla.
- Flexibilidad: Puedes integrarlo en múltiples proyectos y sistemas que requieran características de manejo de fechas.
- Optimización del ecosistema de JavaScript: Aprovechas al máximo las herramientas útiles del ecosistema de JavaScript dentro de Angular.
Empleando date-fns, puedes mejorar significativamente la gestión de fechas en tus proyectos, sin importar su envergadura. Además, sigue explorando otras librerías que pueden integrarse fácilmente en tu entorno de Angular para optimizar tus aplicaciones. ¿Listo para llevar tus habilidades de programación al siguiente nivel? ¡Sigue practicando y explorando nuevas herramientas constantemente!
Aportes 6
Preguntas 1
Yo use dayjs 🤓👆
Y quedo asi:
import { Pipe, PipeTransform } from '@angular/core';
import dayjs from 'dayjs';
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
@Pipe({
name: 'timeAgo',
standalone: true
})
export class TimeAgoPipe implements PipeTransform {
transform(value: string): string {
return dayjs(value).fromNow();
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?