fix(elements): inject grid instead of grid api in state component (#14594)

Author: mddragnev

projects/igniteui-angular-elements/src/app/app.module.ts

@@ -123,5 +123,6 @@ declare global {
       'igc-grid': NgElement & WithProperties<GridType>;
       'igc-tree-grid': NgElement & WithProperties<IgxTreeGridElement>;
       'igc-paginator': NgElement & WithProperties<IgxPaginatorComponent>;
+      'igc-grid-state':  NgElement & WithProperties<IgxGridStateComponent>;
     }
   }

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -3,14 +3,15 @@ import { ApplicationRef, importProvidersFrom } from '@angular/core';
 import { createApplication } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserTestingModule } from '@angular/platform-browser/testing';
-import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent } from 'igniteui-angular';
+import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxPivotGridComponent } from 'igniteui-angular';
 import { firstValueFrom, fromEvent, skip, timer } from 'rxjs';
 import { registerConfig } from '../analyzer/elements.config';
 import { createIgxCustomElement } from './create-custom-element';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
 import hgridData from '../assets/data/projects-hgrid.js';
 import { SampleTestData } from 'igniteui-angular/src/lib/test-utils/sample-test-data.spec';
 import { ELEMENTS_TOKEN } from 'igniteui-angular/src/lib/core/utils';
+import { IgxGridStateComponent } from '../lib/state.component';
 
 describe('Elements: ', () => {
     let testContainer: HTMLDivElement;
@@ -28,8 +29,13 @@ describe('Elements: ', () => {
         customElements.define("igc-grid", grid);
         const hgrid = createIgxCustomElement<IgxHierarchicalGridComponent>(IgxHierarchicalGridComponent, { injector: appRef.injector, registerConfig });
         customElements.define("igc-hierarchical-grid", hgrid);
+        const pivotGrid = createIgxCustomElement<IgxPivotGridComponent>(IgxPivotGridComponent, { injector: appRef.injector, registerConfig });
+        customElements.define("igc-pivot-grid", pivotGrid);
         const paginator = createIgxCustomElement<IgxPaginatorComponent>(IgxPaginatorComponent, { injector: appRef.injector, registerConfig });
         customElements.define("igc-paginator", paginator);
+        const stateComponent = createIgxCustomElement<IgxGridStateComponent>(IgxGridStateComponent, { injector: appRef.injector, registerConfig });
+        customElements.define("igc-grid-state", stateComponent);
+
     });
 
     beforeEach(async () => {
@@ -111,5 +117,19 @@ describe('Elements: ', () => {
             expect(gridEl.dataView.length).toEqual(3);
             expect(paginator.totalRecords).toEqual(gridEl.data.length);
         });
+
+        it(`should initialize pivot grid with state persistence component`, async () => {
+            const gridEl = document.createElement("igc-pivot-grid");
+
+            const stateComponent = document.createElement("igc-grid-state");
+
+            gridEl.appendChild(stateComponent);
+
+            testContainer.appendChild(gridEl);
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+            expect(() => stateComponent.getStateAsString()).not.toThrow();
+        });
     });
 });

projects/igniteui-angular-elements/src/lib/state.component.ts

@@ -1,5 +1,5 @@
 import { Component, EnvironmentInjector, EventEmitter, Inject, Injector, Output, ViewContainerRef } from '@angular/core';
-import { IGX_GRID_SERVICE_BASE, GridServiceType, IPinningConfig}  from '../../../igniteui-angular/src/lib/grids/common/grid.interface';
+import { IPinningConfig, GridType, IGX_GRID_BASE}  from '../../../igniteui-angular/src/lib/grids/common/grid.interface';
 import { IFilteringExpressionsTree } from '../../../igniteui-angular/src/lib/data-operations/filtering-expressions-tree';
 import { IPagingState } from '../../../igniteui-angular/src/lib/data-operations/paging-state.interface';
 import { ISortingExpression } from '../../../igniteui-angular/src/lib/data-operations/sorting-strategy';
@@ -50,11 +50,11 @@ export interface IGridStateInfo {
 export class IgxGridStateComponent extends IgxGridStateBaseDirective {
 
     constructor(
-        @Inject(IGX_GRID_SERVICE_BASE) private api: GridServiceType,
+        @Inject(IGX_GRID_BASE) grid: GridType,
         protected override viewRef: ViewContainerRef, protected  override envInjector: EnvironmentInjector,
         protected override injector: Injector,
         ) {
-            super(api.grid, viewRef, envInjector, injector);
+            super(grid, viewRef, envInjector, injector);
         }
 
     /**