El problema del prop drilling

Curso de Angular 17: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Aprende Angular 17

Creando tu primer proyecto en Angular

Implementando estilos

Mostrando elementos

Property Binding en Angular

Event Binding: click y doble click

Event binding: keydown

Modelo de reactividad con Signals

Creando un Signal en Angular

Estructuras de control en Angular

Directivas de control

Uso de ngFor

ngFor para objetos

Update Tasks

Uso de ngIf

Uso de ngSwitch y ngSwitchDefault

Controlando un input

Manejo de formularios en Angular

Alistando tu aplicación para producción

Estilos al modo Angular

Clases en Angular

Editing mode

Estados compuestos con computed

Usando effect para localStorage

Uso de ngbuild

Despliegue con Firebase Hosting

Nueva sintaxis en Angular

Directivas @For, @switch

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicación

Construyendo un e-commerce en Angular

Componentes en Angular

Mostrando los componentes

Angular DevTools

Uso de Inputs en Angular

Uso de Outputs en Angular

Componentes para Producto

Ciclo de vida de los componentes

Ciclo de vida de componentes

Ciclo de vida de componentes: ngOnChanges

Ciclo de vida de componentes: ngOnInit

Detectando cambios en los inputs

Evitando memory leaks con ngDestroy

Audio player con ngAfterViewInit

Creando la página "about us" o "conócenos"

Mejorando la interfaz del producto

Creando componente de productos

Creando el Header

Creando el carrito de compras

Comunicación padre e hijo

Calculando el total con ngOnChanges

El problema del prop drilling

Reactividad con signals en servicios

Entendiendo la inyección de dependencias

Integración y Datos

Obteniendo datos una REST API

Importaciones cortas en Typescript

Pipes en Angular

Construyendo tu propio pipe

Utilizando librerías de JavaScript en Angular

Conociendo las directivas

Deployando un proyecto en Vercel

Enrutamiento y Navegación

Ruta 404

Uso del RouterLink

Vistas anidadas

Uso del RouterLinkActive

Detalle de cada producto

Obteniendo datos del producto

Galería de imagenes

Detalle de la galería

Perfeccionando tu e-commerce

Mostrando categorias desde la API

Url Params

LazyLoading y Code Splitting

Aplicando LazyLoading

Prefetching

Usando la nueva sintaxis de Angular 17

Lanzando tu aplicación a producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Jose Antonio Sarria Garcia

hace 10 meses

El **Prop Drilling** es una paso del desarrollo que ocurre cuando necesitamos obtener datos que están en varias capas en el **árbol de componentes**

Ana Velez Ossa

hace un mes

**Problema del "Prop Drilling" en Angular:** El "Prop Drilling", también conocido como "Input Drilling" en Angular, se refiere a la complejidad de pasar datos entre componentes a través de múltiples niveles utilizando `@Input` y `@Output`. Este enfoque puede volverse complicado y difícil de mantener en estructuras de componentes profundas. **Solución:** Para evitar este problema, se puede utilizar un **store** o un mecanismo centralizado para manejar el estado de la aplicación. Esto permite que los componentes se suscriban directamente al estado que necesitan, evitando la necesidad de pasar datos y eventos manualmente a través de la jerarquía. **Beneficios:** * Centralización del estado. * Suscripciones eficientes mediante observables o señales. * Desacoplamiento de componentes, lo que facilita el mantenimiento y escalabilidad.

Julian Franco

hace 10 meses

Y como es el caso cuando es un camino de ida y vuelta, ejemplo mando una comunicacion al header, y ahora quiero que el header mande de vuelta otra informacion ?

Danny Alejandro fernandez gallego

hace 7 meses

Viendolo así, redux seria una gran solución.

Camilo Calderon

hace 8 meses

A mi me sucedió este problema cuando inicié con React y en este curso, separé el Cart Sidebar del Header y ya me encontré con 3 niveles. La solución que ví fue implementar el Store, es algo que funciona en React y tal cual funciona en Angular.

ANDRES ALFONSO MIRA MEJIA

hace 10 meses

✅

Moisés Omar Martínez García

hace 4 meses

A veces se debe sacrificar la reutilización de componentes cuando usamos un servicio que tiene un observable o signal con el valor, unos ejemplos serían los siguientes: -Un formulario de productos (disponible en grid de productos como atajo, en el administrador de todos los productos así como en la tabla de productos por categoría, lo que hice en este escenario fue pasarle como input de un nivel antes el producto seleccionado, al detectar cambios emite un output a su padre y ya actualzia la lista correspondiente -Un perfil en una red social: Se debe usar una ruta para el perfil de otro usuario y usualmente la del currentUser es más sencilla, este componente debe recibir la info de su componente padre y este al detectar un cambio emitirlo al servicio correspondiente