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 }} + + + + {{ column.field }} + + + + {{ value }} + + ` +}) +export class TemplatedInputColumnsComponent { + + data = SampleTestData.personIDNameRegionData(); + columns = Object.keys(this.data[0]); + + @ViewChild(IgxGridComponent, { read: IgxGridComponent }) + public instance: IgxGridComponent; +} + @Component({ template: `