fix(grid): provide custom summary template via input

Author: mmart1n

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -44,7 +44,7 @@ import {
     IgxCellEditorTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective,
-    IgxCustomSummaryCellTemplateDirective
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
 import { DropPosition } from '../moving/moving.service';
@@ -837,8 +837,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     /**
      * @hidden
      */
-    @ContentChild(IgxCustomSummaryCellTemplateDirective, { read: IgxCustomSummaryCellTemplateDirective })
-    public customSummaryCellTemplateDirective: IgxCustomSummaryCellTemplateDirective;
+    @ContentChild(IgxSummaryTemplateDirective, { read: IgxSummaryTemplateDirective })
+    protected summaryTemplateDirective: IgxSummaryTemplateDirective;
     /**
      * @hidden
      */
@@ -1114,6 +1114,39 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
                 return '80';
         }
     }
+    /**
+     * Returns a reference to the `summaryTemplate`.
+     * ```typescript
+     * let summaryTemplate = this.column.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input('summaryTemplate')
+    public get summaryTemplate(): TemplateRef<any> {
+        return this._summaryTemplate;
+    }
+    /**
+     * Sets the summary template.
+     * ```html
+     * <ng-template #summaryTemplate igxSummary let-summaryResults>
+     *    <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
+     *    <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'summaryTemplate'", {read: TemplateRef })
+     * public summaryTemplate: TemplateRef<any>;
+     * this.column.summaryTemplate = this.summaryTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    public set summaryTemplate(template: TemplateRef<any>) {
+        this._summaryTemplate = template;
+    }
     /**
      * Returns a reference to the `bodyTemplate`.
      * ```typescript
@@ -1570,6 +1603,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     protected _headerTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    protected _summaryTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
@@ -1677,6 +1714,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * @hidden
      */
     public ngAfterContentInit(): void {
+        if (this.summaryTemplateDirective) {
+            this._summaryTemplate = this.summaryTemplateDirective.template;
+        }
         if (this.cellTemplate) {
             this._bodyTemplate = this.cellTemplate.template;
         }

projects/igniteui-angular/src/lib/grids/columns/column.module.ts

@@ -9,13 +9,13 @@ import {
     IgxCellTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective,
-    IgxCustomSummaryCellTemplateDirective
+    IgxSummaryTemplateDirective
 } from './templates.directive';
 
 @NgModule({
     declarations: [
         IgxFilterCellTemplateDirective,
-        IgxCustomSummaryCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,
@@ -32,7 +32,7 @@ import {
     ],
     exports: [
         IgxFilterCellTemplateDirective,
-        IgxCustomSummaryCellTemplateDirective,
+        IgxSummaryTemplateDirective,
         IgxCellTemplateDirective,
         IgxCellHeaderTemplateDirective,
         IgxCellFooterTemplateDirective,

projects/igniteui-angular/src/lib/grids/columns/templates.directive.ts

@@ -52,8 +52,9 @@ export class IgxCollapsibleIndicatorTemplateDirective {
 }
 
 @Directive({
-    selector: '[igxCustomSummaryCell]'
+    selector: '[igxSummary]'
 })
-export class IgxCustomSummaryCellTemplateDirective {
+export class IgxSummaryTemplateDirective {
+
     constructor(public template: TemplateRef<any>) { }
 }

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

@@ -34,7 +34,6 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
-import { IgxCustomSummaryCellTemplateDirective } from '../columns/templates.directive';
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
 export const IGX_GRID_SERVICE_BASE = new InjectionToken<GridServiceType>('IgxGridServiceBaseToken');
@@ -157,8 +156,8 @@ export interface ColumnType {
     filteringIgnoreCase: boolean;
     filteringExpressionsTree: FilteringExpressionsTree;
     hasSummary: boolean;
-    customSummaryCellTemplateDirective: IgxCustomSummaryCellTemplateDirective;
     summaries: any;
+    summaryTemplate: TemplateRef<any>;
     pinned: boolean;
     expanded: boolean;
     selected: boolean;

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html

@@ -1,23 +1,11 @@
 <ng-container *ngIf="hasSummary">
-    <ng-container *ngTemplateOutlet="column.customSummaryCellTemplateDirective ? customSummary : defaultSummary">
+    <ng-container *ngTemplateOutlet="column.summaryTemplate ? column.summaryTemplate : defaultSummary; context: { $implicit: summaryResults }">
     </ng-container>
 </ng-container>
-<ng-template #customSummary>
-    <ng-container *ngTemplateOutlet="column.customSummaryCellTemplateDirective.template; context: { $implicit: summaryResults }">
-    </ng-container>
-</ng-template>
     <ng-template #defaultSummary>
         <ng-container *ngFor="let summary of summaryResults" >
             <div class="igx-grid-summary__item" [style.height.px]="itemHeight">
 
-                <ng-container *ngIf="visibleColumnIndex === 0 && firstCellIndentation >= 0">
-                    <div class="igx-grid__tree-cell--padding-level-{{firstCellIndentation}}"></div>
-
-                    <div #indicator class="igx-grid__tree-grouping-indicator" style="visibility: hidden">
-                        <igx-icon>chevron_right</igx-icon>
-                    </div>
-                </ng-container>
-
                 <span class="igx-grid-summary__label" [title]="summary.label">{{ translateSummary(summary) }}</span>
                 <span class="igx-grid-summary__result" [title]="summary.summaryResult">
                     {{

src/app/grid-summaries/grid-summaries.sample.html

@@ -34,7 +34,7 @@
         <ng-template igxCell let-cell="cell" let-val let-row>
             ${{val}}
         </ng-template>
-        <ng-template igxCustomSummaryCell let-summaryResults>
+        <ng-template igxSummary let-summaryResults>
             <div style="font-size: 0.75rem">
                 <span>Custom summary cell:</span><br>
                 <span>Number of Summaries: {{ summaryResults.length }}</span><br>