Merge pull request #12197 from IgniteUI/mkirova/expose-grid-sort-template-inputs

Expose grid sorting template inputs

Author: dkamburov

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - `igxGrid` - exposing new Input properties:
+
+    - `sortHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
+    - `sortAscendingHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
+    - `sortDescendingHeaderIconTemplate` - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.
     - `rowEditActionsTemplate` - Gets/Sets the row edit actions template.
     - `rowAddTextTemplate` - Gets/Sets the row add text template.
     - `rowEditTextTemplate` - Gets/Sets the row edit text template.

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1474,23 +1474,99 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef })
     public excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
 
+
     /**
-     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
+     * @hidden
+     * @internal
      */
     @ContentChild(IgxSortAscendingHeaderIconDirective, { read: TemplateRef })
-    public sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    public sortAscendingHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
 
     /**
-     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
+     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
+     */
+    @Input()
+    public get sortAscendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext> {
+        return this._sortAscendingHeaderIconTemplate;
+    }
+
+    /**
+     * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
+     *```html
+     * <ng-template #template igxSortAscendingHeaderIcon>
+     *    <igx-icon>expand_less</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.sortAscendingHeaderIconTemplate = this.template;
+     * ```
      */
+    public set sortAscendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>) {
+        this._sortAscendingHeaderIconTemplate = template;
+    }
+
+
     @ContentChild(IgxSortDescendingHeaderIconDirective, { read: TemplateRef })
-    public sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    public sortDescendingHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
 
     /**
-     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
+     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
+     */
+    @Input()
+    public get sortDescendingHeaderIconTemplate() {
+        return this._sortDescendingHeaderIconTemplate;
+    }
+
+    /**
+     * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.
+     *```html
+     * <ng-template #template igxSortDescendingHeaderIcon>
+     *    <igx-icon>expand_more</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.sortDescendingHeaderIconTemplate = this.template;
+     * ```
+     */
+    public set sortDescendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>) {
+            this._sortDescendingHeaderIconTemplate = template;
+    }
+
+    /**
+     * @hidden
+     * @internal
      */
     @ContentChild(IgxSortHeaderIconDirective, { read: TemplateRef })
-    public sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    public sortHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+
+    /**
+     * Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
+     */
+    @Input()
+    public get sortHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext> {
+        return this._sortHeaderIconTemplate;
+    }
+
+    /**
+     * Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
+     *```html
+     * <ng-template #template igxSortHeaderIcon>
+     *    <igx-icon>unfold_more</igx-icon>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'template'", {read: TemplateRef })
+     * public template: TemplateRef<any>;
+     * this.grid.sortHeaderIconTemplate = this.template;
+     * ```
+     */
+    public set sortHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>) {
+        this._sortHeaderIconTemplate = template;
+    }
 
     /**
      * @hidden
@@ -3048,6 +3124,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private readonly DRAG_SCROLL_DELTA = 10;
     private _dataCloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy();
     private _autoSize = false;
+    private _sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    private _sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
+    private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
 
     /**
      * @hidden @internal
@@ -3621,6 +3700,18 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     public ngAfterContentInit() {
+        if (this.sortHeaderIconDirectiveTemplate) {
+            this.sortHeaderIconTemplate = this.sortHeaderIconDirectiveTemplate;
+        }
+
+        if (this.sortAscendingHeaderIconDirectiveTemplate) {
+            this.sortAscendingHeaderIconTemplate = this.sortAscendingHeaderIconDirectiveTemplate;
+        }
+
+        if (this.sortDescendingHeaderIconDirectiveTemplate) {
+            this.sortDescendingHeaderIconTemplate = this.sortDescendingHeaderIconDirectiveTemplate;
+        }
+
         this.setupColumns();
         this.toolbar.changes.pipe(filter(() => !this._init), takeUntil(this.destroy$)).subscribe(() => this.notifyChanges(true));
         this.setUpPaginator();

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

@@ -571,6 +571,29 @@ describe('IgxGrid - Grid Sorting #grid', () => {
             expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('expand_more');
         });
 
+        it('Should allow setting custom templates for header sorting none/ascending/descending icons via Input.', () => {
+            fixture = TestBed.createComponent(SortByParityComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            grid.sortHeaderIconTemplate = fixture.componentInstance.sortIconTemplate;
+            grid.sortAscendingHeaderIconTemplate = fixture.componentInstance.sortAscIconTemplate;
+            grid.sortDescendingHeaderIconTemplate = fixture.componentInstance.sortDescIconTemplate;
+            fixture.detectChanges();
+            const header = GridFunctions.getColumnHeader('Name', fixture, grid);
+            let icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_right');
+
+            grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: false });
+            fixture.detectChanges();
+            icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_drop_up');
+
+            grid.sort({ fieldName: 'Name', dir: SortingDirection.Desc, ignoreCase: false });
+            fixture.detectChanges();
+            icon = GridFunctions.getHeaderSortIcon(header);
+            expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('arrow_drop_down');
+        });
+
         it('Should be able to set single sorting mode and sort one column at a time', fakeAsync(() => {
             fixture = TestBed.createComponent(SortByParityComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -7,7 +7,7 @@ import {
 } from './grid-base-components.spec';
 import { IGridSelection } from './grid-interfaces.spec';
 import { SampleTestData, DataParent } from './sample-test-data.spec';
-import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions } from './template-strings.spec';
+import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions, ExternalTemplateDefinitions } from './template-strings.spec';
 import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
@@ -2326,8 +2326,18 @@ export class NoColumnWidthGridComponent extends BasicGridComponent {
         '',
         '',
         TemplateDefinitions.sortIconTemplates)
+        +  ExternalTemplateDefinitions.sortIconTemplates
 })
 export class SortByParityComponent extends GridDeclaredColumnsComponent implements ISortingStrategy {
+     @ViewChild('sortIcon', {read: TemplateRef })
+     public sortIconTemplate: TemplateRef<any>;
+
+     @ViewChild('sortAscIcon', {read: TemplateRef })
+     public sortAscIconTemplate: TemplateRef<any>;
+
+     @ViewChild('sortDescIcon', {read: TemplateRef })
+     public sortDescIconTemplate: TemplateRef<any>;
+
     public sort(data: any[], fieldName: string, dir: SortingDirection) {
         const key = fieldName;
         const reverse = (dir === SortingDirection.Desc ? -1 : 1);

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -514,6 +514,20 @@ export class TemplateDefinitions {
     `;
 }
 
+export class ExternalTemplateDefinitions {
+    public static sortIconTemplates = `
+        <ng-template #sortIcon igxSortHeaderIcon>
+            <igx-icon>arrow_right</igx-icon>
+        </ng-template>
+        <ng-template #sortAscIcon igxSortAscendingHeaderIcon>
+            <igx-icon>arrow_drop_up</igx-icon>
+        </ng-template>
+        <ng-template #sortDescIcon igxSortDescendingHeaderIcon>
+            <igx-icon>arrow_drop_down</igx-icon>
+        </ng-template>
+    `;
+}
+
 export class EventSubscriptions {
 
     public static columnInit = ` (columnInit)="columnInit($event)"`;