title: Angular cdkDragDrop behavior changed with update of Angular, UI no longer updates when dragging starts
body: <p>We have a component which has items that can be dragged and dropped, we use the CDK drag/drop module for managing this.</p>
  <p>Part of the functionality is to change a property of the underlying object when the user starts dragging. To get the UI to update we call ChangeDetectorRef.detectChanges().</p>
  <p>When on version 9 of Angular this worked fine, however since updating to version 12.1 the UI no longer updates until the dragged item is dropped and I cannot find a way to get it working</p>
  <p>Here is a simplified version of the component:</p>
  <p>HTML:</p>
  <pre><code>&lt;div cdkDropList&gt;
  &lt;div cdkDrag 
   (cdkDragStarted)=&quot;onCdkDragStarted($event)&quot;
   *ngFor=&quot;let step of steps&quot;&gt;Step: {{step.id}}  {{step.text}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Code:</p>
  <pre><code>import { ChangeDetectorRef, Component} from '@angular/core';
  
  @Component({
    selector: 'drag-poc',
    templateUrl: 'drag-poc.component.html',
    styles: []
  })
  export class DragPocComponent { 
    steps: any[] = [
      { id: 1, text: '' },
      { id: 2, text: '' },
      { id: 3, text: '' },
      { id: 4, text: '' },
      { id: 5, text: '' },
    ];
  
    constructor(private ref: ChangeDetectorRef){
  
    }
  
    onCdkDragStarted($event){
      // this is just a hack to get a reference to the array object that is being dragged
      const draggedItem = $event.source.__ngContext__[8].ngForOf[$event.source.__ngContext__[8].index];
  
      draggedItem.text = &quot;MOVED&quot;;
      this.ref.detectChanges();
    }
  }
  </code></pre>
  <p>With Angular 9 the UI updates once the dragging starts:</p>
  <p><a href="https://i.stack.imgur.com/3uCAN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3uCAN.png" alt="Dragging with updated UI" /></a></p>
  <p>With Angular 12 (or 13), the code is the exact same, but the UI doesn't update until the dragged item is dropped:</p>
  <p><a href="https://i.stack.imgur.com/6xUNz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6xUNz.png" alt="Dragging with non-updated UI" /></a></p>
  <p>Is there a way to get the UI to update once the dragging starts?</p>
  <p>Stackblitz Angular 9: <a href="https://stackblitz.com/edit/angular-ivy-s4pmmm" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-s4pmmm</a></p>
  <p>StackBlitz Latest Angular: <a href="https://stackblitz.com/edit/angular-ivy-ztdufb" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-ztdufb</a></p>
  <p>EDIT: the Latest Angular StackBlitz is updated to show the problem after the answer from @Eliseo</p>
  <p><a href="https://i.stack.imgur.com/T8nrz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8nrz.png" alt="updated problem" /></a></p>