What is ng-template in Angular?

Angular’s ng-template element defines a template that is not rendered by default.

ng-template必须配合Angular指令使用，例如ngIf、ngFor、ngSwitch等。或者定义模板变量以做他用（详情看这里），单纯使用ng-template是不会渲染的。

以下内容不会渲染。

1
2
3

<ng-template>
  Hello, world!
</ng-template>

以下内容也不会渲染，为什么？

1
2
3

<ng-template *ngIf="true">
  Hello, world!
</ng-template>

以下内容可以渲染：

1
2
3

<ng-template [ngIf]="true">
  Hello, world!
</ng-template>

指令的简写形式

Angular会将指令的简写形式转换成ng-template的完整形式。
以下代码

1	<div *ngIf="true">Hello, world!</div>

会被Angular内部转换为

1	<ng-template [ngIf]="true"><div>Hello, world!</div></ng-template>

但是渲染的时候，<ng-template>不会被渲染，只会渲染<div>。ng-container和ng-template一样，都不会向DOM中插入元素，而只会渲染他们所包裹的元素。