diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts
index c3c0f462162..a37613983cb 100644
--- a/src/cdk/drag-drop/drag.spec.ts
+++ b/src/cdk/drag-drop/drag.spec.ts
@@ -26,6 +26,7 @@ import {CdkDragDrop} from './drag-events';
import {moveItemInArray} from './drag-utils';
import {CdkDropList} from './drop-list';
import {CdkDragHandle} from './drag-handle';
+import {CdkDropListGroup} from './drop-list-group';
const ITEM_HEIGHT = 25;
const ITEM_WIDTH = 75;
@@ -2218,6 +2219,14 @@ describe('CdkDrag', () => {
expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled();
}));
+ it('should not add child drop lists to the same group as their parents', fakeAsync(() => {
+ const fixture = createComponent(NestedDropListGroups);
+ const component = fixture.componentInstance;
+ fixture.detectChanges();
+
+ expect(Array.from(component.group._items)).toEqual([component.listOne, component.listTwo]);
+ }));
+
});
});
@@ -2603,6 +2612,25 @@ class ConnectedDropZonesWithSingleItems {
droppedSpy = jasmine.createSpy('dropped spy');
}
+@Component({
+ template: `
+
+ `
+})
+class NestedDropListGroups {
+ @ViewChild('group') group: CdkDropListGroup;
+ @ViewChild('listOne') listOne: CdkDropList;
+ @ViewChild('listTwo') listTwo: CdkDropList;
+}
+
+
/**
* Component that passes through whatever content is projected into it.
* Used to test having drag elements being projected into a component.
diff --git a/src/cdk/drag-drop/drop-list-group.ts b/src/cdk/drag-drop/drop-list-group.ts
index b6a97bbf265..e7bea56f2b0 100644
--- a/src/cdk/drag-drop/drop-list-group.ts
+++ b/src/cdk/drag-drop/drop-list-group.ts
@@ -15,7 +15,8 @@ import {Directive, OnDestroy} from '@angular/core';
* from `cdkDropList`.
*/
@Directive({
- selector: '[cdkDropListGroup]'
+ selector: '[cdkDropListGroup]',
+ exportAs: 'cdkDropListGroup',
})
export class CdkDropListGroup implements OnDestroy {
/** Drop lists registered inside the group. */
diff --git a/src/cdk/drag-drop/drop-list.ts b/src/cdk/drag-drop/drop-list.ts
index 6afbc983b58..00ab3c667af 100644
--- a/src/cdk/drag-drop/drop-list.ts
+++ b/src/cdk/drag-drop/drop-list.ts
@@ -20,6 +20,7 @@ import {
Optional,
Directive,
ChangeDetectorRef,
+ SkipSelf,
} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {CdkDrag} from './drag';
@@ -81,6 +82,8 @@ interface ListPositionCacheEntry {
selector: '[cdkDropList], cdk-drop-list',
exportAs: 'cdkDropList',
providers: [
+ // Prevent child drop lists from picking up the same group as their parent.
+ {provide: CdkDropListGroup, useValue: undefined},
{provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList},
],
host: {
@@ -157,7 +160,7 @@ export class CdkDropList implements OnInit, OnDestroy {
private _dragDropRegistry: DragDropRegistry>,
private _changeDetectorRef: ChangeDetectorRef,
@Optional() private _dir?: Directionality,
- @Optional() private _group?: CdkDropListGroup) {}
+ @Optional() @SkipSelf() private _group?: CdkDropListGroup) {}
ngOnInit() {
this._dragDropRegistry.registerDropContainer(this);