It is not rendering the @ContentChild in another standalone component.

Added stackblitz

<div class="card">
  <h6 class="card-header">
    <ng-container [ngTemplateOutlet]="cardHeader.tpl"></ng-container>
    @if (hasActions()) {
      <!-- <ng-content select="app-card-header-actions"> </ng-content> -->
    }
  </h6>
  <div class="card-body">
    @defer(when cardMainContent.tpl) {
    <ng-container [ngTemplateOutlet]="cardMainContent.tpl"></ng-container>
    } @loading(minimum 750ms) {
      <div class="spinner-border" role="status">
      </div>
    } @placeholder() {
    <div class="my-5">
      <div class="alert alert-primary text-center" role="alert">
        No Data Found!
      </div>
    </div>
    }
  </div>
</div>

ERROR TypeError: Cannot read properties of undefined (reading ‘tpl’)
at CardComponent_Template (card.component.html:3:19)

Content projection should work and it should display the content from different cards.