[Pivot Grid]: Pivot data selector throws when its grid input is undefined

[viktorkombov]

Description

In 22.2.0-rc.1, igx-pivot-data-selector throws a TypeError when its grid input is undefined. This happens, for example, on the first render when [grid] is bound to a component property that is filled in later, such as a non-static @ViewChild.

The grid setter subscribes to the grid's pivotConfigurationChange event without checking for a missing grid:

igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts

Lines 330 to 339 in 66c09a8

	public set grid(value: PivotGridType) {
	this._grid = value;
	this.pivotConfigChangeSub?.unsubscribe();
	this.pivotConfigChangeSub = value.pivotConfigurationChange
	.subscribe(() => {
	this.pipeRetrigger++;
	this.cdr.markForCheck();
	});
	}

The subscription was added in #17592. In 22.1.x the setter only stored the value, so an empty first binding was harmless:

igniteui-angular/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts

Lines 319 to 321 in ef6ba51

	public set grid(value: PivotGridType) {
	this._grid = value;
	}

Binding a template reference variable ([grid]="grid1") or a viewChild() signal ([grid]="pivotGrid()") is not affected, because the grid is already available on the first render. Setting the input to null or undefined in code hits the same unguarded line.

A possible fix is value?.pivotConfigurationChange.subscribe(...).

Framework

Angular

Angular Version

22.1.3

Ignite UI for Angular Version

22.2.0-rc.1

Component / Area

Pivot Grid

Browser

Chrome

Operating System

Windows

Command Not Working

Steps to Reproduce

1. In the Pivot Data Selector sample (src/app/pivot-grid/pivot-datasource), add a view query for the grid to the component:

   @ViewChild('grid1') public pivotGrid: IgxPivotGridComponent;

2. In its template, bind the data selector to that property instead of the template reference:

   <igx-pivot-data-selector [grid]="pivotGrid"></igx-pivot-data-selector>

3. Open the sample (route /pivot-grid/pivot-grid-datasource) with the browser console open.

Alternatively, open the following sample with the browser console open: https://stackblitz.com/edit/2r8m2hny?file=src%2Fapp%2Fapp.component.ts

Actual Result

The first render throws:

TypeError: Cannot read properties of undefined (reading 'pivotConfigurationChange')

Expected Result

No error. The data selector connects to the grid once the grid is available, as it did in 22.1.x.

Reproduction URL

https://stackblitz.com/edit/2r8m2hny?file=src%2Fapp%2Fapp.component.ts

Attachments

No response