feat(grid): expose column input for template context

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.2.29
+- `igxGrid`
+    - New `additionalTemplateContext` column input:
+
+    ```html
+    <igx-column [additionalTemplateContext]="contextObject">
+      <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+         {{ props }}
+      </ng-template>
+    </igx-column>
+    ```
 ## 10.2.25
 - `IgxExpansionPanelHeaderComponent`
     - **Behavioral Change** - Settings `disabled` property of `IgxExpansionPanelHeaderComponent` now makes the underlying header element not accessible via `Tab` navigation (via `tabindex="-1"`)

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -175,7 +175,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     get context(): any {
         return {
             $implicit: this.value,
-            cell: this
+            cell: this,
+            additionalTemplateContext: this.column.additionalTemplateContext
         };
     }
 

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1176,6 +1176,22 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      */
     @Input() colStart: number;
 
+    /**
+     * Sets/gets custom properties provided in additional template context.
+     *
+     * ```html
+     * <igx-column [additionalTemplateContext]="contextObject">
+     *   <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+     *      {{ props }}
+     *   </ng-template>
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    public additionalTemplateContext: any;
+
     /**
      * Indicates whether the column will be visible when its parent is collapsed.
      * ```html

projects/igniteui-angular/src/lib/grids/common/column.interface.ts

@@ -47,5 +47,6 @@ export interface ColumnType {
     hasLastPinnedChildColumn: boolean;
     pipeArgs: IColumnPipeArgs;
     hasNestedPath: boolean;
+    additionalTemplateContext: any;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }

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

@@ -24,6 +24,7 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnsFromIterableComponent,
                 TemplatedColumnsComponent,
                 TemplatedInputColumnsComponent,
+                TemplatedContextInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
@@ -297,6 +298,20 @@ describe('IgxGrid - Column properties #grid', () => {
 
     });
 
+    it('should support passing properties through the templateContext input property', () => {
+        const fixture = TestBed.createComponent(TemplatedContextInputColumnsComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.instance;
+        const contextObject = {property1: 'cellContent', property2: 'cellContent1'};
+        const firstColumn = grid.columns[0];
+        const secondColumn = grid.columns[1];
+
+        expect(firstColumn.additionalTemplateContext).toEqual(contextObject);
+        expect(firstColumn.cells[0].nativeElement.innerText).toEqual(contextObject.property1);
+        expect(secondColumn.cells[0].nativeElement.innerText).toEqual(contextObject.property2);
+    });
+
     it('should apply column\'s formatter programmatically', () => {
         const expectedVal = ['Johny', 'Sally', 'Tim'];
         const expectedValToLower = ['johny', 'sally', 'tim'];
@@ -494,6 +509,31 @@ export class TemplatedInputColumnsComponent {
     public instance: IgxGridComponent;
 }
 
+
+@Component({
+    template: `
+        <igx-grid [data]="data">
+            <igx-column [additionalTemplateContext]="contextObject" field="FirstName">
+                <ng-template igxCell let-cell="cell">
+                    {{ cell.column.additionalTemplateContext.property1 }}
+                </ng-template>
+            </igx-column>
+            <igx-column [additionalTemplateContext]="contextObject" field="LastName">
+                <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+                    {{ props.property2 }}
+                </ng-template>
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class TemplatedContextInputColumnsComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public instance: IgxGridComponent;
+    public contextObject = {property1: 'cellContent', property2: 'cellContent1'};
+
+    public data = SampleTestData.personNameAgeData();
+}
+
 @Component({
     template: `
         <igx-grid [data]="data" height="500px" width="400px">