Day 17 - Render Dynamic Content in HTML Template
En esta entrega explicamos cómo renderizar contenido dinámico en plantillas HTML y cómo aplicar proyección de contenido en tres ecosistemas populares: Vue 3, Svelte 5 y Angular 19. Además incluimos recomendaciones prácticas para proyectos de desarrollo con Q2BSTUDIO, empresa especializada en aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Concepto general La proyección de contenido permite pasar fragmentos de plantilla desde un componente padre hacia un componente hijo para que este muestre contenido personalizado sin acoplar lógica. En Vue 3 esto se logra con slots y props de slot. En Svelte 5 llega el concepto de snippet y la directiva render para invocar esos fragmentos. En Angular se usa ng content para proyección simple y ng template junto con ngTemplateOutlet para fragmentos reutilizables.
Insertar fragmento para cambiar texto del boton Add Plan Idea general Colocar un fragmento nombrado dentro del boton en el componente hijo y exponer el estado de hover como una prop o evento para que el componente padre pueda modificar el texto cuando el raton entra o sale.
Vue 3 En Vue se define un slot nombrado como btn y se pasa hover como prop de slot desde el componente hijo. El slot se consume en el componente padre con una plantilla que desestructura hover y muestra Add Plan (+1) cuando hover es verdadero y Add Plan cuando es falso.
Svelte 5 En Svelte 5 se tipifica la prop como un Snippet que recibe un booleano. Dentro del componente hijo se mantiene un rune o estado local hover que cambia en onmouseenter y onmouseleave. La etiqueta render invoca el snippet addPlanButton pasando el estado hover y el snippet decide el texto que se renderiza.
Angular 19 Angular no ofrece una prop de slot exactamente igual. La alternativa es emitir un evento personalizado hover desde el componente hijo y que el componente padre lo capture para actualizar un signal o estado. Adicionalmente se puede insertar ng content dentro del boton del hijo para que el padre proyecte texto personalizado.
Proyecto del texto del boton Ejemplo de uso En los tres frameworks la idea es la misma Mostrar Add Plan y cuando hover sea verdadero añadir un sufijo Add Plan (+1). En Vue se usa slot nombrado con prop hover. En Svelte 5 se define snippet addPlanButton y se invoca con @render. En Angular se expone un evento hover que controla un signal en el componente padre y se muestra el texto calculado desde una propiedad computada o getter.
Contenido condicional proyectado Caso de uso Cuando un plan de cafe esta seleccionado y su nombre empieza con The se proyectan iconos de cafe y cafetera. Si el plan seleccionado no empieza con The se proyectan iconos de bebida y comida. Los planes no seleccionados no muestran iconos.
Instalacion de librerias Para operar con iconos se pueden usar librerias compatibles: en Vue @iconify vue, en Svelte @iconify svelte y en Angular ng icons material. Estas librerias proporcionan colecciones de iconos faciles de integrar en los fragmentos proyectados.
Templates y fragmentos en Vue 3 En el componente padre se crean templates nombrados coffee y beverage. Cada template incluye los iconos correspondientes y se agrega condicion para solo insertar el template coffee si el plan seleccionado empieza con The y el template beverage si no. Esos templates se pasan como contenido proyectado a CoffeePlan mediante slots nombrados.
Snippets en Svelte 5 En Svelte 5 se declaran snippets selectedPlanIcons y selectedPlanBeverageIcons que encapsulan los bloques de iconos. Al iterar planes se pasa el snippet adecuado como prop al componente CoffeePlan cuando el plan esta seleccionado. En el componente hijo se usan props opcionales de tipo Snippet y se invocan con la etiqueta render para posicionar los iconos a la izquierda o derecha de la descripcion.
Ng template y ngTemplateOutlet en Angular En Angular se crean ng templates con las colecciones de iconos y se exponen como referencias de template. Desde el componente padre se calcula si coffeeTemplate o beverageTemplate deben asignarse y se pasan al componente hijo mediante inputs. En el hijo se usa ngTemplateOutlet para insertar el template correspondiente en el lugar deseado de la vista. Si el input es undefined no se renderiza nada.
Actualizar componente CoffeePlan para renderizar fragmentos Estrategia general El componente hijo debe aceptar props o inputs opcionales que representen los fragmentos o snippets. Luego en la plantilla del hijo se invocan esas referencias condicionalmente para mostrar los iconos junto a la descripcion del plan.
Comparativa rapida Vue 3 slots y props de slot son ideales para plantillas declarativas y sencillas. Svelte 5 introduce snippets y render para una experiencia con tipado y invocation explicita. Angular aporta ng content para proyeccion simple y ng template con ngTemplateOutlet para fragmentos reutilizables y controlados mediante referencias de template.
Conclusiones La proyección de contenido y el renderizado condicional ofrecen patrones muy potentes para construir componentes reutilizables y personalizados. Cada framework aporta su sintaxis y herramientas pero el objetivo es el mismo mantener separacion de preocupaciones y facilitar la reutilizacion. Los fragmentos y slots facilitan interfaces ricas sin duplicar logica entre componentes.
Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software que ofrece soluciones a medida para empresas de todos los tamaños. Somos expertos en aplicaciones a medida y software a medida, implementamos proyectos de inteligencia artificial e ia para empresas, construimos agentes IA y soluciones con power bi para inteligencia de negocio. Adicionalmente ofrecemos servicios cloud aws y azure, consultoria en ciberseguridad y servicios inteligencia de negocio para impulsar decisiones basadas en datos. Nuestro equipo diseña arquitecturas seguras y escalables, integra modelos de aprendizaje automatico y despliega soluciones en la nube optimizadas para rendimiento y coste.
Servicios destacados aplicaciones a medida desarrollo de software a medida integracion de modelos de inteligencia artificial consultoria en ciberseguridad despliegue en servicios cloud aws y azure implementacion de soluciones de inteligencia de negocio con power bi desarrollo de agentes IA y automatizacion de procesos.
Recursos sugeridos Para profundizar revisar la documentacion oficial de Vue Slot, Svelte 5 Snippet y Render, y Angular Content Projection y ng template. Ademas consultar las guias de las librerias de iconos para integracion de componentes visuales.
Repositorios de referencia Buscar ejemplos practicos en repositorios de introduccion a componentes para Vue 3, Svelte 5 y Angular 19 que muestren implementaciones de slots snippets y templates para aprender patrones aplicables a proyectos reales.
Si deseas que Q2BSTUDIO adapte estos patrones a tu proyecto podemos ayudar a diseñar componentes escalables, implementar integracion con modelos de inteligencia artificial y desplegar la solucion en servicios cloud aws y azure con las mejores practicas de ciberseguridad y gobernanza.