fix(elements): Ensure ForOF out of bound row gets deleted before moving to opposite side.

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -1062,12 +1062,17 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
 
         for (let i = start; i < end && this.igxForOf[i] !== undefined; i++) {
             const embView = this._embeddedViews.shift();
-            if (!embView.destroyed) {
+            if (embView && !embView.destroyed) {
                 this.scrollFocus(embView.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE)
                     || embView.rootNodes[0].nextElementSibling);
                 const view = container.detach(0);
-
+                // embView and view both refer to the same collections
                 this.updateTemplateContext(embView.context, i);
+
+                // Because in Elements the whole parent div (containing data-index) gets removed (possibly due to being disconnected). In Angular it just gets moved.
+                // This ensures to update it with the new context and remove it first from DOM because of detach action before inserting it manually.
+                view.detectChanges();
+
                 container.insert(view);
                 this._embeddedViews.push(embView);
             }
@@ -1082,12 +1087,15 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         const container = this.dc.instance._vcr as ViewContainerRef;
         for (let i = prevIndex - 1; i >= this.state.startIndex && this.igxForOf[i] !== undefined; i--) {
             const embView = this._embeddedViews.pop();
-            if (!embView.destroyed) {
+            if (embView && !embView.destroyed) {
                 this.scrollFocus(embView.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE)
                     || embView.rootNodes[0].nextElementSibling);
+                // embView and view both refer to the same collections
                 const view = container.detach(container.length - 1);
 
                 this.updateTemplateContext(embView.context, i);
+                view.detectChanges();
+
                 container.insert(view, 0);
                 this._embeddedViews.unshift(embView);
             }

projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, TemplateRef, QueryList, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ViewChild, TemplateRef, QueryList, ChangeDetectionStrategy } from '@angular/core';
 import { formatNumber } from '@angular/common'
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -2663,11 +2663,16 @@ describe('IgxGrid - GroupBy #grid', () => {
 
         // scroll down
         grid.verticalScrollContainer.getScroll().scrollTop = 10000;
+        await wait(100); // Triggers onStable
+        fix.detectChanges();
+
+        dataRows = grid.dataRowList.toArray();
+        // Workaround for await wait triggering onStable prematurely
+        (grid as any)._restoreVirtState(dataRows[7]);
         await wait(100);
         fix.detectChanges();
 
         // verify rows are scrolled to the right
-        dataRows = grid.dataRowList.toArray();
         dataRows.forEach(dr => {
             const virtualization = dr.virtDirRow;
             // should be at last chunk