Two CdkDropListGroups in same page

[naumcodewell]

What are you trying to do?

I'm trying to implement two CdkDropListGroups in the same page. I have the following method for drag and move:

@ViewChild(CdkDropListGroup, null) group: CdkDropListGroup<CdkDropList>;

dragMoved(e: CdkDragMove) {
        const point = this.getPointerPositionOnPage(e.event);

        this.group._items.forEach(dropList => {
            if (__isInsideDropListClientRect(dropList, point.x, point.y)) {
                this.activeContainer = dropList;
                return;
            }
        });
    }

and the following HTML:

<div cdkDropListGroup #groupOne class="dragDropContainer">
      <div cdkDropList... </div>
      <div cdkDropList... </div>
</div>

<div cdkDropListGroup #groupTwo class="dragDropContainer">
      <div cdkDropList... </div>
      <div cdkDropList... </div>
</div>

What troubleshooting steps have you tried?

When i drag items in the second GroupList, the method above ( this.group._items) gets only the first group Elements (dropLists) of the page.

How can i link one variable ( @ViewChild(CdkDropListGroup, null) group: CdkDropListGroup ) to the first CdkGroupList and other variable to the second CdkGroupList in the HTML?

Thank you!

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[naumcodewell]

I fixed it! I used ViewChildren instead of ViewChild, because ViewChild looks only for the first element in the DOM.

[crisbeto]

Closing since it looks like it's not an issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}