ng-template — Angular

Элемент Angular <ng-template> определяет шаблон, который не отображается по умолчанию.

Описание

Элемент Angular <ng-template> определяет шаблон, который не отображается по умолчанию.

С помощью <ng-template> можно определить содержимое шаблона, которое Angular отображает только тогда, когда вы прямо или косвенно указываете ему сделать это, получая полный контроль над тем, как и когда отображается содержимое.

Обратите внимание: если обернуть содержимое в <ng-template>, не указав Angular отобразить его, такое содержимое не появится на странице. Например, при обработке следующего HTML-кода Angular не отобразит среднее «Hip!» во фразе «Hip! Hip! Hooray!» из-за окружающего его <ng-template>.

<p>Hip!</p>
<ng-template>
  <p>Hip!</p>
</ng-template>
<p>Hooray!</p>

Примечания по использованию

Структурные директивы

Одно из основных назначений <ng-template> — хранить содержимое шаблона, которое будет использоваться структурными директивами. Такие директивы могут добавлять и удалять копии содержимого шаблона в соответствии со своей логикой.

При использовании сокращённого синтаксиса структурных директив Angular создаёт <ng-template> за кулисами.

TemplateRef

Элементы <ng-template> представлены экземплярами класса TemplateRef.

Чтобы добавить копии шаблона в DOM, передайте этот объект методу ViewContainerRef createEmbeddedView().

Переменные шаблона

На элементы <ng-template> в шаблонах можно ссылаться с помощью стандартных переменных шаблона.

Так элементы <ng-template> используются в качестве блоков else для ngIf.

Такие переменные шаблона можно использовать вместе с директивами ngTemplateOutlet для отображения содержимого, определённого внутри тегов <ng-template>.

Поиск

Запрос (например, ViewChild) может найти TemplateRef, связанный с элементом <ng-template>, чтобы его можно было использовать программно, например передать методу ViewContainerRef createEmbeddedView().

Контекст

Внутри тегов <ng-template> можно ссылаться на переменные из окружающего внешнего шаблона. Кроме того, с элементами <ng-template> можно связать объект контекста. Такой объект содержит переменные, к которым можно обращаться из содержимого шаблона с помощью объявлений шаблонных переменных (let и as).