fix(drag-drop): detect changes on custom preview/placeholder before measuring (#18698)

When a custom preview/placeholder is created, its dimensions are measured so that they can be used while sorting. The problem is that we weren't detecting changes after creation which can cause the dimensions to be incorrect, if they change based on a data binding. These changes check for changes after inserting the embedded view.

Fixes #18622.

Author: crisbeto

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

@@ -3010,6 +3010,30 @@ describe('CdkDrag', () => {
       expect(placeholder.textContent!.trim()).not.toContain('Custom placeholder');
     }));
 
+    it('should measure the custom placeholder after the first change detection', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZoneWithCustomPlaceholder);
+      fixture.componentInstance.extraPlaceholderClass = 'tall-placeholder';
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+      const item = dragItems.toArray()[0].element.nativeElement;
+
+      startDraggingViaMouse(fixture, item);
+
+      const thirdItem = dragItems.toArray()[2].element.nativeElement;
+      const thirdItemRect = thirdItem.getBoundingClientRect();
+
+      dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1);
+      fixture.detectChanges();
+
+      dispatchMouseEvent(document, 'mouseup');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+      expect(event.currentIndex).toBe(2);
+    }));
+
     it('should not throw when custom placeholder only has text', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZoneWithCustomTextOnlyPlaceholder);
       fixture.detectChanges();
@@ -5127,21 +5151,34 @@ class DraggableInDropZoneWithCustomTextOnlyPreview {
 
 @Component({
   template: `
-    <div cdkDropList style="width: 100px; background: pink;">
+    <div
+      cdkDropList
+      (cdkDropListDropped)="droppedSpy($event)"
+      style="width: 100px; background: pink;">
       <div *ngFor="let item of items" cdkDrag
         style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
           <ng-container *ngIf="renderPlaceholder">
-            <div class="custom-placeholder" *cdkDragPlaceholder>Custom placeholder</div>
+            <div
+              class="custom-placeholder"
+              [ngClass]="extraPlaceholderClass"
+              *cdkDragPlaceholder>Custom placeholder</div>
           </ng-container>
       </div>
     </div>
-  `
+  `,
+  styles: [`
+    .tall-placeholder {
+      height: ${ITEM_HEIGHT * 3}px;
+    }
+  `]
 })
 class DraggableInDropZoneWithCustomPlaceholder {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   items = ['Zero', 'One', 'Two', 'Three'];
   renderPlaceholder = true;
+  extraPlaceholderClass = '';
+  droppedSpy = jasmine.createSpy('dropped spy');
 }
 
 @Component({

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

@@ -884,6 +884,7 @@ export class DragRef<T = any> {
     if (previewTemplate) {
       const viewRef = previewConfig!.viewContainer.createEmbeddedView(previewTemplate,
                                                                       previewConfig!.context);
+      viewRef.detectChanges();
       preview = getRootNode(viewRef, this._document);
       this._previewRef = viewRef;
 
@@ -984,6 +985,7 @@ export class DragRef<T = any> {
         placeholderTemplate,
         placeholderConfig!.context
       );
+      this._placeholderRef.detectChanges();
       placeholder = getRootNode(this._placeholderRef, this._document);
     } else {
       placeholder = deepCloneNode(this._rootElement);