ng-template et ng-container
Définissez et hébergez des fragments de modèle
ng-template et ng-container est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Des modèles qui ne s’affichent pas
<ng-template> définit un bloc de balisage qui ne s’affiche pas tant qu’un élément ne l’instancie pas explicitement. Il constitue la base des directives structurelles comme *ngIf.
Définir un modèle
Le contenu de <ng-template> reste inactif. Pour le réutiliser ailleurs, vous devez lui attribuer une variable de référence.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Afficher avec ngTemplateOutlet
Utilisez ngTemplateOutlet pour afficher un modèle à partir de sa référence.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>Pourquoi utiliser ng-container ?
<ng-container> est un élément de regroupement logique, qui n’appartient pas au DOM. Il permet d’appliquer des directives ou de regrouper des nœuds sans ajouter d’élément conteneur supplémentaire au DOM.
Éviter les div conteneurs
Sans ng-container, vous pourriez ajouter un élément <div> inutile uniquement pour héberger une directive. ng-container disparaît du résultat affiché.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Regrouper le flux de contrôle
ng-container est idéal pour envelopper les nouveaux blocs de flux de contrôle sans ajouter d’élément au DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Contexte du modèle
Les modèles peuvent recevoir un objet de contexte, qui expose des valeurs via des variables let-.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Valeur de contexte par défaut
La valeur de contexte spéciale $implicit est liée à une variable let- qui ne possède aucune clé attribuée.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Les modèles sont des éléments de première classe
Un #ref sur un élément <ng-template> est un TemplateRef. Vous pouvez le transmettre comme @Input afin qu’un composant permette aux composants utilisateurs de personnaliser certaines parties de son interface.
emptyTemplate = input<TemplateRef<unknown>>();ng-container comme hôte
ng-container est également pratique comme hôte de sortie pour les composants ou les modèles dynamiques, tout en gardant un DOM propre.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>Quand utiliser lequel ?
ng-template : balisage différé ou réutilisable. ng-container : regroupement et hébergement de directives sans ajouter d’élément au DOM. Ils sont souvent utilisés ensemble.
Vérification rapide
Testez votre compréhension de ng-template et ng-container.
Récapitulatif
Vous avez appris que <ng-template> contient un balisage inactif et instanciable, affiché via ngTemplateOutlet (avec un contexte facultatif), tandis que <ng-container> regroupe des nœuds ou héberge des directives sans ajouter d’élément au DOM.
Questions Fréquemment Posées
La leçon « ng-template et ng-container » est-elle gratuite ?
Oui — le texte complet de « ng-template et ng-container » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « ng-template et ng-container » ?
Définissez et hébergez des fragments de modèle Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « ng-template et ng-container » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Projection de contenu à emplacement unique
- Projection à plusieurs emplacements avec select
- ng-template et ng-container
- TemplateRef et ViewContainerRef