Componentes dinámicos

En esta lección, aprenderá a cargar componentes dinámicamente en Angular para crear aplicaciones flexibles.

¿Qué son los componentes dinámicos?

Los componentes dinámicos se cargan en la vista durante la ejecución en lugar de declararse directamente en una plantilla.

¿Por qué usar componentes dinámicos?

• Representación flexible de la interfaz de usuario
• Mostrar componentes de forma condicional
• Crear paneles o ventanas modales dinámicos

Crear un marcador de posición

Use <ng-container> como marcador de posición para cargar componentes dinámicos:

<ng-container #dynamicContainer></ng-container>

Usar ViewChild

Acceda al contenedor mediante @ViewChild en la clase del componente:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Cargar componentes dinámicamente

Use el resolvedor de factorías de componentes para crear e insertar componentes:

const componentRef = this.container.createComponent(MyDynamicComponent);

Pasar datos a componentes dinámicos

Pase datos al componente creado dinámicamente mediante entradas:

componentRef.instance.data = 'Hello Dynamic';

Eliminar componentes dinámicos

Puede eliminar fácilmente los componentes dinámicos del DOM:

this.container.clear();

Resumen

Ahora sabe cómo crear, gestionar y eliminar componentes dinámicamente en Angular. ¡Excelente trabajo!