@angular/cdk 7.2.0 → 7.2.1

package/bundles/cdk-coercion.umd.js

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-	typeof define === 'function' && define.amd ? define('@angular/cdk/coercion', ['exports'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.coercion = {})));
-}(this, (function (exports) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
+	typeof define === 'function' && define.amd ? define('@angular/cdk/coercion', ['exports', '@angular/core'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.coercion = {}),global.ng.core));
+}(this, (function (exports,core) { 'use strict';
 
 /**
  * @fileoverview added by tsickle
@@ -84,11 +84,27 @@ function coerceCssPixelValue(value) {
     return typeof value === 'string' ? value : value + "px";
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * Coerces an ElementRef or an Element into an element.
+ * Useful for APIs that can accept either a ref or the native element itself.
+ * @template T
+ * @param {?} elementOrRef
+ * @return {?}
+ */
+function coerceElement(elementOrRef) {
+    return elementOrRef instanceof core.ElementRef ? elementOrRef.nativeElement : elementOrRef;
+}
+
 exports.coerceBooleanProperty = coerceBooleanProperty;
 exports.coerceNumberProperty = coerceNumberProperty;
 exports._isNumberValue = _isNumberValue;
 exports.coerceArray = coerceArray;
 exports.coerceCssPixelValue = coerceCssPixelValue;
+exports.coerceElement = coerceElement;
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package/bundles/cdk-coercion.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk-coercion.umd.js","sources":["../../src/cdk/coercion/css-pixel-value.ts","../../src/cdk/coercion/array.ts","../../src/cdk/coercion/number-property.ts","../../src/cdk/coercion/boolean-property.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a value to a CSS pixel value. */\nexport function coerceCssPixelValue(value: any): string {\n  if (value == null) {\n    return '';\n  }\n\n  return typeof value === 'string' ? value : `${value}px`;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Wraps the provided value in an array, unless the provided value is an array. */\nexport function coerceArray<T>(value: T | T[]): T[] {\n  return Array.isArray(value) ? value : [value];\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a number. */\nexport function coerceNumberProperty(value: any): number;\nexport function coerceNumberProperty<D>(value: any, fallback: D): number | D;\nexport function coerceNumberProperty(value: any, fallbackValue = 0) {\n  return _isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\n/**\n * Whether the provided value is considered a number.\n * @docs-private\n */\nexport function _isNumberValue(value: any): boolean {\n  // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,\n  // and other non-number values as NaN, where Number just uses 0) but it considers the string\n  // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.\n  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a boolean. */\nexport function coerceBooleanProperty(value: any): boolean {\n  return value != null && `${value}` !== 'false';\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AGSA,SAAgB,qBAAqB,CAAC,KAAU,EAAhD;IACE,OAAO,KAAK,IAAI,IAAI,IAAI,EAA1B,GAA6B,KAAO,KAAK,OAAO,CAAC;CAChD;;;;;;;;;;;;ADAD,SAAgB,oBAAoB,CAAC,KAAU,EAAE,aAAiB,EAAlE;IAAiD,IAAjD,aAAA,KAAA,KAAA,CAAA,EAAiD,EAAA,aAAjD,GAAA,CAAkE,CAAlE,EAAA;IACE,OAAO,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC;CAC9D;;;;;;;AAMD,SAAgB,cAAc,CAAC,KAAU,EAAzC;;;;IAIE,OAAO,CAAC,KAAK,CAAC,UAAU,oBAAC,KAAK,GAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;CAClE;;;;;;;;;;;;;ADfD,SAAgB,WAAW,CAAI,KAAc,EAA7C;IACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;CAC/C;;;;;;;;;;;;ADFD,SAAgB,mBAAmB,CAAC,KAAU,EAA9C;IACE,IAAI,KAAK,IAAI,IAAI,EAAE;QACjB,OAAO,EAAE,CAAC;KACX;IAED,OAAO,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAM,KAAK,GAArD,IAAyD,CAAC;CACzD;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cdk-coercion.umd.js","sources":["../../src/cdk/coercion/element.ts","../../src/cdk/coercion/css-pixel-value.ts","../../src/cdk/coercion/array.ts","../../src/cdk/coercion/number-property.ts","../../src/cdk/coercion/boolean-property.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ElementRef} from '@angular/core';\n\n/**\n * Coerces an ElementRef or an Element into an element.\n * Useful for APIs that can accept either a ref or the native element itself.\n */\nexport function coerceElement<T>(elementOrRef: ElementRef<T> | T): T {\n  return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a value to a CSS pixel value. */\nexport function coerceCssPixelValue(value: any): string {\n  if (value == null) {\n    return '';\n  }\n\n  return typeof value === 'string' ? value : `${value}px`;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Wraps the provided value in an array, unless the provided value is an array. */\nexport function coerceArray<T>(value: T | T[]): T[] {\n  return Array.isArray(value) ? value : [value];\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a number. */\nexport function coerceNumberProperty(value: any): number;\nexport function coerceNumberProperty<D>(value: any, fallback: D): number | D;\nexport function coerceNumberProperty(value: any, fallbackValue = 0) {\n  return _isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\n/**\n * Whether the provided value is considered a number.\n * @docs-private\n */\nexport function _isNumberValue(value: any): boolean {\n  // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,\n  // and other non-number values as NaN, where Number just uses 0) but it considers the string\n  // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.\n  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a boolean. */\nexport function coerceBooleanProperty(value: any): boolean {\n  return value != null && `${value}` !== 'false';\n}\n"],"names":["ElementRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AISA,SAAgB,qBAAqB,CAAC,KAAU,EAAhD;IACE,OAAO,KAAK,IAAI,IAAI,IAAI,EAA1B,GAA6B,KAAO,KAAK,OAAO,CAAC;CAChD;;;;;;;;;;;;ADAD,SAAgB,oBAAoB,CAAC,KAAU,EAAE,aAAiB,EAAlE;IAAiD,IAAjD,aAAA,KAAA,KAAA,CAAA,EAAiD,EAAA,aAAjD,GAAA,CAAkE,CAAlE,EAAA;IACE,OAAO,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC;CAC9D;;;;;;;AAMD,SAAgB,cAAc,CAAC,KAAU,EAAzC;;;;IAIE,OAAO,CAAC,KAAK,CAAC,UAAU,oBAAC,KAAK,GAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;CAClE;;;;;;;;;;;;;ADfD,SAAgB,WAAW,CAAI,KAAc,EAA7C;IACE,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;CAC/C;;;;;;;;;;;;ADFD,SAAgB,mBAAmB,CAAC,KAAU,EAA9C;IACE,IAAI,KAAK,IAAI,IAAI,EAAE;QACjB,OAAO,EAAE,CAAC;KACX;IAED,OAAO,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAM,KAAK,GAArD,IAAyD,CAAC;CACzD;;;;;;;;;;;;;ADDD,SAAgB,aAAa,CAAI,YAA+B,EAAhE;IACE,OAAO,YAAY,YAAYA,eAAU,GAAG,YAAY,CAAC,aAAa,GAAG,YAAY,CAAC;CACvF;;;;;;;;;;;;;;;;;"}

package/bundles/cdk-coercion.umd.min.js

@@ -5,5 +5,5 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define("@angular/cdk/coercion",["exports"],n):n((e.ng=e.ng||{},e.ng.cdk=e.ng.cdk||{},e.ng.cdk.coercion={}))}(this,function(e){"use strict";function n(e){return null!=e&&""+e!="false"}function r(e,n){return void 0===n&&(n=0),o(e)?Number(e):n}function o(e){return!isNaN(parseFloat(e))&&!isNaN(Number(e))}function t(e){return Array.isArray(e)?e:[e]}function c(e){return null==e?"":"string"==typeof e?e:e+"px"}e.coerceBooleanProperty=n,e.coerceNumberProperty=r,e._isNumberValue=o,e.coerceArray=t,e.coerceCssPixelValue=c,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("@angular/cdk/coercion",["exports","@angular/core"],n):n((e.ng=e.ng||{},e.ng.cdk=e.ng.cdk||{},e.ng.cdk.coercion={}),e.ng.core)}(this,function(e,n){"use strict";function r(e){return null!=e&&""+e!="false"}function o(e,n){return void 0===n&&(n=0),t(e)?Number(e):n}function t(e){return!isNaN(parseFloat(e))&&!isNaN(Number(e))}function c(e){return Array.isArray(e)?e:[e]}function u(e){return null==e?"":"string"==typeof e?e:e+"px"}function i(e){return e instanceof n.ElementRef?e.nativeElement:e}e.coerceBooleanProperty=r,e.coerceNumberProperty=o,e._isNumberValue=t,e.coerceArray=c,e.coerceCssPixelValue=u,e.coerceElement=i,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=cdk-coercion.umd.min.js.map

package/bundles/cdk-coercion.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk-coercion.umd.min.js","sources":["../../src/cdk/coercion/boolean-property.ts","../../src/cdk/coercion/number-property.ts","../../src/cdk/coercion/array.ts","../../src/cdk/coercion/css-pixel-value.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a boolean. */\nexport function coerceBooleanProperty(value: any): boolean {\n  return value != null && `${value}` !== 'false';\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a number. */\nexport function coerceNumberProperty(value: any): number;\nexport function coerceNumberProperty<D>(value: any, fallback: D): number | D;\nexport function coerceNumberProperty(value: any, fallbackValue = 0) {\n  return _isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\n/**\n * Whether the provided value is considered a number.\n * @docs-private\n */\nexport function _isNumberValue(value: any): boolean {\n  // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,\n  // and other non-number values as NaN, where Number just uses 0) but it considers the string\n  // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.\n  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Wraps the provided value in an array, unless the provided value is an array. */\nexport function coerceArray<T>(value: T | T[]): T[] {\n  return Array.isArray(value) ? value : [value];\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a value to a CSS pixel value. */\nexport function coerceCssPixelValue(value: any): string {\n  if (value == null) {\n    return '';\n  }\n\n  return typeof value === 'string' ? value : `${value}px`;\n}\n"],"names":["coerceBooleanProperty","value","coerceNumberProperty","fallbackValue","_isNumberValue","Number","isNaN","parseFloat","coerceArray","Array","isArray","coerceCssPixelValue"],"mappings":";;;;;;;+PASA,SAAgBA,GAAsBC,GACpC,MAAgB,OAATA,GAAiB,GAAGA,GAAY,QCCzC,QAAgBC,GAAqBD,EAAYE,GAC/C,WADF,KAAAA,IAAiDA,EAAjD,GACSC,EAAeH,GAASI,OAAOJ,GAASE,EAOjD,QAAgBC,GAAeH,GAI7B,OAAQK,MAAMC,WAAU,MAAoBD,MAAMD,OAAOJ,ICd3D,QAAgBO,GAAeP,GAC7B,MAAOQ,OAAMC,QAAQT,GAASA,GAASA,GCDzC,QAAgBU,GAAoBV,GAClC,MAAa,OAATA,EACK,GAGe,gBAAVA,GAAqBA,EAAWA,EAAhD"}
+{"version":3,"file":"cdk-coercion.umd.min.js","sources":["../../src/cdk/coercion/boolean-property.ts","../../src/cdk/coercion/number-property.ts","../../src/cdk/coercion/array.ts","../../src/cdk/coercion/css-pixel-value.ts","../../src/cdk/coercion/element.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a boolean. */\nexport function coerceBooleanProperty(value: any): boolean {\n  return value != null && `${value}` !== 'false';\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a data-bound value (typically a string) to a number. */\nexport function coerceNumberProperty(value: any): number;\nexport function coerceNumberProperty<D>(value: any, fallback: D): number | D;\nexport function coerceNumberProperty(value: any, fallbackValue = 0) {\n  return _isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\n/**\n * Whether the provided value is considered a number.\n * @docs-private\n */\nexport function _isNumberValue(value: any): boolean {\n  // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,\n  // and other non-number values as NaN, where Number just uses 0) but it considers the string\n  // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.\n  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Wraps the provided value in an array, unless the provided value is an array. */\nexport function coerceArray<T>(value: T | T[]): T[] {\n  return Array.isArray(value) ? value : [value];\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Coerces a value to a CSS pixel value. */\nexport function coerceCssPixelValue(value: any): string {\n  if (value == null) {\n    return '';\n  }\n\n  return typeof value === 'string' ? value : `${value}px`;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ElementRef} from '@angular/core';\n\n/**\n * Coerces an ElementRef or an Element into an element.\n * Useful for APIs that can accept either a ref or the native element itself.\n */\nexport function coerceElement<T>(elementOrRef: ElementRef<T> | T): T {\n  return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n}\n"],"names":["coerceBooleanProperty","value","coerceNumberProperty","fallbackValue","_isNumberValue","Number","isNaN","parseFloat","coerceArray","Array","isArray","coerceCssPixelValue","coerceElement","elementOrRef","ElementRef","nativeElement"],"mappings":";;;;;;;oTASA,SAAgBA,GAAsBC,GACpC,MAAgB,OAATA,GAAiB,GAAGA,GAAY,QCCzC,QAAgBC,GAAqBD,EAAYE,GAC/C,WADF,KAAAA,IAAiDA,EAAjD,GACSC,EAAeH,GAASI,OAAOJ,GAASE,EAOjD,QAAgBC,GAAeH,GAI7B,OAAQK,MAAMC,WAAU,MAAoBD,MAAMD,OAAOJ,ICd3D,QAAgBO,GAAeP,GAC7B,MAAOQ,OAAMC,QAAQT,GAASA,GAASA,GCDzC,QAAgBU,GAAoBV,GAClC,MAAa,OAATA,EACK,GAGe,gBAAVA,GAAqBA,EAAWA,EAAhD,KCAA,QAAgBW,GAAiBC,GAC/B,MAAOA,aAAwBC,GAAAA,WAAaD,EAAaE,cAAgBF"}

package/bundles/cdk-drag-drop.umd.js

@@ -698,13 +698,13 @@ DragRef = /** @class */ (function () {
          */
         this._boundaryElement = null;
         /**
-         * Elements that can be used to drag the draggable item.
+         * Whether the native dragging interactions have been enabled on the root element.
          */
-        this._handles = [];
+        this._nativeInteractionsEnabled = true;
         /**
-         * Whether the native interactions on the element are enabled.
+         * Elements that can be used to drag the draggable item.
          */
-        this._nativeInteractionsEnabled = true;
+        this._handles = [];
         this._disabled = false;
         /**
          * Emits as the drag sequence is being prepared.
@@ -892,7 +892,12 @@ DragRef = /** @class */ (function () {
          * @return {?}
          */
         function (value) {
-            this._disabled = coercion.coerceBooleanProperty(value);
+            /** @type {?} */
+            var newValue = coercion.coerceBooleanProperty(value);
+            if (newValue !== this._disabled) {
+                this._disabled = newValue;
+                this._toggleNativeDragInteractions();
+            }
         },
         enumerable: true,
         configurable: true
@@ -1660,10 +1665,11 @@ DragRef = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        if (!this._rootElement || !this._handles) {
+            return;
+        }
         /** @type {?} */
-        var shouldEnable = this._handles.length > 0;
-        // We go through the trouble of keeping track of whether the interactions are enabled,
-        // because we want to avoid triggering style recalculations unless we really have to.
+        var shouldEnable = this.disabled || this._handles.length > 0;
         if (shouldEnable !== this._nativeInteractionsEnabled) {
             this._nativeInteractionsEnabled = shouldEnable;
             toggleNativeDragInteractions(this._rootElement, shouldEnable);
@@ -1850,6 +1856,7 @@ var CdkDrag = /** @class */ (function () {
          */
         function (value) {
             this._disabled = coercion.coerceBooleanProperty(value);
+            this._dragRef.disabled = this._disabled;
         },
         enumerable: true,
         configurable: true
@@ -1910,13 +1917,7 @@ var CdkDrag = /** @class */ (function () {
         this._rootElementInitSubscription = this._ngZone.onStable.asObservable()
             .pipe(operators.take(1))
             .subscribe(function () {
-            /** @type {?} */
-            var rootElement = _this._getRootElement();
-            if (rootElement.nodeType !== _this._document.ELEMENT_NODE) {
-                throw Error("cdkDrag must be attached to an element node. " +
-                    ("Currently attached to \"" + rootElement.nodeName + "\"."));
-            }
-            _this._dragRef.withRootElement(rootElement);
+            _this._updateRootElement();
             _this._handles.changes
                 .pipe(operators.startWith(_this._handles))
                 .subscribe(function (handleList) {
@@ -1924,6 +1925,23 @@ var CdkDrag = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    CdkDrag.prototype.ngOnChanges = /**
+     * @param {?} changes
+     * @return {?}
+     */
+    function (changes) {
+        /** @type {?} */
+        var rootSelectorChange = changes.rootElementSelector;
+        // We don't have to react to the first change since it's being
+        // handled in `ngAfterViewInit` where it needs to be deferred.
+        if (rootSelectorChange && !rootSelectorChange.firstChange) {
+            this._updateRootElement();
+        }
+    };
     /**
      * @return {?}
      */
@@ -1934,14 +1952,14 @@ var CdkDrag = /** @class */ (function () {
         this._rootElementInitSubscription.unsubscribe();
         this._dragRef.dispose();
     };
-    /** Gets the root draggable element, based on the `rootElementSelector`. */
+    /** Syncs the root element with the `DragRef`. */
     /**
-     * Gets the root draggable element, based on the `rootElementSelector`.
+     * Syncs the root element with the `DragRef`.
      * @private
      * @return {?}
      */
-    CdkDrag.prototype._getRootElement = /**
-     * Gets the root draggable element, based on the `rootElementSelector`.
+    CdkDrag.prototype._updateRootElement = /**
+     * Syncs the root element with the `DragRef`.
      * @private
      * @return {?}
      */
@@ -1950,8 +1968,12 @@ var CdkDrag = /** @class */ (function () {
         var element = this.element.nativeElement;
         /** @type {?} */
         var rootElement = this.rootElementSelector ?
-            getClosestMatchingAncestor(element, this.rootElementSelector) : null;
-        return rootElement || element;
+            getClosestMatchingAncestor(element, this.rootElementSelector) : element;
+        if (rootElement && rootElement.nodeType !== this._document.ELEMENT_NODE) {
+            throw Error("cdkDrag must be attached to an element node. " +
+                ("Currently attached to \"" + rootElement.nodeName + "\"."));
+        }
+        this._dragRef.withRootElement(rootElement || element);
     };
     /** Gets the boundary element, based on the `boundaryElementSelector`. */
     /**