fix(grid-lite): column field NoInfer to avoid fallback type compat issue (#17250)

Author: damyanpetev

projects/igniteui-angular/grids/lite/src/grid-lite-column.component.ts

@@ -76,7 +76,7 @@ export class IgxGridLiteColumnComponent<T extends object = any> {
     //#region Inputs
 
     /** The field from the data for this column. */
-    public readonly field = input<Keys<T>>();
+    public readonly field = input<NoInfer<Keys<T>>>();
 
     /** The data type of the column's values. */
     public readonly dataType = input<DataType>('string');

src/app/grid-lite/grid-lite.sample.html

@@ -35,14 +35,26 @@
     </ng-template>
   </igx-grid-lite-column>
 
-  <igx-grid-lite-column
-    field="age"
-    dataType="number"
-    header="Age"
-    filterable
-    resizable
-    sortable
-  ></igx-grid-lite-column>
+  @for(column of columns; track column.field) {
+    <igx-grid-lite-column
+        [field]="column.field"
+        [header]="column.header"
+        [dataType]="column.dataType"
+        filterable
+        resizable
+        sortable
+    >
+    </igx-grid-lite-column>
+  }
+  @for(column of typedColumns; track column.field) {
+    <igx-grid-lite-column
+        [field]="column.field"
+        [header]="column.header"
+        [dataType]="column.dataType"
+    >
+    </igx-grid-lite-column>
+  }
+
   <igx-grid-lite-column field="active" dataType="boolean" header="Active">
     <ng-template
       igxGridLiteCell

src/app/grid-lite/grid-lite.sample.ts

@@ -1,19 +1,36 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, viewChild } from '@angular/core';
-import { IgxGridLiteCellTemplateDirective, IgxGridLiteColumnComponent, IgxGridLiteComponent, IgxGridLiteFilteringExpression, IgxGridLiteHeaderTemplateDirective, IgxGridLiteSortingExpression, IgxGridLiteSortingOptions } from "igniteui-angular/grids/lite";
-import { GridLiteDataService } from './data.service';
+import { Component, inject, viewChild } from '@angular/core';
 import { IgxCheckboxComponent } from 'igniteui-angular';
+import {
+    IgxGridLiteCellTemplateDirective,
+    IgxGridLiteColumnComponent,
+    type IgxGridLiteColumnConfiguration,
+    IgxGridLiteComponent,
+    type IgxGridLiteFilteringExpression,
+    IgxGridLiteHeaderTemplateDirective,
+    type IgxGridLiteSortingExpression,
+    type IgxGridLiteSortingOptions,
+} from "igniteui-angular/grids/lite";
+import { GridLiteDataService, type User } from './data.service';
+
 @Component({
     selector: 'app-grid-lite-sample',
     templateUrl: 'grid-lite.sample.html',
     styleUrls: ['grid-lite.sample.scss'],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     imports: [IgxCheckboxComponent, IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective]
 })
 export class GridLiteSampleComponent {
     protected grid = viewChild<IgxGridLiteComponent<any>>('grid');
-    protected data = [];
+    protected data: User[] = [];
     private dataService = inject(GridLiteDataService);
 
+    public columns: IgxGridLiteColumnConfiguration[] = [
+        { field: 'age', header: 'Age', dataType: 'number' },
+    ];
+
+    public typedColumns: IgxGridLiteColumnConfiguration<User>[] = [
+        { field: 'email', header: 'Email', dataType: 'string' },
+    ];
+
     protected sortingExpressions: IgxGridLiteSortingExpression[] = [
         {
             key: 'firstName',