diff --git a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts
index 61ef7f970ee..591c083248e 100644
--- a/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts
+++ b/projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts
@@ -1061,12 +1061,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);
             }
@@ -1081,12 +1086,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);
             }
diff --git a/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts
index 04c4918e841..4ff216f1656 100644
--- a/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts
+++ b/projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, TemplateRef, QueryList } from '@angular/core';
+import { Component, ViewChild, TemplateRef, QueryList } from '@angular/core';
 import { formatNumber } from '@angular/common'
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -2615,11 +2615,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