Discussion :

[olivier252]

Bonjour,
Je me familiarise toujours avec angular or il y a une chose qui m'échappe dans la compréhension et l'utilisation de la directive <ng-template>.
Je bosse sur un tuto où il est dit ceci :


"As the name suggests the <ng-template> is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives).These template elements only work in the presence of structural directives. Angular wraps the host element (to which the directive is applied) inside <ng-template> and consumes the <ng-template> in the finished DOM by replacing it with diagnostic comments."
Source : https://www.freecodecamp.org/news/ev...-4b7b51223691/

J'en comprends que <ng-template> est utilisé conjointement avec d'autres directives.

Dans un exemple de code sur un autre tuto j'ai ceci dans la partie HTML du composant
Source : https://stackblitz.com/edit/primeng-...component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix">
            <div style="font-size:18px;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </ng-template>
</p-autoComplete>

Dans ce code, il n'y a aucune directive, du coup je me demande quelle est l'utilité du <ng-template> dans ce cas de figure

Merci pour votre aide

[krakatoa]

faudrait voir ce que fait le composant P-autoComplete avec ng-template
mais comme on y a pas accès...


ng-template permet de definir un bloc html
c'est comme une fonction avec du code HTML

dans ce bloc html, on peut lui envoyer des données
on peut afficher ou pas le bloc avec une condition
tel condition afficher tel bloc ou tel autre condition afficher un autre bloc
on peut s'en servir dans une boucle for
on peut transmettre ce bloc dans un autre composant


ce que je comprends dans l'exemple
c'est que le bloc represente une ligne qui affiche une voiture, il a un design
ce bloc est envoyer au composant p-autocomplete qui utilise ce bloc pour afficher toutes les lignes de la liste de voitures

[olivier252]

Merci pour ta téponse

En fait <autocomplete> appartient à la librairie Primeng est c'est une sorte <select> "masqué" qui permet de faire des choix dans un menu déroulant, j'ai fait tourné le tuto sur mon ide et lorsque je vais dans inspecter le DOM cet élément (<autocomplete) j'ai ceci


ce qui me déroute en fait c'est le fait que lorsque on supprime le <ng-template> dans l'exemple ça n'affecte rien du tout

[krakatoa]

**
ng-template en général on l'utilise pour du theming ou pour de la repetition de code html


**

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ng template #bouton1>
......
</ng-template>
 
<ng template #bouton2>
......
</ng-template>

ng-template ecrit comme ça, rien n'est affiché à l'écran

suivant une condition, on affiche soit bouton1 soit bouton2
voilà un exemple de cas d'utilisation pour du theming conditionnel


**

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix">
            <div style="font-size:18px;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </ng-template>
</p-autoComplete>

[suggestions]="filteredBrands" est la liste de toutes les marques : [ "Audi", "BMW", "Fiat", "Ford", "Honda", "Jaguar", "Mercedes", "Renault", "Volvo", "VW" ]
[(ngModel)]="brand" est le choix fait par l'utilisateur
ng-template est optionnel, dans le composant p-autocomplete , s'il ne trouve pas de contenu ng-template il affiche la ligne avec un design par defaut

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix">
            <div style="font-size:18px;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </ng-template>

de plus, tu peux remarquer let-brand (remarque: le brand ici n'a aucun lien avec [(ngModel)]="brand" )
brand est la variable
dans le composant p-autocomplete il va envoyer une marque "brand" en le prenant dans la liste "suggestions" pour être affiché avec le design du ng-template


** tu verra qu'en mettant color:red avec le design le texte sera en rouge par contre en enlevant le ng-template c'est le design par defaut

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="font-size:18px;margin:10px 10px 0 0; color: red;">{{brand}}</div>

[olivier252]

Top merci pour ta réponse très complète, je vais bosser ça aujourd'hui

[krakatoa]

**
ng-template en général on l'utilise pour du theming ou pour de la repetition de code html
de plus, pour le theming voici le principe général que tu retrouveras surement ailleurs: si on ne trouve pas de theming avec ng-template alors le composant utilise un theming par defaut


**
voilà un exemple de cas d'utilisation pour du theming conditionnel

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ng template #bouton1>
......
</ng-template>
 
<ng template #bouton2>
......
</ng-template>

ng-template ecrit comme ça, rien n'est affiché à l'écran

suivant une condition, on affiche soit bouton1 soit bouton2

[olivier252]

Salut et merci

J'ai en effet trouvé des sources avec ton exemple
je comprends le principe dans les grandes lignes, mais du coup je ne comprends pas trop à quoi ça sert d'avoir une sorte de theming de secours dans l'exemple si on a des classes spécifiques qui sont mises à dispo par la librairie.

Je suis entrain de chercher aussi comment on fait de la réutilisabilité de code avec <ng-template>.

[dukoid]

je comprends le principe dans les grandes lignes, mais du coup je ne comprends pas trop à quoi ça sert d'avoir une sorte de theming de secours dans l'exemple si on a des classes spécifiques qui sont mises à dispo par la librairie.

avec le ng-template, on ne se contente pas que de modifier du css, on peut définir une structure: div, span, p ....
sinon si c'est juste du css, en effet, il faut plutôt utiliser ngClass qui en fonction de tel condition on utilise tel ou tel class css

Je suis entrain de chercher aussi comment on fait de la réutilisabilité de code avec <ng-template>.

Angular propose plusieurs méthodes pour manipuler un ng-template (un bloc de balises)

voici un lien: https://blog.angular-university.io/a...emplateoutlet/
avec des explications de ce que l'on peut faire


tu peux voir dans ce tuto, que tu peux passer un template à un autre composant qui le receptionne à l'aide d'un viewChild:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 @ViewChild('defaultTabButtons')  private defaultTabButtonsTpl: TemplateRef<any>;

ainsi dans le contrôleur du composant, tu peux juste l'afficher ou modifier par code le TemplateRef et l'afficher !

[olivier252]

Merci,pour ces précisions ! Jusstement, j'ai commencé à bosser ce lien cet aprem mais j'en suis au début. Top la team angular merci encore