ng-template
é um elemento Angular usado para desenhar modelos HTML.
We use ng-template
with angular *ngIf
directive to display else
template.
So what exactly this ng-template
will do?
Se realmente torna modelo HTML, veremos com um exemplo.
<div> ng-template works!</div><ng-template>Inside ng-template tag</ng-template>
Se você ver o resultado irá apresentar apenas ng-template works
que está no elemento div.E dê uma olhada no código fonte HTML gerado.

pode ver uma secção de comentários vazia em vez de ng-template
tag. Vamos entrar profundamente em ng-template
para entender este comportamento.
Índice
o Que é gn-modelo Angular
-
ng-template
é um elemento virtual e seu conteúdo é exibido apenas quando necessário (baseado em condições). -
ng-template
deve ser utilizado juntamente com directivas estruturais como, ou directivas estruturais personalizadas.É por isso que no exemplo acima o conteúdo deng-template
não são exibidos. -
ng-template
never meant to be used like other HTML elements. É uma implementação interna das directivas estruturais da Angular.quando usar uma directiva estrutural em Angular, adicionaremos um asterisco prefixo (*) antes do nome da Directiva. Este asterisco é uma notação de mão curta parang-template
. - sempre que o encontro Angular com o símbolo asterisco (*), estamos informando Angular dizendo que é uma diretiva estrutural e Angular irá converter o atributo diretiva para
ng-template
elemento. -
ng-template
não é exatamente um elemento verdadeiro da web. Quando compilarmos o nosso código, não veremos uma etiquetang-template
tag no DOM HTML. - Angular will evaluate the
ng-template
element to convert it into a comment section in HTML DOM.
Vamos passar por diferentes estruturais directivas, como *ngIf
*ngFor
e para entender isso melhor.
Usando ng-modelo com *ngIf exemplo
Tomar um examle de *ngIf directiva 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>
- A diretiva a ser convertido para o membro de dados de
ng-template
- inline elemento de modelo, juntamente com os atributos (de classe, etc.), movido dentro de
ng-template
o elemento
Então, nós temos apenas then
modelo, que é uma linha de modelo e não há nenhum else
modelo.Now will dig into the source code of NgIf
Class to understand how ng-template
element will work.

em Qualquer estrutura directiva Angular terá duas propriedades
- TemplateRef
- ViewContainerRef
estrutural directiva cria a vista a partir de ng-template
e o insere no contentor de vista adjacente a directiva elemento de host.
o Que significa estruturais directiva acessar o conteúdo de ng-template
através de TemplateRef e atualiza o ViewContainerRef
TemplateRef é o nome da classe e ng-template
é o correspondente tag de HTML
E se você ver o código fonte acima de NgIf classe possui quatro propriedades
- _thenTemplateRef :
ng-template
referência de, em seguida, - _elseTemplateRef :
ng-template
referência de pessoa - _thenViewRef : exibição inserida ref, em seguida,
- _elseViewRef : exibição inserida ref de pessoa
Se você veja o construtor tem dois parâmetros private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>
Construtor irá acessar o ng-template
por templateRef
parâmetro e atribuí-lo thenTemplateRef
. o modelo incorporado será o modelo predefinido na Directiva ngIf.
no exemplo acima que não estamos passando qualquer pessoa, ou então modelos e a única entrada que estamos dando é
com Base na condição estamos a actualizar a vista. Ver o código fonte de updateView()
método de NgIf
classe.

Na atualização de vista de método Angular irá atribuir thenViewRef
embedded modo de exibição criado a partir de thenTemplateRef
eu.e, vista a partir de ng-template
Então, se a condição display
for verdadeira página da web exibe I am Visible.

E Se você ver o HTML gerado ng-template
que está sendo convertida para uma seção de comentários, o que dá a informação sobre a condição avaliada.
Se a gente passar else
modelo via que está sendo atribuído a elseTemplateRef
Se a condição for false updateView()
método Angular irá atribuir elseViewRef
embedded modo de exibição criado a partir de elseTemplateRef

E nós pode alterar dinamicamente pessoa, ou então modelos de tempo de execução, atualizando e modelo de referências
Usando ng-modelo com *ngFor exemplo
Você pode estar pensando que por isso precisa usar o asterisco(*) Notação quando podemos usar o elemento ng-template
diretamente. Yes We can use ng-template
instead of short hand notation.
*ngIf é uma diretiva simples sem muita complexidade. Esta notação asterisco ou microsyntax (em termos angulares) é muito útil para diretivas estruturais complexas como *ngFor
. Dê uma olhada no exemplo abaixo
<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>
com a notação asterisco ou Microsyntax Angular podemos dar instruções à diretiva em formato de cadeia simples. And Angular microsyntax parser convert that string into the attributes of ng-template
as shown above
I dont want to get into the implementation details of*ngFor
. Tudo o que precisamos entender é asterisco (*) Notação fácil de escrever e entender.
Até que a menos que você tenha uma boa razão, preferem asterisco(*) notação em vez de ng-template
Usando ng-modelo com NgSwitch exemplo
NgSwitch
não é uma única directiva é, na verdade, é usado junto com outras diretivas *ngSwitchCase
e *ngSwitchDefault
Ter um olhar para o abaixo ngSwitch
exemplo
<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>
Se você ver o código acima eu não usei asterisco antes de ngSwitch
porque, NgSwitch não é um estruturais directiva. É uma directiva de atributos.
NgSwitch controla o comportamento das outras duas diretivas de switch ngSwitchCase
engSwitchDefault
.
ambosngSwitchCase
ngSwitchDefault
são directivas estruturais que é por isso que eu usei asterisco antes deles. E estes serão convertidos para ng-template
elementos
resumo
espero que entenda o que é ng-template
em Angular e porque é útil. E se você está escrevendo você próprio estruturais directivas você deve ter uma ideia clara sobre o ng-template>
No meu próximo artigo vou explicar como escrever um personalizado estruturais directiva com a ajuda de ng-template