🟢 Проекция контента

Информация

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

Здесь вы можете изучить все о ng-content, начиная с простых примеров и до более сложных.

Документацию ngTemplateOutlett, вместе с базовыми примерами, можно найти тут.

Имея эти два инструмента в своем распоряжении, вы теперь готовы пройти испытание.

Пояснение

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

Хотя приложение работает, его внутреннее устройство далеко от идеала. Каждый раз, когда вам нужно реализовать новую карточку, вам придется изменять card.component.ts. В реальных проектах этот компонент может использоваться во многих приложениях. Цель этого упражнения создать CardComponent, внешний вид которого можно настроить без каких-либо изменений. После того как вы создадите этот компонент, вы можете создать CityCardComponent без модификации CardComponent.

Ограничения

• Вы должны провести рефакторинг CardComponent и ListItemComponent.
• Директива NgFor должна быть определена и должна оставаться внутри CardComponent, несмотря на возможное желание перенести её в ParentCardComponent,как это сделано в TeacherCardComponent.
• CardComponent не должен содержать NgIf или NgSwitch.
• CSS: избегайте использования ::ng-deep. Ищите альтернативные способы стилизации с помощью CSS.

Дополнительные задачи

• Попробуйте использовать новый синтаксис для циклов и условий (документация тут).
• Используйте signal API для управления состоянием компонентов (документация тут).
• Для ссылки на шаблон используйте директивы вместо магических строк (What is wrong with magic strings?).