- 1

Desarrollo de Aplicaciones Modernas con Angular
01:13 - 2

Creando tu primer proyecto en Angular
06:06 - 3

Creación de componentes y rutas en Angular para gestión de tareas
11:29 - 4

String Interpolation en Angular: Transmisión de Datos a Templates
05:39 - 5

Modificación de Propiedades HTML con Angular: Property Binding
07:37 - 6

Eventos en Angular: click, doble click y cambio de input
08:14 - 7

Eventos de Teclado en JavaScript: Uso de KeyDown y Change
06:18 - 8

Reactividad Granular con Signals en Angular
04:26 - 9

Reactividad en HTML: Implementación de Signals en JavaScript
04:24
Gestión de Estado en Angular: Solución al InputDrilling
Clase 47 de 71 • Curso de Angular: Creación de Aplicaciones Web
Contenido del curso
- 10

Estructuras de Control y Renderizado Dinámico en Angular
06:33 - 11

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
09:18 - 12

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
08:48 - 13

Actualización de tareas con Angular y programación inmutable
07:23 - 14

Uso de ngIf y ngFor para control de flujos en Angular
12:56 - 15

Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
06:38 - 16

Manejo Avanzado de Formularios Reactivos en Angular
06:11 - 17

Validaciones de Inputs en Formularios Reactivos con Angular
07:28
- 18

Validación de formularios y estilos dinámicos en Angular
09:13 - 19

Activación dinámica de clases en Angular con validaciones
10:11 - 20

Edición de Tareas Dinámicas en Aplicaciones Web
12:20 - 21

Estados Computados en Programación Reactiva con Signals
10:26 - 22

Persistencia de Tareas con LocalStorage en Angular
15:57 - 23

Compilación y Optimización de Aplicaciones Angular para Producción
04:09 - 24

Lanzamiento de Aplicaciones con Firebase Hosting y Angular
06:56 - 25

Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
07:09 - 26

Sintaxis y rendimiento de for y switch en JavaScript moderno
07:22 - 27

Migración Automática a Nueva Sintaxis de Angular
05:24
- 28

Creación de Tienda en Línea con Angular y Tailwind CSS
06:08 - 29

Creación y Organización de Componentes en Angular
09:30 - 30

Componentes Reutilizables en Angular: Creación y Maquetado de Productos
07:01 - 31

Uso de Angular DevTools para Debugging en Angular
02:25 - 32

Inputs en Angular: Comunicación de Datos entre Componentes
08:29 - 33

Outputs en Angular: Comunicación del Hijo al Padre
06:52 - 34

Maquetación de Galería de Productos con Tailwind CSS
03:51
- 35

Ciclo de Vida de Componentes en Angular
06:57 - 36

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
08:02 - 37

Ciclo de Vida de Componentes en Angular: Eventos Clave
08:35 - 38

Detección de Cambios en Inputs con ngOnChange en Angular
04:53 - 39

Prevención de fugas de memoria con ngOnDestroy en Angular
07:11 - 40

Creación de un Reproductor de Audio con WaveSurfer.js en Angular
08:29 - 41

Mejoras de la página About en e-commerce: audio y contador dinámico
13:01
- 42

Componentización y Manejo de Datos en Angular
11:12 - 43

Creación de Headers en Páginas Web con Angular
06:54 - 44

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
05:39 - 45

Implementación de Reactividad en Carrito de Compras con Angular
11:15 - 46

Gestión de Carrito de Compras en Angular con ngOnChanges
09:40 - 47

Gestión de Estado en Angular: Solución al InputDrilling
04:33 - 48

Gestión de Estado Global en Angular con Servicios y Señales
11:26 - 49

Inyección de Dependencias en Angular: Conceptos y Prácticas
02:39
- 50

Conexión de Angular a REST API usando Fake Store API de Platzi
11:20 - 51

Creación de Alias para Imports Cortos en Proyectos JavaScript
04:43 - 52

Transformación de Datos con Pipes en Angular
05:56 - 53

Creación y uso de pipes personalizados en Angular
06:11 - 54

Manipulación de Fechas en Angular con Date Functions
04:11 - 55

Manipulación del DOM con Directivas en Angular
07:36 - 56

