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();
@@ -2705,6 +2724,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, Subscription, Observer} from 'rxjs';
@@ -171,7 +172,9 @@ 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,
@@ -188,7 +191,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
           .withPreviewTemplate(this._previewTemplate);
       }
     });
-    this._proxyEvents(ref);
+    this._handleEvetns(ref);
   }
 
   /**
@@ -261,13 +264,17 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     return selector ? getClosestMatchingAncestor(this.element.nativeElement, selector) : null;
   }
 
-  /**
-   * 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 _handleEvetns(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(() => {
@@ -276,6 +283,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 => {