Angular 6 - place a dynamic form within an ngx-sortable control

I'm struggling with the layout of this in Angular 6.

I have a form component which get added dynamically at runtime.

I also have ngx-sortable, which I would like the dynamic content to be in but cant quite work out how.

Sortable control

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
          <ng-template let-item>
              <!-- sortable items here?? -->
          </ng-template>
   </ngx-sortable>

the dynamic form

<app-attraction-text></app-attraction-text>

I had tried placing the tag for the dynamic form in the sortable control but the control appeared with nothing in it. Has anyone done this before who can suggest the correct way?

Just to give some context, here is the html for the dynamic control, I can click a button and create as many of these as I need, I want to then be able to sort them.

<form [formGroup]='contentForm' style="margin-top:30px">
    <div formArrayName='content'>
        <div *ngFor="let formGroup of contentLines.controls; let i = index">
            <div class="card text-left">
                <div class="card-header text-secondary">Attraction Text
                  <img  align="right" class="pull-right table-header-padding" src="assets/images/LockLineIcon.png" />
                  <img  class="float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="delete(i)"/>
                </div>
                <div class="card-body" >
                  <textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" ></textarea>
                </div>
                <div class="card-footer">
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddParagraphIcon.png" (click)="add();" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddQuoteIcon.png" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddHighlightTextIcon.png" (click)="AddHighlight()"/>
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/addimage.png" (click)="AddImage()"/>
                    <img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />
                </div>
            </div>
        </div>
    </div>
</form>

from Angular 6 - place a dynamic form within an ngx-sortable control