Deployment de Aplicaciones Angular en Vercel
05:02
- 57

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
04:00 - 58

Implementación de Router Link en Angular para SPA eficiente
06:08 - 59

Implementación de Layouts Compartidos en Angular para Vistas Anidadas
08:57 - 60

Uso de RouterLinkActive en Angular para Navegación Activa
03:53 - 61

Routing en Angular: Creación de Páginas de Detalle de Producto
08:18 - 62

Consulta dinámica de detalles de producto con Angular y REST API
10:59 - 63

Galería de Productos Dinámica con Angular y TypeScript
06:44 - 64

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
04:39
- 65

Filtrado de Productos por Categoría en E-commerce
07:45 - 66

Filtros de Productos con Query Params en Angular
12:40 - 67

Optimización de Aplicaciones con Lazy Loading y Code Splitting
04:28 - 68

Optimización de JavaScript en Angular con Lazy Loading
07:02 - 69

Optimización de Carga de Chunks con Preloading en Angular
02:49 - 70

Migración de Angular a Nueva Sintaxis con ng generate
03:33 - 71

Despliegue de Aplicaciones con Verzal en Entornos Productivos
01:54
¿Qué es el problema del PropDrilling en el desarrollo de aplicaciones?
El término PropDrilling es comúnmente asociado con el desarrollo web, especialmente en React, pero también aplica a Angular, donde es más acertado llamarlo InputDrilling. Este problema emerge cuando la comunicación entre los componentes de una aplicación alcanza un nivel de complejidad elevado, debido a la estructura de árbol jerárquica de los componentes. A continuación, profundizaremos en este concepto, cómo se presenta en Angular, y las soluciones más efectivas para abordarlo.
¿Cómo se manifiesta el PropDrilling en Angular?
Imaginemos una aplicación Angular con varios componentes estructurados en un árbol jerárquico extenso y ramificado. En un árbol sencillo, con un par de niveles, la comunicación entre un componente padre e hijo se maneja sin problemas a través de inputs y outputs. Pero, a medida que el árbol crece y cuenta con múltiples niveles, la comunicación se complica. Para enviar datos de un componente a otro que está situado abajo en la jerarquía, se requiere un recorrido complejo a través de varios nodos intermedios. Este proceso se vuelve engorroso y difícil de mantener.
El PropDrilling implica que cada componente intermedio tenga que ser consciente del flujo de datos, lo cual no solo complica el código, sino que también lo vuelve propenso a errores y menos óptimo.
¿Cómo solucionar el PropDrilling con State Management?
Para enfrentar el problema del PropDrilling y simplificar el manejo de datos, Angular ofrece una solución eficiente mediante el uso de un State Management, comúnmente conocido como Store. Veamos cómo funciona:
- Store: Un mecanismo centralizado para almacenar el estado de la aplicación. En lugar de propagar datos a través de múltiples componentes, estos se guardan en el Store.
- Suscripciones: Componentes interesados en ciertos datos pueden suscribirse a funciones observables, como Observables o Signals, dentro del Store. Esto permite que los componentes reaccionen automáticamente a cambios de estado.
- Ejemplo de notificaciones: Similar a suscribirse a un canal de YouTube, donde se recibe una notificación solo cuando hay un cambio relevante. Los componentes actualizan la vista o realizan acciones basadas en estos cambios.
Conclusiones prácticas y recomendaciones
Resolver el problema del PropDrilling facilita enormemente el mantenimiento y escalabilidad de aplicaciones complejas. Al centralizar la gestión de estado:
- Mayor mantenibilidad: Simplifica la lógica de flujo de datos y reduce el código redundante.
- Eficiencia y claridad: Los desarrolladores pueden entender y modificar la aplicación más fácilmente.
- Escalabilidad: La aplicación está mejor preparada para crecer sin incurrir en una deuda técnica significativa.
Este enfoque no solo ahorra tiempo y problemas a los desarrolladores, sino que también prepara el terreno para una aplicación robusta y resilient, capaz de adaptarse a futuras necesidades. ¡Continúa explorando estas técnicas para mejorar continuamente tus habilidades en el desarrollo de software!