Merge pull request #3568 from IgniteUI/rkaraivanov/grid-column-templa…

…teref-input-master feat(igx-grid): Expose column templates as inputs
IgniteUI · Jan 10, 2019 · 1e944b5 · 1e944b5
2 parents 7e119ac + 53755cb
commit 1e944b5
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,21 @@ All notable changes for each version of this project will be documented in this
 ### Features
 - `igx-circular-bar` and `igx-linear-bar` now feature an indeterminate input property. When this property is set to true the indicator will be continually growing and shrinking along the track.
 - `IgxTimePickerComponent`: in addition to the current dialog interaction mode, now the user can select or edit a time value, using an editable masked input with a dropdown.
+- `IgxColumnComponent` now accepts its templates as input properties through the markup. This can reduce the amount of code one needs to write when applying a single template to multiple columns declaratively. The new exposed inputs are:
+    + `cellTemplate` - the template for the column cells
+    + `headerTemplate` - the template for the column header
+    + `cellEditorTemplate` - the template for the column cells when a cell is in edit mode
+    + ```html
+        <!-- Example -->
+
+        <igx-grid ...>
+            <igx-column *ngFor="let each of defs" [cellTemplate]="newTemplate" ...></igx-column>
+        </igx-grid>
+
+        <ng-template #newTemplate let-value>
+            {{ value }}
+        </ng-template>
+        ```
 
 ## 7.1.1
 ### Bug Fixes

diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts
@@ -579,6 +579,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input('cellTemplate')
     get bodyTemplate(): TemplateRef<any> {
         return this._bodyTemplate;
     }
@@ -600,7 +601,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set bodyTemplate(template: TemplateRef<any>) {
         this._bodyTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Returns a reference to the header template.
@@ -609,6 +612,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input()
     get headerTemplate(): TemplateRef<any> {
         return this._headerTemplate;
     }
@@ -630,7 +634,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set headerTemplate(template: TemplateRef<any>) {
         this._headerTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Returns a reference to the inline editor template.
@@ -639,6 +645,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```
      * @memberof IgxColumnComponent
      */
+    @Input('cellEditorTemplate')
     get inlineEditorTemplate(): TemplateRef<any> {
         return this._inlineEditorTemplate;
     }
@@ -658,7 +665,9 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     set inlineEditorTemplate(template: TemplateRef<any>) {
         this._inlineEditorTemplate = template;
-        this.grid.markForCheck();
+        if (this.grid) {
+            this.grid.cdr.markForCheck();
+        }
     }
     /**
      * Gets the cells of the column.

diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
@@ -20,6 +20,7 @@ describe('IgxGrid - Column properties', () => {
             declarations: [
                 ColumnsFromIterableComponent,
                 TemplatedColumnsComponent,
+                TemplatedInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent
@@ -247,6 +248,26 @@ describe('IgxGrid - Column properties', () => {
         expect(grid.columns[0].width).toBe('300');
         expect(grid.columns[1].width).toBe('300');
     });
+
+    it('should support passing templates through the markup as an input property', () => {
+        const fixture = TestBed.createComponent(TemplatedInputColumnsComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.instance;
+
+        grid.getColumnByName('Name').cells.forEach(c =>
+            expect(c.nativeElement.querySelector('.customCellTemplate')).toBeDefined());
+
+        grid.headerCellList.forEach(header =>
+            expect(header.elementRef.nativeElement.querySelector('.customHeaderTemplate')).toBeDefined());
+
+        const cell = grid.getCellByColumn(0, 'ID');
+        cell.inEditMode = true;
+        fixture.detectChanges();
+
+        expect(cell.nativeElement.querySelector('.customEditorTemplate')).toBeDefined();
+
+    });
 });
 
 @Component({
@@ -284,6 +305,37 @@ export class TemplatedColumnsComponent {
     public newCellTemplate: TemplateRef<any>;
 }
 
+@Component({
+    template: `
+        <igx-grid [data]="data">
+            <igx-column *ngFor="let field of columns" [field]="field" [editable]="true"
+                [cellTemplate]="cell" [headerTemplate]="header"
+                [cellEditorTemplate]="editor">
+            </igx-column>
+        </igx-grid>
+
+        <ng-template #cell let-value>
+            <span class="customCellTemplate">{{ value }}</span>
+        </ng-template>
+
+        <ng-template #header let-column>
+            <span class="customHeaderTemplate">{{ column.field }}</span>
+        </ng-template>
+
+        <ng-template #editor let-value>
+            <span class="customEditorTemplate">{{ value }}</span>
+        </ng-template>
+    `
+})
+export class TemplatedInputColumnsComponent {
+
+    data = SampleTestData.personIDNameRegionData();
+    columns = Object.keys(this.data[0]);
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public instance: IgxGridComponent;
+}
+
 @Component({
     template: `
         <igx-grid [data]="data" height="500px" width="400px">