Проекция Контента в Angular Используя Тег <ng-content>

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

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

Применение Тега <ng-content>

Представим, что у вас есть модальное окно, которое вы хотите переиспользовать в разных частях вашего приложения. Вместо копирования и вставки HTML кода для каждого нового случая, вы можете создать компонент модального окна и использовать тег <ng-content>, чтобы заполнить его содержимым.

Код компонента может выглядеть так:

<div class="modal">
    <h2>Заголовок модального окна</h2>
    <ng-content></ng-content>
</div>

Теперь вы сможете использовать ваш модальный компонент в любом месте вашего приложения и передавать ему любое содержимое, которое вы хотите проецировать:

<app-modal>
    <p>Это динамический контент, который будет показан внутри модального окна.</p>
</app-modal>

В результате, текст в блоке <p> будет отображаться внутри компонента app-modal, конкретно в месте где вы поместили тег <ng-content>.

Важно отметить, что Angular также предлагает другие теги, такие как <ng-container> и <ng-template>, но они имеют другое предназначение и не используются для проекции контента. Поэтому ответ на вопрос "Как достигается проекция контента в Angular" - это тег <ng-content>.