How to get the position of childeren in the parent component

I am showing multiple samples of two components (A and B) as children in my App component as following:


<div class="example-boundary">
@for (item of AComponent; track item; let AIdx = $index) {
<app-elementA
id="{{AIdx}}"
(pointerdown)="onAMouseDown($event)"
(pointermove)="onAMouseMove($event)"
(pointerup)="onAMouseUp($event)"
></app-elementA>
}

@for (item of BComponent; track item; let BIdx = $index) {
<app-elementB
id="{{BIdx}}"
(pointerdown)="onBMouseDown($event)"
(pointermove)="onBMouseMove($event)"
(pointerup)="onBMouseUp($event)"
></app-elementB>
}
</div>


Both component A and B are cdkDrag elements. How can I get their new positions after they are dragged and dropped in a new place?

Continue reading...