feat(grid): add new directive for retemplating summaries

Author: ddaribo

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

@@ -45,7 +45,8 @@ import {
     IgxCellHeaderTemplateDirective,
     IgxCellEditorTemplateDirective,
     IgxCollapsibleIndicatorTemplateDirective,
-    IgxFilterCellTemplateDirective
+    IgxFilterCellTemplateDirective,
+    IgxCustomSummaryCellTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
 import { DropPosition } from '../moving/moving.service';
@@ -837,6 +838,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      */
     @ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective })
     public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
+    /**
+     * @hidden
+     */
+    @ContentChild(IgxCustomSummaryCellTemplateDirective, { read: IgxCustomSummaryCellTemplateDirective })
+    public customSummaryCellTemplateDirective: IgxCustomSummaryCellTemplateDirective;
     /**
      * @hidden
      */
@@ -857,7 +863,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      */
     @ContentChild(IgxCollapsibleIndicatorTemplateDirective, { read: IgxCollapsibleIndicatorTemplateDirective, static: false })
     protected collapseIndicatorTemplate: IgxCollapsibleIndicatorTemplateDirective;
-
     /**
      * @hidden
      */
@@ -1257,7 +1262,36 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     public set filterCellTemplate(template: TemplateRef<any>) {
         this._filterCellTemplate = template;
     }
-
+    /**
+     * Returns a reference to the `customSummaryCellTemplate`.
+     * ```typescript
+     * let customSummaryCellTemplate = this.column.customSummaryCellTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+     @notifyChanges()
+     @WatchColumnChanges()
+     @Input()
+     public get customSummaryCellTemplate(): TemplateRef<any> {
+         return this._customSummaryCellTemplate;
+     }
+    /**
+     * Sets the custom summary cell template.
+     * ```html
+     * <ng-template igxCustomSummaryCell  let-summaryResults>
+     *    {{ summaryResults[0].label }}
+     * </ng-template>
+     * ```
+     * ```typescript
+     *
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+     public set customSummaryCellTemplate(template: TemplateRef<any>) {
+         this._customSummaryCellTemplate = template;
+     }
     /**
      * Gets the cells of the column.
      * ```typescript
@@ -1588,6 +1622,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * @hidden
      */
     protected _filterCellTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    protected _customSummaryCellTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
@@ -1699,6 +1737,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         if (this.filterCellTemplateDirective) {
             this._filterCellTemplate = this.filterCellTemplateDirective.template;
         }
+        if (this.customSummaryCellTemplateDirective) {
+            this._customSummaryCellTemplate = this.customSummaryCellTemplateDirective.template;
+        }
         if (!this._columnPipeArgs.format) {
             this._columnPipeArgs.format = this.dataType === GridColumnDataType.Time ?
                 DEFAULT_TIME_FORMAT : this.dataType === GridColumnDataType.DateTime ?

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

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

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

@@ -50,3 +50,10 @@ export class IgxCollapsibleIndicatorTemplateDirective {
 
     constructor(public template: TemplateRef<any>) { }
 }
+
+@Directive({
+    selector: '[igxCustomSummaryCell]'
+})
+export class IgxCustomSummaryCellTemplateDirective {
+    constructor(public template: TemplateRef<any>) { }
+}

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

@@ -1,5 +1,10 @@
 <ng-container *ngIf="hasSummary">
-    <ng-container *ngFor="let summary of summaryResults">
+    <ng-container
+        *ngTemplateOutlet="column.customSummaryCellTemplate ? column.customSummaryCellTemplate : defaultSummary; context: { $implicit: summaryResults, summaryResults: summaryResults}">
+    </ng-container>
+
+    <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">
@@ -29,5 +34,6 @@
                     }}
                 </span>
             </div>
-    </ng-container>
+        </ng-container>
+    </ng-template>
 </ng-container>

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

@@ -30,6 +30,11 @@
         <ng-template igxCell let-cell="cell" let-val let-row>
             ${{val}}
         </ng-template>
+        <ng-template igxCustomSummaryCell let-summaryResults>
+        <span>Custom summary cell:</span>
+           <span>Number of Summaries: {{ summaryResults.length }}</span>
+           <span>FirstSummary - {{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</span>
+        </ng-template>
     </igx-column>
     <igx-column field="OrderDate" [width]="cw" [dataType]="'date'" [hasSummary]="false" [sortable]="true">
     </igx-column>