ng-template y ng-container
Definir y alojar fragmentos de plantilla
ng-template y ng-container es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Plantillas que no se renderizan
<ng-template> define un fragmento de marcado que no se renderiza hasta que algo lo instancia explícitamente. Es la base de las directivas estructurales como *ngIf.
Definir una plantilla
El contenido dentro de <ng-template> permanece inerte. Asígnele una variable de referencia para usarlo en otro lugar.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Renderizar con ngTemplateOutlet
Use ngTemplateOutlet para renderizar una plantilla mediante una referencia.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>¿Por qué ng-container?
<ng-container> es un elemento de agrupación lógico que no pertenece al DOM. Permite aplicar directivas o agrupar nodos sin añadir un elemento contenedor adicional al DOM.
Evitar divs contenedores
Sin ng-container, podría añadir un <div> innecesario solo para alojar una directiva. ng-container desaparece de la salida renderizada.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Agrupar el flujo de control
ng-container resulta ideal para envolver nuevos bloques de flujo de control sin añadir elementos al DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Contexto de plantilla
Las plantillas pueden recibir un objeto de contexto que expone valores mediante variables let-.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Valor de contexto predeterminado
El valor de contexto especial $implicit se vincula a una variable let- sin ninguna clave asignada.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Las plantillas son elementos de primera clase
Un #ref en un <ng-template> es un TemplateRef. Puede pasarlo como un @Input para que un componente permita a los consumidores personalizar partes de su interfaz.
emptyTemplate = input<TemplateRef<unknown>>();ng-container como host
ng-container también resulta práctico como host de salida para componentes o plantillas dinámicos, ya que mantiene limpio el DOM.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>Cuándo usar cada uno
ng-template: marcado diferido o reutilizable. ng-container: agrupación y alojamiento de directivas sin añadir elementos al DOM. A menudo funcionan conjuntamente.
Comprobación rápida
Compruebe su comprensión de ng-template y ng-container.
Resumen
Ha aprendido que <ng-template> contiene marcado inerte e instanciable que se renderiza mediante ngTemplateOutlet (con un contexto opcional), y que <ng-container> agrupa nodos o aloja directivas sin añadir elementos al DOM.
Preguntas frecuentes
¿La lección «ng-template y ng-container» es gratis?
Sí — el texto completo de «ng-template y ng-container» 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 «ng-template y ng-container»?
Definir y alojar fragmentos de plantilla 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 3 de 4.
¿Cuánto tiempo toma la lección «ng-template y ng-container»?
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