Nested placeholder breaks if mat-card and placeholder are wrapped in another element

[invaderb]

Describe the bug

In the nested example if you wrap the nested mat-cards and placeholderref in a div etc it breaks the placement of the placeholder and only puts its at the beginning or end of each nested element

To Reproduce

  <div class="container-fluid">
  <ng-template #recursiveList let-list>

     <!-- Wrapped nested elements. -->
    <div class="d-flex gap-2">

    <mat-card appearance="raised" class="dndPlaceholder" dndPlaceholderRef> </mat-card>
    <mat-card
        appearance="raised"
        *ngFor="let item of list"
        [dndDisableIf]="!!item.disable"
        [dndDraggable]="item"
        (dndCanceled)="onDragged(item, list, 'none')"
        (dndMoved)="onDragged(item, list, 'move')"
        dndEffectAllowed="move">
        <mat-card-header class="p-2">
        <div *ngIf="item.handle" class="drag-handle me-2 text-muted">
            <mat-icon dndHandle mat-list-icon>drag_handle </mat-icon>
        </div>

        {{ item.content }}
        </mat-card-header>

        <mat-card-content class="d-flex align-items-start gap-2 flex-column p-2">
        <div *ngIf="!!item.customDragImage" dndDragImageRef>
            MY_CUSTOM_DRAG_IMAGE
        </div>

        <div
            *ngIf="item.children"
            (dndDrop)="onDrop($event, item.children)"
            class="flex p-2 gap-2 rounded-2"
            dndDropzone>
            <ng-container
            *ngTemplateOutlet="
                recursiveList;
                context: { $implicit: item.children }
            "></ng-container>
        </div>
        </mat-card-content>
    </mat-card>
    </div>
  </ng-template>

  <div
    (dndDrop)="onDrop($event, nestableList)"
    class="d-flex gap-3 p-3 rounded-2"
    dndDropzone>
    <ng-container
      *ngTemplateOutlet="
        recursiveList;
        context: { $implicit: nestableList }
      "></ng-container>
  </div>
</div>

Steps to reproduce the behavior:

1. Go to the demo app edit the nested component html and wrap the nested mat-cards like the example above
2. drag any nested element and see the placeholder not behaving correctly

If you inspect the html in the dev console while this is happening the placeholder element is getting added above the wrapped element.

Expected behavior A clear and concise description of what you expected to happen.

• Even if the nested elements are wrapped in a parent container they should work as intended

[invaderb]

nvm I figured out a work around rather than putting the dropzone directive on the nested wrapper around the nested ng-container I put it on the div wrapper above and that worked

  <div class="container-fluid">
  <ng-template #recursiveList let-list>

     <!-- Wrapped nested elements. -->
    <div class="d-flex gap-2" dndDropzone (dndDrop)="onDrop($event, item.children)">

    <mat-card appearance="raised" class="dndPlaceholder" dndPlaceholderRef> </mat-card>
    <mat-card
        appearance="raised"
        *ngFor="let item of list"
        [dndDisableIf]="!!item.disable"
        [dndDraggable]="item"
        (dndCanceled)="onDragged(item, list, 'none')"
        (dndMoved)="onDragged(item, list, 'move')"
        dndEffectAllowed="move">
        <mat-card-header class="p-2">
        <div *ngIf="item.handle" class="drag-handle me-2 text-muted">
            <mat-icon dndHandle mat-list-icon>drag_handle </mat-icon>
        </div>

        {{ item.content }}
        </mat-card-header>

        <mat-card-content class="d-flex align-items-start gap-2 flex-column p-2">
        <div *ngIf="!!item.customDragImage" dndDragImageRef>
            MY_CUSTOM_DRAG_IMAGE
        </div>

        <div
            *ngIf="item.children"
            class="flex p-2 gap-2 rounded-2"
            >
            <ng-container
            *ngTemplateOutlet="
                recursiveList;
                context: { $implicit: item.children }
            "></ng-container>
        </div>
        </mat-card-content>
    </mat-card>
    </div>
  </ng-template>

  <div
    (dndDrop)="onDrop($event, nestableList)"
    class="d-flex gap-3 p-3 rounded-2"
    dndDropzone>
    <ng-container
      *ngTemplateOutlet="
        recursiveList;
        context: { $implicit: nestableList }
      "></ng-container>
  </div>
</div>

[invaderb]

meant to close with comment