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>
Установка и первый запуск Angular
TypeScript, Bootstrap, Main.ts
Создание компонентов в Angular
Шаблон и стили компонента
Компонент и данные
События
Динамические шаблоны в Angular
Angular CSS и Style
Директива ngFor
Компонент и модель
Связывание свойств и событий
Инкапсуляция стилей и ссылки
ng-content
События и жизненный цикл
Навигация. Передача данных событиями
Директива атрибута
HostListener и HostBinding
Binding свойств директив
Структурные директивы
Сервисы
JavaScript операторы
Route. Переключения и параметры
Route. Вынос настроек роутера
Route. Защита роутера
Route. Контроль навигации с помощью сервиса
Route передача статичных данных
Route Resolving
Route. Обновление шаблона
Observable. Subscribe и Unsubscribe
Subject
Формы в Angular
Формы. Шаблонный подход.
Формы. Реактивный подход.
Похожие материалы
Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.
Вывод данных в цикле с помощью директивы ngFor
Что такое структурные директивы. Встроенные и собственные структурные директивы.
