Check if data is undefined in the paging pipe

projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts

@@ -1,7 +1,12 @@
 import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxGridModule } from './index';
-import { ReorderedColumnsComponent, PagingAndEditingComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec';
+import {
+    ReorderedColumnsComponent,
+    PagingAndEditingComponent,
+    GridIDNameJobTitleComponent,
+    GridWithUndefinedDataComponent
+} from '../../test-utils/grid-samples.spec';
 import { PagingComponent } from '../../test-utils/grid-base-components.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
@@ -21,7 +26,8 @@ describe('IgxGrid - Grid Paging #grid', () => {
                 ReorderedColumnsComponent,
                 PagingComponent,
                 PagingAndEditingComponent,
-                GridIDNameJobTitleComponent
+                GridIDNameJobTitleComponent,
+                GridWithUndefinedDataComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         }).compileComponents();
@@ -63,7 +69,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
         verifyGridPager(fix, 3, '1', '1 of 4', [true, true, false, false]);
     }));
 
-    it('should paginate data API', fakeAsync (() => {
+    it('should paginate data API', fakeAsync(() => {
         const fix = TestBed.createComponent(PagingComponent);
         fix.detectChanges();
 
@@ -281,7 +287,7 @@ describe('IgxGrid - Grid Paging #grid', () => {
         verifyGridPager(fix, 2, '9', '3 of 3', []);
     });
 
-    it('activate/deactivate paging',  fakeAsync(() => {
+    it('activate/deactivate paging', fakeAsync(() => {
         const fix = TestBed.createComponent(ReorderedColumnsComponent);
         const grid = fix.componentInstance.grid;
         fix.detectChanges();
@@ -462,6 +468,27 @@ describe('IgxGrid - Grid Paging #grid', () => {
         expect(gridElement.querySelector(PAGER_CLASS)).not.toBeNull();
     }));
 
+    it('should not throw error when data is undefined', fakeAsync(() => {
+        let errorMessage = '';
+        const fix = TestBed.createComponent(GridWithUndefinedDataComponent);
+        try {
+            fix.detectChanges();
+        } catch (ex) {
+            errorMessage = ex.message;
+        }
+        expect(errorMessage).toBe('');
+        const grid = fix.componentInstance.grid;
+        let paginator = grid.nativeElement.querySelector(PAGER_CLASS);
+        expect(paginator).toBeNull();
+        expect(grid.rowList.length).toBe(0);
+        tick(305);
+        fix.detectChanges();
+
+        paginator = grid.nativeElement.querySelector(PAGER_CLASS);
+        expect(paginator).toBeDefined();
+        expect(grid.rowList.length).toBe(5);
+    }));
+
     function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) {
         const disabled = 'igx-button--disabled';
         const grid = fix.componentInstance.grid;

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -105,7 +105,7 @@ export class IgxGridPagingPipe implements PipeTransform {
             index: page,
             recordsPerPage: perPage
         };
-        DataUtil.correctPagingState(state, collection.data.length);
+        DataUtil.correctPagingState(state, collection.data ? collection.data.length : 0);
 
         const result = {
             data: DataUtil.page(cloneArray(collection.data), state),

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1525,3 +1525,23 @@ export class CellEditingScrollTestComponent extends BasicGridComponent {
         { firstName: 'Michael', lastName: 'Parker', age: 48, isActive: true, birthday: new Date('08/08/1970'), fullName: 'Michael Parker' }
     ];
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(
+            ` [width]="width" [height]="height" [paging]="'true'" [perPage]="perPage" [primaryKey]="'ProductID'"`,
+            '', ColumnDefinitions.productBasic)
+})
+export class GridWithUndefinedDataComponent implements OnInit  {
+    @ViewChild(IgxGridComponent, { static: true })
+    public grid: IgxGridComponent;
+    public data ;
+    public perPage = 5;
+    public width = '800px';
+    public height = '600px';
+
+    public ngOnInit(): void {
+        setTimeout(() => {
+           this.data = SampleTestData.foodProductDataExtended();
+        }, 300);
+    }
+}