title: angular - how to detect browser has finished RErendering after change
body: <p>I have a grid based table with &quot;order&quot; applied to each item to allow for dynamic ordering.</p>
  <p>When a grid order change is triggered I want an event to tell me that the browser has finished rerendering the entire grid.</p>
  <p>I've tried the ngAfterViewChecked, but that seems to emit a bit too early if I have for example 1000 grid items.</p>
  <p>I have a stackblitz demo here. Alternatively a native javascript solution would also be appreciated.</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-yhfudq?file=src%2Fapp%2Ftable.directive.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-yhfudq?file=src%2Fapp%2Ftable.directive.ts</a></p>
  <p>UPDATE</p>
  <p>I found 2 other sources which comes closer to detecting when changes occur but not when the change actually are finished rendering. If you throttle browser CPU performance to 6x the events still log before you see any changes in the browser.</p>
  <ol>
  <li><p>Using Angular's <a href="https://stackoverflow.com/questions/49036289/how-to-detect-when-a-view-element-is-rendered-in-angular">NgZone</a> <a href="https://angular.io/api/core/NgZone#properties" rel="nofollow noreferrer"><code>onStable</code></a> event.</p>
  </li>
  <li><p>Using <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer">MutationObserver</a></p>
  </li>
  </ol>
  <p>Here's a updated Stackblitz.</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-bh5szc?file=src/app/table.directive.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-bh5szc?file=src/app/table.directive.ts</a></p>