TemplateRef y ViewContainerRef
Renderizar plantillas dinámicamente
TemplateRef y ViewContainerRef es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Renderizado imperativo
A veces debe renderizar contenido de forma programática en lugar de declarativa. Angular proporciona TemplateRef y ViewContainerRef para este control de bajo nivel.
TemplateRef
Un TemplateRef es un identificador de un <ng-template>. Representa un marcado que puede instanciar más adelante.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
Un ViewContainerRef es una ubicación del DOM donde puede adjuntar vistas. Inyéctelo para controlar lo que se renderiza allí.
private vcr = inject(ViewContainerRef);createEmbeddedView
Combine ambos elementos: createEmbeddedView instancia un TemplateRef en un ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Pasar el contexto
Puede pasar un objeto de contexto como segundo argumento, al que se accede mediante variables let-.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Borrar vistas
ViewContainerRef.clear() elimina todas las vistas que ha creado. Así es como se activa y desactiva el contenido dinámico.
this.vcr.clear();Una directiva estructural personalizada
Este patrón permite crear directivas estructurales personalizadas. La directiva inyecta ambas referencias y renderiza de forma condicional.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Reaccionar a una entrada
Un setter en la entrada de la directiva controla create/clear para que la vista aparezca o desaparezca.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Insertar en un índice
createEmbeddedView acepta un índice para controlar el orden de inserción entre vistas hermanas.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef también puede instanciar componentes dinámicamente con createComponent, el reemplazo moderno de ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Limpiar
Las vistas creadas de forma imperativa deben limpiarse. Al destruir el componente host, su ViewContainerRef se limpia automáticamente, pero debe llamar a clear() cuando realice cambios manualmente.
Comprobación rápida
Compruebe su comprensión del renderizado imperativo.
Resumen
Ha aprendido que TemplateRef es un identificador del marcado de una plantilla, que ViewContainerRef es un punto de inserción en el DOM y que createEmbeddedView renderiza una plantilla en el otro. Juntos permiten crear directivas estructurales personalizadas y componentes dinámicos.
Preguntas frecuentes
¿La lección «TemplateRef y ViewContainerRef» es gratis?
Sí — el texto completo de «TemplateRef y ViewContainerRef» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «TemplateRef y ViewContainerRef»?
Renderizar plantillas dinámicamente Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «TemplateRef y ViewContainerRef»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Proyección de contenido en un único slot
- Proyección en varios slots con select
- ng-template y ng-container
- TemplateRef y ViewContainerRef