fix(drag-drop): placeholder element not available in started event (#19493)

Fixes calling `CdkDrag.getPlaceholderElement` returning undefined if it's called in the `cdkDragStarted` event.

Fixes #19457.

Author: crisbeto

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

@@ -28,7 +28,7 @@ import {_supportsShadowDom} from '@angular/cdk/platform';
 import {of as observableOf} from 'rxjs';
 
 import {DragDropModule} from '../drag-drop-module';
-import {CdkDragDrop, CdkDragEnter} from '../drag-events';
+import {CdkDragDrop, CdkDragEnter, CdkDragStart} from '../drag-events';
 import {Point, DragRef} from '../drag-ref';
 import {extendStyles} from '../drag-styling';
 import {moveItemInArray} from '../drag-utils';
@@ -4022,6 +4022,20 @@ describe('CdkDrag', () => {
       expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
     }));
 
+    it('should make the placeholder available in the start event', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+      let placeholder: HTMLElement | undefined;
+
+      fixture.componentInstance.startedSpy.and.callFake((event: CdkDragStart) => {
+        placeholder = event.source.getPlaceholderElement();
+      });
+
+      startDraggingViaMouse(fixture, item);
+      expect(placeholder).toBeTruthy();
+    }));
+
   });
 
   describe('in a connected drop container', () => {
@@ -5409,6 +5423,7 @@ const DROP_ZONE_FIXTURE_TEMPLATE = `
       [cdkDragPreviewClass]="previewClass"
       [style.height.px]="item.height"
       [style.margin-bottom.px]="item.margin"
+      (cdkDragStarted)="startedSpy($event)"
       style="width: 100%; background: red;">{{item.value}}</div>
   </div>
 `;
@@ -5430,6 +5445,7 @@ class DraggableInDropZone {
   droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop<string[]>) => {
     moveItemInArray(this.items, event.previousIndex, event.currentIndex);
   });
+  startedSpy = jasmine.createSpy('started spy');
 }
 
 @Component({

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

@@ -226,18 +226,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   /**
    * Returns the element that is being used as a placeholder
    * while the current element is being dragged.
-   * @deprecated No longer being used to be removed.
-   * @breaking-change 11.0.0
    */
   getPlaceholderElement(): HTMLElement {
     return this._dragRef.getPlaceholderElement();
   }
 
-  /**
-   * Returns the root draggable element.
-   * @deprecated No longer being used to be removed.
-   * @breaking-change 11.0.0
-   */
+  /** Returns the root draggable element. */
   getRootElement(): HTMLElement {
     return this._dragRef.getRootElement();
   }

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

@@ -695,9 +695,6 @@ export class DragRef<T = any> {
 
   /** Starts the dragging sequence. */
   private _startDragSequence(event: MouseEvent | TouchEvent) {
-    // Emit the event on the item before the one on the container.
-    this.started.next({source: this});
-
     if (isTouchEvent(event)) {
       this._lastTouchEventTime = Date.now();
     }
@@ -722,10 +719,12 @@ export class DragRef<T = any> {
       element.style.display = 'none';
       this._document.body.appendChild(parent.replaceChild(placeholder, element));
       getPreviewInsertionPoint(this._document).appendChild(preview);
+      this.started.next({source: this}); // Emit before notifying the container.
       dropContainer.start();
       this._initialContainer = dropContainer;
       this._initialIndex = dropContainer.getItemIndex(this);
     } else {
+      this.started.next({source: this});
       this._initialContainer = this._initialIndex = undefined!;
     }