fix(drag-drop): standalone draggable drag class not being applied with OnPush change detection

Fixes the styling that is applied while an item is dragged not being applied with `OnPush` change detection.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -460,6 +460,25 @@ describe('CdkDrag', () => {
       expect(element.classList).not.toContain('cdk-drag-dragging');
     }));
 
+    it('should add a class while an element is being dragged with OnPush change detection',
+      fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithOnPush);
+        fixture.detectChanges();
+
+        const element = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(element.classList).not.toContain('cdk-drag-dragging');
+
+        startDraggingViaMouse(fixture, element);
+
+        expect(element.classList).toContain('cdk-drag-dragging');
+
+        dispatchMouseEvent(document, 'mouseup');
+        fixture.detectChanges();
+
+        expect(element.classList).not.toContain('cdk-drag-dragging');
+      }));
+
     it('should not add a class if item was not dragged more than the threshold', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable, [], 5);
       fixture.detectChanges();
@@ -2729,6 +2748,17 @@ class StandaloneDraggable {
   boundarySelector: string;
 }
 
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div cdkDrag #dragElement style="width: 100px; height: 100px; background: red;"></div>
+  `
+})
+class StandaloneDraggableWithOnPush {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChild(CdkDrag) dragInstance: CdkDrag;
+}
+
 @Component({
   template: `
     <svg><g

src/cdk/drag-drop/directives/drag.ts

@@ -28,6 +28,7 @@ import {
   ViewContainerRef,
   OnChanges,
   SimpleChanges,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Observable, Observer, Subject, merge} from 'rxjs';
@@ -170,15 +171,17 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     private _viewportRuler: ViewportRuler,
     private _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>,
     @Inject(CDK_DRAG_CONFIG) private _config: DragRefConfig,
-    @Optional() private _dir: Directionality) {
+    @Optional() private _dir: Directionality,
+    // @breaking-change 8.0.0 _changeDetectorRef parameter to be made required.
+    private _changeDetectorRef?: ChangeDetectorRef) {
 
     const ref = this._dragRef = new DragRef(element, this._document, this._ngZone,
       this._viewContainerRef, this._viewportRuler, this._dragDropRegistry,
       this._config, this.dropContainer ? this.dropContainer._dropListRef : undefined,
       this._dir);
     ref.data = this;
     this._syncInputs(ref);
-    this._proxyEvents(ref);
+    this._handleEvents(ref);
   }
 
   /**
@@ -286,13 +289,17 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     });
   }
 
-  /**
-   * Proxies the events from a DragRef to events that
-   * match the interfaces of the CdkDrag outputs.
-   */
-  private _proxyEvents(ref: DragRef<CdkDrag<T>>) {
+  /** Handles the events from the underlying `DragRef`. */
+  private _handleEvents(ref: DragRef<CdkDrag<T>>) {
     ref.started.subscribe(() => {
       this.started.emit({source: this});
+
+      // Since all of these events run outside of change detection,
+      // we need to ensure that everything is marked correctly.
+      if (this._changeDetectorRef) {
+        // @breaking-change 8.0.0 Remove null check for _changeDetectorRef
+        this._changeDetectorRef.markForCheck();
+      }
     });
 
     ref.released.subscribe(() => {
@@ -301,6 +308,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
     ref.ended.subscribe(() => {
       this.ended.emit({source: this});
+
+      // Since all of these events run outside of change detection,
+      // we need to ensure that everything is marked correctly.
+      if (this._changeDetectorRef) {
+        // @breaking-change 8.0.0 Remove null check for _changeDetectorRef
+        this._changeDetectorRef.markForCheck();
+      }
     });
 
     ref.entered.subscribe(event => {

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -27,7 +27,7 @@ export declare class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDes
     started: EventEmitter<CdkDragStart>;
     constructor(
     element: ElementRef<HTMLElement>,
-    dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _config: DragRefConfig, _dir: Directionality);
+    dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _config: DragRefConfig, _dir: Directionality, _changeDetectorRef?: ChangeDetectorRef | undefined);
     getPlaceholderElement(): HTMLElement;
     getRootElement(): HTMLElement;
     ngAfterViewInit(): void;