Перейти к содержанию

ng-content

Angular позволяет разместить верстку в теге подключения компонента.

В теге компонента разместим часть кода, который хотим передать в шаблон:

<app-server-element
  *ngFor="let serverElement of serverElements"
  [srvElement]="serverElement"
>
  <p>
    <strong *ngIf="serverElement.type === 'server'" style="color: red"
      >{{ serverElement.content }}</strong
    >
    <em *ngIf="serverElement.type === 'blueprint'"
      >{{ serverElement.content }}</em
    >
  </p>
</app-server-element>

В шаблоне компонента app-server-element, подсвеченный контент будет выведен в теге ng-content:

<h1>Server element</h1>
<ng-content></ng-content>