Введение

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

Что такое ng-template?

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

Основные особенности ng-template:

Не визуализируется напрямую: Содержимое внутри ng-template не будет отображено в DOM до тех пор, пока оно не будет явно вставлено с использованием другой директивы, например, ngTemplateOutlet.
Может содержать любой HTML или Angular компоненты: Внутри ng-template можно разместить любой допустимый HTML или Angular компоненты и директивы.
Именованные шаблоны: Можно назначать шаблоны именами с помощью переменных.

Пример использования ng-template:

<ng-template #myTemplate>
  <p>This is a template content.</p>
</ng-template>

Что такое ngTemplateOutlet?

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

Основные особенности ngTemplateOutlet:

Динамическая вставка шаблона: Директива ngTemplateOutlet позволяет вставлять шаблон в определенное место на странице в зависимости от логики приложения.
Передача данных в шаблон: С помощью ngTemplateOutletContext можно передавать данные в шаблон.

Пример использования ngTemplateOutlet:

<ng-container *ngTemplateOutlet="myTemplate"></ng-container>

Практическое применение ng-template и ngTemplateOutlet

Пример 1: Простая вставка шаблона

В этом примере мы создадим простой шаблон и вставим его в определенное место в DOM с использованием ngTemplateOutlet.

<!-- Определение шаблона -->
<ng-template #simpleTemplate>
  <p>This is a simple template content.</p>
</ng-template>

<!-- Вставка шаблона -->
<ng-container *ngTemplateOutlet="simpleTemplate"></ng-container>

С помощью ссылки #simpleTemplate передаем содержимое ng-template в ng-container.

Пример 2: Именованные шаблоны и переключение между ними

В этом примере мы создадим два именованных шаблона и будем переключаться между ними в зависимости от состояния компонента.

<!-- Определение шаблонов -->
<ng-template #templateOne>
  <p>This is the first template.</p>
</ng-template>

<ng-template #templateTwo>
  <p>This is the second template.</p>
</ng-template>

<!-- Вставка шаблона в зависимости от состояния -->
<ng-container *ngTemplateOutlet="isFirstTemplate ? templateOne : templateTwo"></ng-container>

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-switcher',
  templateUrl: './template-switcher.component.html',
})
export class TemplateSwitcherComponent {
  isFirstTemplate = true;

  toggleTemplate() {
    this.isFirstTemplate = !this.isFirstTemplate;
  }
}

Пример 3: Передача данных в шаблон

В этом примере мы создадим шаблон, который принимает переменные, и передадим данные в этот шаблон с помощью ngTemplateOutletContext.

Шаг 1: Определите шаблон с контекстом

Создайте ng-template и используйте let для объявления переменных, которые будут переданы в шаблон через контекст. В этом примере мы будем передавать имя и возраст.

<!-- Определение шаблона с контекстом -->
<ng-template #contextTemplate let-name let-age="age">
  <p>Name: {{ name }}</p>
  <p>Age: {{ age }}</p>
</ng-template>

Шаг 2: Вставьте шаблон с передачей данных

Используйте ngTemplateOutlet и ngTemplateOutletContext, чтобы передать данные в шаблон. В контексте можно передавать данные через объект, где ключом является имя переменной в шаблоне.

<!-- Вставка шаблона с передачей данных -->
<ng-container *ngTemplateOutlet="contextTemplate; context: { $implicit: 'John', age: 30 }"></ng-container>

$implicit используется для передачи значения по умолчанию в шаблон. В этом примере name будет равен 'John'.
Для остальных переменных используйте ключи объекта контекста. Здесь age будет равен 30.

В этом примере:

Мы определяем шаблон contextTemplate с двумя переменными: name и age.
Мы используем директиву ngTemplateOutlet для вставки шаблона в DOM.
С помощью ngTemplateOutletContext мы передаем объект с данными: name и age. Значение переменной name передается через $implicit, а age — через ключ age.

Этот подход позволяет динамически передавать данные в шаблон, делая его более гибким и адаптивным.

Использование ng-template в структурных директивах

Структурные директивы, такие как ngIf, ngFor, и ngSwitch, используют ng-template для манипуляции с элементами DOM.

Пример 4: Использование ng-template с ngIf

Когда вы используете ngIf, Angular создает ng-template за кулисами для динамического добавления или удаления элементов DOM.

<!-- Условный рендеринг -->
<div *ngIf="isVisible; else elseBlock">
  <p>This is visible if isVisible is true.</p>
</div>

<!-- Альтернативный блок -->
<ng-template #elseBlock>
  <p>This is visible if isVisible is false.</p>
</ng-template>

import { Component } from '@angular/core';

@Component({
  selector: 'app-conditional-rendering',
  templateUrl: './conditional-rendering.component.html',
})
export class ConditionalRenderingComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

Пример 5: Использование ng-template с ngFor

ngFor также использует ng-template для итерации по элементам и их динамического создания.

<!-- Итерация по массиву элементов -->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
})
export class ItemListComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
}

Итог:

ng-template используется для определения шаблона, который не отображается напрямую.
ngTemplateOutlet используется для вставки и отображения содержимого ng-template в DOM, с возможностью передачи данных в шаблон.

Эти два инструмента часто используются вместе для создания гибких и динамически изменяемых пользовательских интерфейсов в Angular.

Основные различия между ng-template и ng-container.

1. Цель использования:

ng-template: Используется для определения шаблонов, которые не отображаются напрямую в DOM, а могут быть динамически вставлены с помощью других директив.
ng-container: Используется для группировки элементов в шаблоне без добавления дополнительного уровня в DOM. Полезен для структурных директив.

2. Визуализация в DOM:

ng-template: Никогда не отображается напрямую в DOM. Его содержимое может быть вставлено в DOM только через другие директивы, такие как ngTemplateOutlet.
ng-container: Отображается в DOM, но сам не создает дополнительного элемента. Он служит контейнером для других элементов и структурных директив.

3. Применение:

ng-template: Используется для создания шаблонов, которые могут быть динамически вставлены в различные части приложения. Полезен для передачи контекста и динамической вставки содержимого.
ng-container: Используется для группировки элементов без создания дополнительных контейнеров.
Про ng-conteiner можно почитать в моей небольшой статье по ссылке

Заключение

Директивы ng-template и ngTemplateOutlet предоставляют мощные средства для динамического создания и управления шаблонами в Angular. Они позволяют создавать более гибкие и адаптивные пользовательские интерфейсы, управляя содержимым на уровне шаблонов. Надеемся, что это руководство помогло вам лучше понять, как и когда использовать ng-template и ngTemplateOutlet в ваших приложениях Angular.

ng-template предназначен для создания шаблонов, которые могут быть динамически вставлены в DOM с помощью директив, таких как ngTemplateOutlet.
ng-container используется для группировки элементов и структурных директив без добавления дополнительных элементов в DOM.

Вот такие пироги.

Руководство по ng-template и ngTemplateOutlet в Angular