Положение внутри Html в Angular компоненте

Question

У меня есть следующий сценарий:

app.component. html

<app-card>
  This is the card body
</app-card>

card.component. html

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">

  </div>
</div>

Есть ли простой способ (например, интерполяция) для перевода текста This is the card body в <div class="card-body">?

Answer 1

Использование ng-content:

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    <ng-content></ng-content>
  </div>
</div>

Answer 2

в app.component. html файл
попробуйте код ниже

<ng-content>
{{ write your property here }}
</ng-content>