¿Alguna vez has movido un componente por tu layout y has visto desaparecer su estado al instante? En este artículo repasamos tres formas de solucionar este problema en Angular y cómo conservar el estado al 'teleportar' un componente: ng-template con ngTemplateOutlet, TemplatePortal del CDK y DomPortal del CDK.
Contexto de la demo: imaginemos un panel administrativo con un banner promocional que puede mostrarse en la barra lateral o en la zona principal. El banner contiene un contador y un botón de like. Si al moverlo entre regiones el temporizador se reinicia y el like se pierde, es porque Angular está recreando la vista y generando una nueva instancia del componente cada vez.
En la implementación inicial se usa una señal dockRight para decidir en qué región renderizar y dos condicionales que colocan <promo-banner> en uno u otro sitio. Al alternar, Angular destruye la vista anterior y crea una nueva, por eso se pierden los datos en memoria y los timers.
Primera opción ng-template y ngTemplateOutlet: definimos un ng-template con referencia y usamos ngTemplateOutlet para insertarlo en ambos lugares. Esto permite reutilizar el mismo template, pero no mantiene el estado porque cada inserción crea una nueva embedded view. Conclusión: la vista se recrea, se pierde estado.
Segunda opción CDK TemplatePortal: usando @angular/cdk/portal podemos envolver el template en un TemplatePortal y adjuntarlo con cdkPortalOutlet. Aunque la API cambia, el resultado es similar al ngTemplateOutlet: al adjuntar el portal se crea una nueva vista embebida, por lo que el componente se reinyecta y su estado se reinicia. ComponentPortal tampoco evita este efecto si se pone en la misma situación.
Tercera opción CDK DomPortal: la gran solución. Un DomPortal no recrea la vista, literalmente mueve el nodo DOM existente a otro outlet. Eso significa misma instancia, mismas señales, mismos timers y proveedor DI origen conservado. En la práctica se cambia la referencia del template por un ElementRef que envuelve el elemento real que contiene el componente y se crea un DomPortal de tipo HTMLElement. Al adjuntarlo en otro contenedor con cdkPortalOutlet lo que hace Angular es reparentar el DOM en lugar de volver a crear la vista, así que el estado persiste.
Resumen práctico: si tu objetivo es conservar estado al mover un componente por el DOM usa DomPortal. Si usas ngTemplateOutlet o TemplatePortal ten en cuenta que Angular recreará la vista y perderás el estado. Regla sencilla para recordar: Templates recrean, DomPortal mueve.
Ventajas adicionales de DomPortal: preserva el injector de origen, por tanto providers con alcance de componente y contexto de DI siguen funcionando sin cambios. Es la alternativa ideal cuando necesitas teletransportar elementos interactivos sin reiniciar lógica interna.
En Q2BSTUDIO aplicamos patrones como este para construir aplicaciones robustas y escalables. Si necesitas desarrollar una solución personalizada para tu negocio, desde aplicaciones a medida hasta integraciones con inteligencia artificial y agentes IA, podemos ayudarte. Con experiencia en software a medida y aplicaciones a medida entregamos productos con buenas prácticas, seguridad y rendimiento.
Además ofrecemos servicios especializados como ciberseguridad y pentesting para proteger tus despliegues, servicios cloud AWS y Azure para alojar y escalar tus sistemas, y servicios de inteligencia de negocio y power bi para convertir datos en decisiones. Si te interesa crear una aplicación a medida con enfoque en IA para empresas visita servicios de desarrollo de aplicaciones y software a medida y para explorar soluciones de inteligencia artificial consulta nuestras capacidades en inteligencia artificial.
Palabras clave relevantes para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Si quieres que te mostremos el ejemplo en código, te podemos compartir una demo y acompañarte en la integración con arquitecturas cloud o en la automatización de procesos para que tu aplicación mantenga estado y escalabilidad sin comprometer seguridad ni rendimiento.
Conclusión final: cuando muevas un componente en Angular recuerda esta frase y no fallarás al decidir la técnica adecuada para conservar estado: Templates recrean cosas mientras DomPortal las mueve.