Comment Utiliser Le Modèle Ng Dans Angular?

ng-template est un élément Angulaire utilisé pour le rendu des modèles HTML.

Nous utilisons la directive ng-template avec la directive angulaire *ngIf pour afficher le modèle else.

Alors, que fera exactement ce ng-template?

S’il rend vraiment le modèle HTML, nous verrons avec un exemple.

<div> ng-template works!</div><ng-template>Inside ng-template tag</ng-template>

Si vous voyez la sortie, il n’affichera que ng-template works qui est dans l’élément div.Et jetez un œil au code source HTML généré.

Vous pouvez voir une section de commentaire vide à la place de la balise ng-template. Passons en profondeur dans ng-template pour comprendre ce comportement.

Qu’est-ce que le modèle ng dans Angular

1. ng-template est un élément virtuel et son contenu n’est affiché qu’en cas de besoin (en fonction des conditions).
2. ng-template doit être utilisé avec des directives structurelles telles que ,, ou des directives structurelles personnalisées.C’est pourquoi dans l’exemple ci-dessus, le contenu de ng-template n’est pas affiché.
3. ng-template n’a jamais été utilisé comme les autres éléments HTML. C’est une implémentation interne des directives structurelles d’Angular.
4. Lorsque vous utilisez une directive structurelle dans Angular, nous ajouterons un astérisque de préfixe (*) avant le nom de la directive. Cet astérisque est une notation manuelle courte pour ng-template.
5. Chaque fois qu’Angular rencontre le symbole astérisque (*), nous informons Angular en disant qu’il s’agit d’une directive structurelle et Angular convertira l’attribut directive en élément ng-template.
6. ng-template n’est pas exactement un véritable élément web. Lorsque nous compilons notre code, nous ne verrons pas de balise ng-template dans le DOM HTML.
7. Angular évaluera l’élément ng-template pour le convertir en une section de commentaire dans le DOM HTML.

Nous allons passer en revue les différentes directives structurelles comme *ngIf*ngFor et pour mieux comprendre cela.

Utilisation de ng-template avec exemple *ngIf

Prenez un exemple de la directive *ngIf dans Angular

<div *ngIf="display" class="ng-template-example"> ng-template example</div><ng-template ="display"> <div class="ng-template-example">ng-template example</div></ng-template>

• La directive en cours de conversion en membre de données de ng-template
• L’élément de modèle en ligne avec les attributs (classe, etc.), déplacé à l’intérieur de la ng-template
• L’élément de modèle en ligne avec les attributs (classe, etc.),ng-templateélément

Nous n’avons donc que le modèle then qui est un modèle en ligne et il n’y a pas de modèle else.Va maintenant creuser dans le code source de la classe NgIf pour comprendre comment l’élément ng-template fonctionnera.

Toute directive structurelle dans Angular aura deux propriétés

1. TemplateRef
2. ViewContainerRef

Une directive structurelle crée la vue à partir de ng-template et l’insère dans le conteneur de vue adjacent à l’élément hôte de la directive.

Cela signifie que la directive structurelle accède au contenu de ng-template via TemplateRef et met à jour ViewContainerRef

Et si vous voyez la source ci-dessus code de la classe NgIf Il a quatre propriétés

