fix(igxForOf): Add check in case scrollComponent is already destroyed.

Author: MKirova

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

@@ -197,6 +197,35 @@ describe('IgxForOf directive -', () => {
             horizontalScroller = fix.nativeElement.querySelector('igx-horizontal-virtual-helper');
         });
 
+        it('should reset scroll position if component is destroyed and recreated.', async () => {
+            let scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
+            expect(scrollComponent.scrollAmount).toBe(0);
+            expect(scrollComponent.destroyed).toBeFalsy();
+
+            fix.componentInstance.scrollTop(500);
+            fix.detectChanges();
+            await wait();
+            expect(scrollComponent.scrollAmount).toBe(500);
+
+            fix.componentInstance.exists = false;
+            fix.detectChanges();
+            await wait();
+
+            expect(scrollComponent.destroyed).toBeTruthy();
+
+            fix.componentInstance.exists = true;
+            fix.detectChanges();
+            await wait();
+
+            scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
+            expect(scrollComponent.scrollAmount).toBe(0);
+            expect(scrollComponent.destroyed).toBeFalsy();
+
+            displayContainer = fix.nativeElement.querySelector(DISPLAY_CONTAINER);
+            const firstInnerDisplayContainer = displayContainer.children[0];
+            expect(firstInnerDisplayContainer.children[0].textContent).toBe('0');
+        });
+
         it('should initialize directive with vertical virtualization', async () => {
             expect(displayContainer).not.toBeNull();
             expect(verticalScroller).not.toBeNull();
@@ -1252,10 +1281,10 @@ export class VirtualComponent {
     public cols = [];
     public data = [];
 
-    @ViewChild('container', { read: ViewContainerRef, static: true })
+    @ViewChild('container', { read: ViewContainerRef, static: false })
     public container: ViewContainerRef;
 
-    @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true })
+    @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: false })
     public parentVirtDir: TestIgxForOfDirective<any>;
 
     @ViewChildren('childContainer', { read: TestIgxForOfDirective })
@@ -1299,7 +1328,7 @@ export class VirtualComponent {
 /** Only vertically virtualized component */
 @Component({
     template: `
-        <div #container [style.width]='width' [style.height]='height'>
+        <div *ngIf='exists' #container [style.width]='width' [style.height]='height'>
             <ng-template #scrollContainer igxForTest let-rowData [igxForOf]="data"
                 [igxForScrollOrientation]="'vertical'"
                 [igxForContainerSize]='height'
@@ -1327,6 +1356,7 @@ export class VerticalVirtualComponent extends VirtualComponent {
     ];
     public data = [];
     public itemSize = '50px';
+    public exists = true;
 }
 
 /** Only horizontally virtualized component */

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

@@ -390,7 +390,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation);
             this.state.chunkSize = this._calculateChunkSize();
             this.dc.instance.notVirtual = !(this.igxForContainerSize && this.state.chunkSize < this.igxForOf.length);
-            if (this.scrollComponent) {
+            if (this.scrollComponent && !this.scrollComponent.destroyed) {
                 this.state.startIndex = Math.min(this.getIndexAt(this.scrollPosition, this.sizesCache, 0),
                     this.igxForOf.length - this.state.chunkSize);
             }

src/app/list-performance/list-performance.sample.html

@@ -13,9 +13,9 @@ <h4 class="sample-title">Performance sample</h4>
                     <igx-icon>clear</igx-icon>
                 </igx-suffix>
             </igx-input-group>
-
+            <button igxButton (click)='showList = !showList'>Toggle List</button>
             <igx-card>
-                <igx-list>
+                <igx-list *ngIf='showList'>
                     <igx-list-item [isHeader]="true">Contacts</igx-list-item>
                     <div class="virtualized-items" [style.height]="'500px'" [style.overflow]="'hidden'" [style.position]="'relative'">
                         <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *igxFor="let item of data | igxFilter: fo1; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '56px'">

src/app/list-performance/list-performance.sample.ts

@@ -9,6 +9,7 @@ import { IgxFilterOptions } from 'igniteui-angular';
 export class ListPerformanceSampleComponent {
     search1: string;
     options = {};
+    showList = true;
 
     data = [{
         key: 1,