Лаборатория Angular

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

Демонстрация: Content Projection

Этот пример показывает работу переиспользуемого компонента-карточки, который использует <ng-content> для гибкого отображения различного контента. С помощью атрибутов-селекторов (например, [card-title]) можно вставлять HTML в определенные "слоты" внутри компонента.

Простая карточка

Это базовый пример использования. Только заголовок и основной текст были "спроецированы" в компонент <app-card>.

Карточка с изображением

Angular Logo
  • Гибкая структура контента
  • Переиспользование компонента
  • Использование селекторов для слотов

Карточка без футера

Этот пример демонстрирует, что слоты являются опциональными. Если контент для футера не предоставлен, секция <footer> просто не отображается.