Alguém pode ilustrar a diferença entre usar os elementos <ng-container>
e <ng-template>
?
Não consegui encontrar a documentação NgContainer
e não entendo muito bem a diferença entre a tag de modelo.
Um exemplo de código de cada um ajudaria muito.
Alguém pode ilustrar a diferença entre usar os elementos <ng-container>
e <ng-template>
?
Não consegui encontrar a documentação NgContainer
e não entendo muito bem a diferença entre a tag de modelo.
Um exemplo de código de cada um ajudaria muito.
Respostas:
Ambos são no momento (2.x, 4.x) usados para agrupar elementos sem ter que introduzir outro elemento que será renderizado na página (como div
ou span
).
template
, no entanto, requer uma sintaxe desagradável. Por exemplo,
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>
se tornaria
<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</template>
Você pode usar, uma ng-container
vez que segue a *
sintaxe legal que você espera e provavelmente já está familiarizado.
<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
<li>...</li>
</ng-container>
Você pode encontrar mais detalhes lendo esta discussão no GitHub .
Observe que no 4.x <template>
está obsoleto e foi alterado para <ng-template>
.
Usar
<ng-container>
se você precisar de um elemento auxiliar para diretivas estruturais aninhadas como *ngIf
ou, *ngFor
ou se quiser envolver mais de um elemento dentro de uma diretiva estrutural;<ng-template>
se você precisa de uma visão "snippet" que pretende estampar em vários lugares usando ngForTemplate
, ngTemplateOutlet
ou createEmbeddedView()
.ng-template
é usado para a diretiva estrutural como ng-if
, ng-for
e ng-switch
. Se você usá-lo sem a diretiva estrutural, nada acontece e ele será renderizado.
ng-container
é usado quando você não tem um wrapper ou contêiner pai adequado. Na maioria dos casos, estamos usando div
ou span
como um contêiner, mas nesses casos, queremos usar várias diretivas estruturais. Mas não podemos usar mais de uma diretiva estrutural em um elemento, nesse caso, ng-container
pode ser usado como um contêiner
ng-template
O <ng-template>
é um elemento angular para renderizar HTML. Nunca é exibido diretamente. Use para diretivas estruturais como: ngIf, ngFor, ngSwitch, ..
Exemplo :
<div *ngIf="hero" class="name">{{hero.name}}</div>
Angular traduz o atributo * ngIf em um <ng-template>
elemento, enrolado ao redor do elemento host, assim.
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>
ng-container
Use como um elemento de agrupamento quando não houver um elemento de host adequado.
Exemplo:
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<span *ngFor="let h of heroes">
<span *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</span>
</span>
</select>
Isso não vai funcionar. Porque alguns elementos HTML requerem que todos os filhos imediatos sejam de um tipo específico. Por exemplo, o <select>
elemento requer filhos. Você não pode envolver as opções em uma condicional ou a <span>
.
Experimente isto:
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</ng-container>
</ng-container>
</select>
Isso vai funcionar.
Mais informações: Diretiva Estrutural Angular
ng-template
como o nome indica, denota um modelo . Por si só, não renderiza nada. Podemos usar um ng-container
para fornecer um espaço reservado para renderizar um modelo dinamicamente .
Outro caso de uso ng-template
é que podemos usá-lo para aninhar várias diretivas estruturais juntas. Você pode encontrar ótimos exemplos aqui nesta postagem do blog: angular ng-template / ng-container
Em termos simples, ng-container
é como um componente Higher do React , que apenas auxilia na renderização de seus elementos filhos.
ng-template
é basicamente para implementação interna do Angular , em que qualquer coisa dentro do ng-template
é completamente ignorada durante a renderização e basicamente se torna um comentário na fonte de exibição. Isso deve ser usado com as diretivas internas do Angular ngIf
, ngSwitch
etc.
Eu gosto <ng-container>
de separar "lógica" de "marcação" tanto quanto possível nos arquivos Angular .component.html.
exemplo (parcial) para renderizar linhas de uma tabela html:
<ng-container *ngFor="let product of products">
<tr>
<td></td>
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price }}</td>
<td>{{ product.starRating }}</td>
</tr>
</ng-container>
Dessa forma, se eu quiser mudar de um HTML <table>
para algo diferente, como um monte de <div>
com estilo flexbox, não preciso "esculpir" a lógica do loop (ou arrisco perdê-la completamente) de dentro do <tr>
. Também evita que a lógica do loop (ngFor) seja parcialmente obscurecida pelo html normal.
@Input()
s.*
é mais conveniente, claro. Mas você está certo,<ng-container>
foi introduzido porque as diferenças de sintaxe causaram alguma confusão.