Разница между ng-template, ng-container и ng-content

1) ‹ng-template› ‹/ng-template›

Как следует из названия, ‹ng - шаблон› - это элемент шаблона, который Angular использует со структурными директивами (* ngIf, * ngFor, [ngSwitch] и пользовательские директивы). Эти элементы шаблона работают только при наличии структурных директив, которые помогают нам определить шаблон, который сам по себе ничего не отображает, а условно отображает их в DOM. Это помогает нам создавать динамические шаблоны, которые можно настраивать и настраивать.

<div> 
   Ng-template Content 
   <div *ngIf=”false else showNgTemplateContent”> 
      Shouldn't be displayed 
   </div>
</div>
 
<ng-template #showNgTemplateContent> Should be displayed
</ng-template>

В приведенном выше примере, если условие ложно, мы покажем текст как «Не должно отображаться», иначе содержимое ng-template будет отображаться как «Должно отображаться».

2) ‹ng-container› ‹/ng-container›

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

Это полезно, если вам не нужен дополнительный div в DOM, вы можете просто использовать
ng-container. Например: если в одном div вызываются две структурные директивы, как показано ниже:

<div *ngIf="details" *ngFor="let info of details">
  {{ info.content }}
</div>

Попытка скомпилировать этот код приведет к следующей ошибке:

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

Одним из способов решения проблемы было бы разделение привязок, как показано ниже:

<div *ngIf="details">
  <div *ngFor="let info of details">
    {{ info.content }}
  </div>
</div>

Или мы можем использовать ‹ng-container› без добавления каких-либо дополнительных элементов в DOM во время выполнения:

<ng-container *ngIf="details">
  <div *ngFor="let info of details">
    {{ info.content }}
  </div>
</ng-container>

3) ‹ng-content› ‹/ng-content›

ng-content используется для проецирования содержимого в компоненты Angular. Вы используете тег ‹ng-content› ‹/ng-content› в качестве заполнителя для этого динамического содержимого, а затем, когда шаблон проанализирован, Angular заменит этот тег заполнителя вашим содержимым.

Например, у вас есть два компонента как родительский и дочерний компонент
и вы хотите показать некоторые данные в дочернем компоненте из родительского компонента.

В parent.component.html селектор ‹app-child› используется для отображения данных дочернего компонента.

<app-child>
  <div> Child Component Details </div>
</app-child>

Если вы проверите в своем браузере ‹div› Сведения о дочернем компоненте ‹/div› внутри
‹app-child› ‹/ app- ребенок › не будет виден. Что, если мы хотим показать этот контент? Здесь на сцену выходит директива ng-content. Что нам нужно сделать, это просто добавить «ng-content» внутри шаблона компонента, и он найдет контент внутри тега директивы и добавит его в этот шаблон в том конкретном месте, где мы добавили тег «ng-content».

Поэтому вместо div вы делаете что-то подобное с компонентами Angular, за исключением случаев, когда вы указываете Angular, где его отображать в родительском шаблоне, используя ng-content.

В child.component.html:

<h1>Child Info</h1>
<ng-content></ng-content>

Теперь снова зайдите в браузер. Вы увидите следующее: ‹div› Сведения о дочернем компоненте ‹/div›

‹ng - content› принимает атрибут select, который позволяет нам сортировать название нашего рекламного места, а точнее, он позволяет нам определить селектор нашего слота. Это означает «Замени меня, только если у элемента есть атрибут card-body». Затем мы изменяем представление компонента нашего приложения, чтобы включить атрибут card-body.

Например: В child.component.html:

<h1>Child Info</h1>
<ng-content select="[input], [form-field]"></ng-content>

В parent.component.html:

<app-child>
  <h1 input>Content1!</h3>
  <h2 form-field>Content2!</h2>
  <h3 input form-field>Content1 & Content2!</h1>
</app-child>

Если вы проверите свой браузер, все теги заголовков будут видны из дочернего компонента с помощью ‹ng-content›.

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

Спасибо за чтение !!!!!!!!