Composants dynamiques

Dans cette leçon, vous apprendrez à charger dynamiquement des composants dans Angular afin de créer des applications flexibles.

Que sont les composants dynamiques ?

Les composants dynamiques sont chargés à l’exécution dans la vue au lieu d’être déclarés directement dans un modèle.

Pourquoi utiliser des composants dynamiques ?

• Affichage flexible de l’interface utilisateur
• Afficher les composants de manière conditionnelle
• Créer des tableaux de bord ou des fenêtres modales dynamiques

Créer un espace réservé

Utilisez <ng-container> comme espace réservé pour charger des composants dynamiques :

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

Utiliser ViewChild

Accédez au conteneur à l’aide de @ViewChild dans la classe de votre composant :

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

Charger des composants dynamiquement

Utilisez le résolveur de fabrique de composants pour créer et insérer des composants :

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

Transmettre des données aux composants dynamiques

Transmettez des données à votre composant créé dynamiquement à l’aide d’entrées :

componentRef.instance.data = 'Hello Dynamic';

Supprimer des composants dynamiques

Vous pouvez facilement supprimer des composants dynamiques du DOM :

this.container.clear();

Résumé

Vous savez maintenant créer, gérer et supprimer dynamiquement des composants dans Angular. Excellent travail !