diff --git a/CHANGELOG.md b/CHANGELOG.md
index 483b26f85fb..5d0b49b7eba 100644
--- 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
+
+
+
+
+
+
+
+ {{ value }}
+
+ ```
## 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
index 0097d33553c..b780f402926 100644
--- 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 {
return this._bodyTemplate;
}
@@ -600,7 +601,9 @@ export class IgxColumnComponent implements AfterContentInit {
*/
set bodyTemplate(template: TemplateRef) {
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 {
return this._headerTemplate;
}
@@ -630,7 +634,9 @@ export class IgxColumnComponent implements AfterContentInit {
*/
set headerTemplate(template: TemplateRef) {
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 {
return this._inlineEditorTemplate;
}
@@ -658,7 +665,9 @@ export class IgxColumnComponent implements AfterContentInit {
*/
set inlineEditorTemplate(template: TemplateRef) {
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
index 42c22b7d921..5a754219d23 100644
--- 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;
}
+@Component({
+ template: `
+
+
+
+
+
+
+ {{ value }}
+
+
+
+
+
+
+
+ {{ value }}
+
+ `
+})
+export class TemplatedInputColumnsComponent {
+
+ data = SampleTestData.personIDNameRegionData();
+ columns = Object.keys(this.data[0]);
+
+ @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+ public instance: IgxGridComponent;
+}
+
@Component({
template: `