diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index ab9a1bf9431b..7cd237c5c87c 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -636,6 +636,19 @@ describe('CdkDrag', () => {
expect(dragElement.style.transform).toBeFalsy();
}));
+ it('should be able to set an alternate drag root element for ng-container', fakeAsync(() => {
+ const fixture = createComponent(DraggableNgContainerWithAlternateRoot);
+ fixture.detectChanges();
+
+ const dragRoot = fixture.componentInstance.dragRoot.nativeElement;
+
+ expect(dragRoot.style.transform).toBeFalsy();
+
+ dragElementViaMouse(fixture, dragRoot, 50, 100);
+
+ expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)');
+ }));
+
it('should preserve the initial transform if the root element changes', fakeAsync(() => {
const fixture = createComponent(DraggableWithAlternateRoot);
fixture.detectChanges();
@@ -7150,6 +7163,21 @@ class DraggableWithRadioInputsInDropZone {
];
}
+
+@Component({
+ template: `
+
+ `
+})
+class DraggableNgContainerWithAlternateRoot {
+ @ViewChild('dragRoot') dragRoot: ElementRef;
+ @ViewChild(CdkDrag) dragInstance: CdkDrag;
+}
+
/**
* Drags an element to a position on the page using the mouse.
* @param fixture Fixture on which to run change detection.
diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts
index fb2d216f81fd..eb3b7abc7335 100644
--- a/src/cdk/drag-drop/directives/drag.ts
+++ b/src/cdk/drag-drop/directives/drag.ts
@@ -330,9 +330,14 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy {
/** Syncs the root element with the `DragRef`. */
private _updateRootElement() {
- const element = this.element.nativeElement;
- const rootElement = this.rootElementSelector ?
- element.closest(this.rootElementSelector) : element;
+ const element = this.element.nativeElement as HTMLElement;
+ let rootElement = element;
+ if (this.rootElementSelector) {
+ rootElement = element.closest !== undefined
+ ? element.closest(this.rootElementSelector) as HTMLElement
+ // Comment tag doesn't have closest method, so use parent's one.
+ : element.parentElement?.closest(this.rootElementSelector) as HTMLElement;
+ }
if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
assertElementNode(rootElement, 'cdkDrag');