Контент проекта внутри проецируемого контента

Question

У меня есть компонент динамической формы, который создает все поля формы из настраиваемого объекта. Эта форма может быть разделена на группы только по причинам ux.

Я пытаюсь реализовать возможность проецирования контейнера для этих групп из родительского компонента.

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

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[container]',
})
export class ContainerDirective {
  @Input() name: string;

  constructor(public templateRef: TemplateRef<any>, public viewContainerRef: ViewContainerRef) {}
}

Я использую директиву в родительском компоненте так:

<moc-dynamic-form [dataSource]="formDataSource">
  <moc-card *container></moc-card>
</moc-dynamic-form>

Директива dataSource динамически создает различные поля формы, а динамическая форма получает проекцию контейнера, который я хочу использовать в качестве контейнера групп.

В компоненте динамической формы я получаю контейнер из директивы.

@ContentChild(ContainerDirective) container: ContainerDirective;

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

<form [formGroup]="form">
    <div
      [class]="'p-grid ui-fluid p-formgrid p-align-start ' + ((options$ | async)?.formStyle || '')"
    >
      <ng-container *ngFor="let field of fields$ | async">
        <ng-container
          *ngTemplateOutlet="
            isGroup(field) ? groupContainerTemplate : fieldTemplate;
            context: { $implicit: field }
          "
        ></ng-container>
      </ng-container>
    </div>
  </form>
</div>


<ng-template #groupContainerTemplate let-containerField>
  <ng-container *ngIf="container">
    <ng-container *ngTemplateOutlet="container.templateRef">
      <ng-container
        *ngTemplateOutlet="groupTemplate; context: { $implicit: containerField }"
      ></ng-container>
    </ng-container>
  </ng-container>
  <ng-container *ngIf="!container">
    <ng-container
      *ngTemplateOutlet="groupTemplate; context: { $implicit: containerField }"
    ></ng-container>
  </ng-container>
</ng-template>

<ng-template #groupTemplate let-groupField>
  <!— I place here the fields of each group --!>
</ng-template>

Все работает нормально, за исключением того, что поля не отображаются (я вижу контейнеры). Я пробовал много обходных путей, создав в компоненте встроенное представление и передав туда groupTemplate. Но и это не дало мне никакого результата.

Любая помощь будет высоко оценен.