1. _thenTemplateRef: ng-templateréférence de then
2. _elseTemplateRef: ng-templateréférence d’else
3. _thenViewRef: réf de vue intégrée de then
4. _elevoirf : si vous voyez le constructeur, il a deux paramètres private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>

   Le constructeur accédera au paramètre ng-template via le paramètre templateRef et l’affectera à thenTemplateRef. le modèle en ligne sera le modèle par défaut dans la directive ngIf.

   Et dans l’exemple ci-dessus, nous ne transmettons aucun autre modèle ni aucun autre modèle et la seule entrée que nous donnons est

   En fonction de la condition que nous mettons à jour la vue. Voir le code source de la méthode updateView() de la classe NgIf.

   bonjour

   Dans la méthode de vue de mise à jour, Angular affectera thenViewRef à la vue intégrée créée à partir de thenTemplateRef i.e, vue depuis ng-template

   Donc, si la condition display est vraie page web displayes I am Visible.

   bonjour

   Et Si vous voyez le HTML ng-template généré en cours de conversion en une section de commentaire qui donne les informations sur la condition évaluée.

   Si nous passons le modèle else via celui-ci est affecté à elseTemplateRef

   Si la condition est fausse dans updateView() la méthode Angular affectera elseViewRef à la méthode Angular vue intégrée créée à partir de elseTemplateRef

   bonjour

   Et nous pouvons modifier dynamiquement l’exécution des modèles autrement ou ensuite en mettant à jour les références et les modèles

   En utilisant ng-template avec *ngPar exemple

   Vous pensez peut-être pourquoi nous devons utiliser l’astérisque (*) notation lorsque nous pouvons utiliser directement l’élément ng-template. Oui, nous pouvons utiliser ng-template au lieu de la notation manuelle courte.

   *ngIf est une directive simple sans trop de complexité. Cette notation astérisque ou microsyntaxe (en termes angulaires) est très utile danscase directives structurelles complexes comme *ngFor. Jetez un oeil à l’exemple ci-dessous

   <div *ngFor="let task of tasks; let i=index; let even=even; trackBy: trackById"> ({{i}}) {{task.name}}</div><ng-template ngFor let-task ="tasks" let-i="index" let-even="even" ="trackById"><div>({{i}}) {{task.name}}</div></ng-template>

   Avec la notation astérisque ou la microsyntaxe angulaire, nous pouvons donner des instructions à la directive en format de chaîne simple. Et l’analyseur microsyntax angulaire convertit cette chaîne en attributs de ng-template comme indiqué ci-dessus

   Je ne veux pas entrer dans les détails d’implémentation de *ngFor. Tout ce que nous devons comprendre est la notation astérisque (*) facile à écrire et à comprendre.

   Jusqu’à ce que, sauf si vous avez de bonnes raisons, préférez la notation astérisque(*) au lieu de ng-template

   En utilisant ng-template avec exemple de commutateur

   NgSwitch n’est pas une directive unique, elle est en fait utilisée avec d’autres directives *ngSwitchCase div>et *ngSwitchDefault

   Jetez un œil à l’exemple ci-dessous ngSwitch

   <div ="Course"> <p *ngSwitchCase="'Angular'">Angular Course</p> <p *ngSwitchCase="'TypeScript'">TypeScript Course</p> <p *ngSwitchCase="'JavaScript'">JavaScript Course</p> <p *ngSwitchDefault>HTML Course</p> </div><div ="Course"> <ng-template *ngSwitchCase="'Angular'"> <p>Angular Course</p> </ng-template> <ng-template ="'TypeScript'"> <p>TypeScript Course</p> </ng-template> <ng-template ="'JavaScript'"> <p>JavaScript Course</p> </ng-template> <ng-template > <p>HTML Course</p> </ng-template></div>

   Si vous voyez le code ci-dessus, je n’ai pas utilisé d’astérisque avant ngSwitch pourquoi parce que NgSwitch n’est pas une directive structurelle. C’est une directive attribut.

   NgSwitch contrôle le comportement des deux autres directives de commutation ngSwitchCase et ngSwitchDefault.

   Les deux ngSwitchCasengSwitchDefault sont des directives structurelles, c’est pourquoi j’ai utilisé astérisque avant elles. Et ceux-ci seront convertis en ng-templateéléments

   Résumé

   J’espère que vous comprenez ce qu’est ng-template dans Angular et pourquoi c’est utile. Et si vous écrivez vos propres directives structurelles, vous devriez avoir une idée claire sur ng-template>

   Dans mon prochain article, je vais expliquer comment écrire une directive structurelle personnalisée à l’aide de ng-template