Merge pull request #9694 from IgniteUI/dTsvetkov/feat-9020-master

feat(grid): expose column input for template context

Author: zdrawku

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

@@ -165,7 +165,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     public 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

@@ -748,6 +748,22 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @Input()
     public 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;
+
     /**
      * @hidden
      */

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

@@ -49,5 +49,6 @@ export interface ColumnType {
     hasNestedPath: boolean;
     defaultTimeFormat: string;
     defaultDateTimeFormat: string;
+    additionalTemplateContext: any;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }

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

@@ -34,6 +34,7 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnsFromIterableComponent,
                 TemplatedColumnsComponent,
                 TemplatedInputColumnsComponent,
+                TemplatedContextInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
@@ -308,6 +309,20 @@ describe('IgxGrid - Column properties #grid', () => {
 
     });
 
+    it('should support passing properties through the additionalTemplateContext 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'];
@@ -1133,6 +1148,31 @@ export class TemplatedInputColumnsComponent {
     public columns = Object.keys(this.data[0]);
 }
 
+
+@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">
+                <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">