Update samples for grid lite with angular wrapper (#3916)

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html

@@ -1,68 +1,73 @@
 <div class="grid-lite-wrapper">
     <section class="panel">
-      <button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
-        Column Properties
-      </button>
-      <igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
-        @for (column of columns; track column) {
+        <button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
+            Column Properties
+        </button>
+        <igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
+            @for (column of columns; track column) {
             <igx-drop-down-item>
-            <div class="config">
-                <span class="config-key">{{ column.header }}</span>
-                <igx-checkbox
-                #hiddenChk
-                [checked]="column.hidden"
-                (click)="$event.stopPropagation()"
-                (change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
-                Hidden
-                </igx-checkbox>
-                <igx-checkbox
-                #resizableChk
-                [checked]="column.resizable"
-                (click)="$event.stopPropagation()"
-                (change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
-                Resizable
-                </igx-checkbox>
-                <igx-checkbox
-                #filterChk
-                [checked]="column.filterable"
-                (click)="$event.stopPropagation()"
-                (change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
-                Filter
-                </igx-checkbox>
-                <igx-checkbox
-                #sortableChk
-                [checked]="column.sortable"
-                (click)="$event.stopPropagation()"
-                (change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
-                Sort
-                </igx-checkbox>
-            </div>
+                <div class="config">
+                    <span class="config-key">{{ column.header }}</span>
+                    <igx-checkbox #hiddenChk [checked]="column.hidden" (click)="$event.stopPropagation()"
+                        (change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
+                        Hidden
+                    </igx-checkbox>
+                    <igx-checkbox #resizableChk [checked]="column.resizable" (click)="$event.stopPropagation()"
+                        (change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
+                        Resizable
+                    </igx-checkbox>
+                    <igx-checkbox #filterChk [checked]="column.filterable" (click)="$event.stopPropagation()"
+                        (change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
+                        Filter
+                    </igx-checkbox>
+                    <igx-checkbox #sortableChk [checked]="column.sortable" (click)="$event.stopPropagation()"
+                        (change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
+                        Sort
+                    </igx-checkbox>
+                </div>
             </igx-drop-down-item>
-        }
-      </igx-drop-down>
+            }
+        </igx-drop-down>
 
-      <igx-switch
-        labelPosition="before"
-        [checked]="hasFormatters"
-        (igxChange)="toggleFormatters($event)">
-        Value formatters:
-      </igx-switch>
+        <igx-switch labelPosition="before" [checked]="hasFormatters" (change)="toggleFormatters($event)">
+            Value formatters:
+        </igx-switch>
     </section>
 
-    <igc-grid-lite [data]="data">
+    <igx-grid-lite [data]="data">
         @for (col of columns; track col) {
-            <igc-grid-lite-column
-                [field]="col.field"
-                [header]="col.header"
-                [dataType]="col.dataType"
-                [hidden]="col.hidden"
-                [resizable]="col.resizable"
-                [sortable]="col.sortable"
-                [filterable]="col.filterable"
-                [cellTemplate]="col.field === 'price' || col.field === 'total'
-                ? (hasFormatters ? formatCurrency : undefined)
-                : (col.field === 'rating' ? ratingTemplate : undefined)">
-            </igc-grid-lite-column>
+
+        <!-- Rating column -->
+        @if (col.field === 'rating') {
+        <igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
+            [resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
+
+            <ng-template igxGridLiteCell let-value>
+                <igc-rating [value]="value" readonly step="0.01" min="0" max="5">
+                </igc-rating>
+            </ng-template>
+
+        </igx-grid-lite-column>
+        }
+
+        <!-- Currency columns -->
+        @else if (col.field === 'price' || col.field === 'total') {
+        <igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
+            [resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
+
+            <ng-template igxGridLiteCell let-value>
+                {{ hasFormatters ? formatCurrency(value) : value }}
+            </ng-template>
+
+        </igx-grid-lite-column>
+        }
+
+        <!-- All other columns (NO template) -->
+        @else {
+        <igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
+            [resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
+        </igx-grid-lite-column>
+        }
         }
-    </igc-grid-lite>
-  </div>
+    </igx-grid-lite>
+</div>

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss

@@ -28,7 +28,7 @@
     height: 100%;
 }
 
-igc-grid-lite {
+igx-grid-lite {
     min-height: 65vh;
     --ig-size: 2;
 }

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts

@@ -3,67 +3,64 @@ import { CommonModule } from '@angular/common';
 import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
-import { IgcGridLite } from 'igniteui-grid-lite';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteColumnConfiguration } from 'igniteui-angular/grids/lite';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
 
-IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
 @Component({
-  selector: 'app-grid-lite-column-config-dynamic',
-  templateUrl: './grid-lite-column-config-dynamic.component.html',
-  styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
-  imports: [
-    CommonModule,
-    IgxButtonDirective,
-    IgxToggleActionDirective,
-    IgxDropDownItemNavigationDirective,
-    IgxDropDownComponent,
-    IgxDropDownItemComponent,
-    IgxCheckboxComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  standalone: true
+    selector: 'app-grid-lite-column-config-dynamic',
+    templateUrl: './grid-lite-column-config-dynamic.component.html',
+    styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
+    imports: [
+        CommonModule,
+        IgxGridLiteComponent,
+        IgxGridLiteColumnComponent,
+        IgxGridLiteCellTemplateDirective,
+        IgxButtonDirective,
+        IgxToggleActionDirective,
+        IgxDropDownItemNavigationDirective,
+        IgxDropDownComponent,
+        IgxDropDownItemComponent,
+        IgxCheckboxComponent,
+        IgxSwitchComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    standalone: true
 })
 export class GridLiteColumnConfigDynamicComponent implements OnInit {
-  private dataService = inject(GridLiteDataService);
+    private dataService = inject(GridLiteDataService);
 
-  public data: ProductInfo[] = [];
-  public hasFormatters = true;
+    public data: ProductInfo[] = [];
+    public hasFormatters = true;
 
-  public columns = [
-    { field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false },
-    { field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false },
-    { field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false },
-    { field: 'sold', header: 'Units sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
-    { field: 'total', header: 'Total sold', hidden: false, resizable: true, sortable: false, filterable: false },
-    { field: 'rating', header: 'Customer rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
-  ];
+    public columns: IgxGridLiteColumnConfiguration<ProductInfo>[] = [
+        { field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false, dataType: 'string'},
+        { field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'string'},
+        { field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
+        { field: 'sold', header: 'Units Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
+        { field: 'total', header: 'Total Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
+        { field: 'rating', header: 'Customer Rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
+    ];
 
-  public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
+    public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
 
-  ngOnInit() {
-    this.data = this.dataService.generateProducts(50);
-  }
+    ngOnInit() {
+        this.data = this.dataService.generateProducts(50);
+    }
 
-  protected formatCurrency = (params: any) => this.formatter.format(params.value);
+    protected formatCurrency = (value: number) =>
+        this.formatter.format(value);
 
-  protected ratingTemplate = (params: any) => {
-    const rating = document.createElement('igc-rating');
-    rating.setAttribute('readonly', '');
-    rating.setAttribute('step', '0.01');
-    rating.setAttribute('value', params.value.toString());
-    return rating;
-  };
+    toggleColumnProperty(column: any, property: string, value: boolean) {
+        column[property] = value;
+        // Trigger Angular change detection
+        this.columns = [...this.columns];
+    }
 
-  toggleColumnProperty(column: any, property: string, value: boolean) {
-    column[property] = value;
-    // Trigger Angular change detection
-    this.columns = [...this.columns];
-  }
-
-  toggleFormatters(event: any) {
-    this.hasFormatters = event.detail.checked;
-  }
+    toggleFormatters(event: any) {
+        this.hasFormatters = event.checked;
+    }
 }

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html

@@ -1,9 +1,18 @@
 <div class="grid-lite-wrapper">
-  <igc-grid-lite [data]="data">
-    <igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
-    <igc-grid-lite-column field="price" header="Price (€)" data-type="number"></igc-grid-lite-column>
-    <igc-grid-lite-column field="sold" header="Units Sold" data-type="number"></igc-grid-lite-column>
-    <igc-grid-lite-column field="total" header="Total Revenue" data-type="number"></igc-grid-lite-column>
-    <igc-grid-lite-column field="rating" header="Customer Rating ⭐" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
-  </igc-grid-lite>
+  <igx-grid-lite [data]="data">
+    <igx-grid-lite-column field="name" header="Product Name"></igx-grid-lite-column>
+    <igx-grid-lite-column field="price" header="Price (€)" dataType="number"></igx-grid-lite-column>
+    <igx-grid-lite-column field="sold" header="Units Sold" dataType="number"></igx-grid-lite-column>
+    <igx-grid-lite-column field="total" header="Total Revenue" dataType="number"></igx-grid-lite-column>
+    <igx-grid-lite-column field="rating" dataType="number">
+        <ng-template igxGridLiteHeader let-value>
+            <h3>⭐ Rating ⭐</h3>
+        </ng-template>
+
+        <ng-template igxGridLiteCell let-value>
+            <igc-rating [value]="value" readonly step="0.01" min="0" max="5">
+            </igc-rating>
+        </ng-template>
+    </igx-grid-lite-column>
+  </igx-grid-lite>
 </div>

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss

@@ -8,6 +8,6 @@
   height: 100%;
 }
 
-igc-grid-lite {
+igx-grid-lite {
   min-height: 65vh;
 }

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts

@@ -1,33 +1,30 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
 import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite';
 
-IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
 @Component({
-  selector: 'app-grid-lite-column-config-headers',
-  templateUrl: './grid-lite-column-config-headers.component.html',
-  styleUrls: ['./grid-lite-column-config-headers.component.scss'],
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    selector: 'app-grid-lite-column-config-headers',
+    templateUrl: './grid-lite-column-config-headers.component.html',
+    styleUrls: ['./grid-lite-column-config-headers.component.scss'],
+    imports: [
+        CommonModule,
+        IgxGridLiteComponent,
+        IgxGridLiteColumnComponent,
+        IgxGridLiteCellTemplateDirective,
+        IgxGridLiteHeaderTemplateDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridLiteColumnConfigHeadersComponent implements OnInit {
-  private dataService = inject(GridLiteDataService);
+    private dataService = inject(GridLiteDataService);
 
-  public data: ProductInfo[] = [];
+    public data: ProductInfo[] = [];
 
-  ngOnInit() {
-    this.data = this.dataService.generateProducts(50);
-  }
-
-  protected ratingTemplate = (params: any) => {
-    const rating = document.createElement('igc-rating');
-    rating.setAttribute('readonly', '');
-    rating.setAttribute('step', '0.01');
-    rating.setAttribute('value', params.value.toString());
-    return rating;
-  };
+    ngOnInit() {
+        this.data = this.dataService.generateProducts(50);
+    }
 }

src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html

@@ -1,9 +1,26 @@
 <div class="grid-lite-wrapper">
-  <igc-grid-lite [data]="data">
-    <igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
-    <igc-grid-lite-column field="price" header="Price" data-type="number" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
-    <igc-grid-lite-column field="sold" header="Units sold" data-type="number"></igc-grid-lite-column>
-    <igc-grid-lite-column field="total" header="Total sold" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
-    <igc-grid-lite-column field="rating" header="Customer rating" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
-  </igc-grid-lite>
+  <igx-grid-lite [data]="data">
+    <igx-grid-lite-column field="name" header="Product Name"></igx-grid-lite-column>
+    <igx-grid-lite-column field="price" header="Price" dataType="number">
+        <ng-template igxGridLiteCell let-value>
+            {{formatCurrency(value)}}
+        </ng-template>
+    </igx-grid-lite-column>
+    <igx-grid-lite-column field="sold" header="Units Sold" dataType="number"></igx-grid-lite-column>
+    <igx-grid-lite-column field="total" header="Total sold">
+        <ng-template igxGridLiteCell let-value>
+            {{formatCurrency(value)}}
+        </ng-template>
+    </igx-grid-lite-column>
+    <igx-grid-lite-column field="rating" header="Customer Rating" dataType="number">
+        <ng-template igxGridLiteCell let-value>
+            <igc-rating
+                [value]="value"
+                readonly
+                min="0"
+                max="5">
+            </igc-rating>
+        </ng-template>
+    </igx-grid-lite-column>
+  </igx-grid-lite>
 </div>

src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss

@@ -8,6 +8,6 @@
   height: 100%;
 }
 
-igc-grid-lite {
+igx-grid-lite {
   min-height: 65vh;
 }