Merge pull request #11763 from IgniteUI/mkirova/pivot-chip-templating

Add pivot value chip content template.

Author: dkamburov

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 14.1.0
+
+- `igxPivotGrid`
+    - Add option to template the pivot value chip content:
+    ```
+    <ng-template igxPivotValueChip let-value>
+            {{ value.member }}
+    </ng-template>
+    ``` 
+
 ## 14.0.0
 - `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
 - `IgxCombo` and  `IgxSimpleComboComponent`

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

@@ -652,6 +652,7 @@ export interface PivotGridType extends GridType {
     hasMultipleValues: boolean;
     excelStyleFilterMaxHeight: string;
     excelStyleFilterMinHeight: string;
+    valueChipTemplate: TemplateRef<any>;
 }
 export interface GridSVGIcon {
     name: string;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -23,7 +23,8 @@ import {
     ViewContainerRef,
     Injector,
     NgModuleRef,
-    ApplicationRef
+    ApplicationRef,
+    ContentChild
 } from '@angular/core';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
@@ -71,6 +72,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
 import { DefaultPivotSortingStrategy } from '../../data-operations/pivot-sort-strategy';
 import { PivotSortUtil } from './pivot-sort-util';
 import { FilterUtil, IFilteringStrategy } from '../../data-operations/filtering-strategy';
+import { IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -173,6 +175,23 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
     public theadRow: IgxPivotHeaderRowComponent;
 
+    /**
+    * @hidden @internal
+    */
+    @ContentChild(IgxPivotValueChipTemplateDirective, { read: IgxPivotValueChipTemplateDirective })
+    protected valueChipTemplateDirective: IgxPivotValueChipTemplateDirective;
+
+    /**
+     * Gets/Sets a custom template for the value chips.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>
+     * ```
+     */
+     @Input()
+     public valueChipTemplate: TemplateRef<any>;
+
     @Input()
     /**
      * Gets/Sets the pivot configuration with all related dimensions and values.
@@ -928,6 +947,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         Promise.resolve().then(() => {
             this.setupColumns();
         });
+        if (this.valueChipTemplateDirective) {
+            this.valueChipTemplate = this.valueChipTemplateDirective.template;
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.directives.ts

@@ -0,0 +1,12 @@
+import { Directive, TemplateRef } from '@angular/core';
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxPivotValueChip]'
+})
+export class IgxPivotValueChipTemplateDirective {
+
+    constructor(public template: TemplateRef<any>) { }
+
+}

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.module.ts

@@ -24,6 +24,7 @@ import { IgxPivotRowDimensionContentComponent } from "./pivot-row-dimension-cont
 import { IgxPivotRowDimensionHeaderGroupComponent } from "./pivot-row-dimension-header-group.component";
 import { IgxPivotRowDimensionHeaderComponent } from "./pivot-row-dimension-header.component";
 import { IgxPivotRowComponent } from "./pivot-row.component";
+import { IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
 
 /**
  * @hidden
@@ -47,6 +48,7 @@ import { IgxPivotRowComponent } from "./pivot-row.component";
         IgxFilterPivotItemsPipe,
         IgxPivotGridCellStyleClassesPipe,
         IgxPivotDataSelectorComponent,
+        IgxPivotValueChipTemplateDirective,
     ],
     exports: [
         IgxGridModule,
@@ -67,6 +69,7 @@ import { IgxPivotRowComponent } from "./pivot-row.component";
         IgxFilterPivotItemsPipe,
         IgxPivotGridCellStyleClassesPipe,
         IgxPivotDataSelectorComponent,
+        IgxPivotValueChipTemplateDirective,
     ],
     imports: [IgxGridModule, IgxExpansionPanelModule, IgxDragDropModule, IgxListModule, IgxAccordionModule],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -108,6 +108,17 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(pivotGrid.tbody.nativeElement.textContent).toBe('Custom empty template.');
         });
 
+        it('should allow setting custom chip value template', () => {
+            const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent;
+            pivotGrid.valueChipTemplate = fixture.componentInstance.chipValueTemplate;
+            fixture.detectChanges();
+
+            const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+            const valueChip = headerRow.querySelector('igx-chip[id="UnitsSold"]');
+            let content = valueChip.querySelector('.igx-chip__content');
+            expect(content.textContent.trim()).toBe('UnitsSold');
+        });
+
         it('should apply formatter and dataType from measures', () => {
             const pivotGrid = fixture.componentInstance.pivotGrid;
             pivotGrid.width = '1500px';

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -97,7 +97,7 @@
                                     <igx-icon>functions</igx-icon>
                                     <igx-icon>arrow_drop_down</igx-icon>
                                 </div>
-                                {{value.aggregate.key}}({{value.displayName || value.member}})
+                                <ng-container *ngTemplateOutlet="grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }"></ng-container>
                             </igx-chip>
                             <ng-container *ngIf='last'>
                             <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
@@ -235,3 +235,7 @@
         </igx-chip>
     </igx-chips-area>
 </div>
+
+<ng-template #valueChipDefaultTemplate let-value>
+    {{value.aggregate.key}}({{value.displayName || value.member}})
+</ng-template>

projects/igniteui-angular/src/lib/grids/pivot-grid/public_api.ts

@@ -10,3 +10,4 @@ export * from './pivot-row-dimension-content.component';
 export * from './pivot-row-dimension-header-group.component';
 export * from './pivot-data-selector.component';
 export * from './pivot-row-dimension-header.component';
+export * from './pivot-grid.directives';

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

@@ -18,11 +18,15 @@ import { IPivotConfiguration, IPivotGridColumn, IPivotGridRecord, PivotAggregati
     <ng-template #emptyTemplate>
         <span>Custom empty template.</span>
     </ng-template>
+    <ng-template #chipValue let-value>
+     {{value.member}}
+    </ng-template>
     `
 })
 export class IgxPivotGridTestBaseComponent {
     public defaultExpand = true;
     @ViewChild('emptyTemplate', { read: TemplateRef, static: true }) public emptyTemplate: TemplateRef<any>;
+    @ViewChild('chipValue', { read: TemplateRef, static: true }) public chipValueTemplate: TemplateRef<any>;
     @ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent;
     @ViewChild('selector', { read: IgxPivotDataSelectorComponent, static: true}) public dataSelector: IgxPivotDataSelectorComponent;
     public data;

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

@@ -67,7 +67,11 @@
             [rowSelection]='"single"'
             [pivotConfiguration]="pivotConfigHierarchy"
             (dimensionsChange)="dimensionChange()"
-        ></igx-pivot-grid>
+        >
+        <ng-template igxPivotValueChip let-value>
+            {{ value.member }}
+       </ng-template>
+    </igx-pivot-grid>
     </div>
     <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 </div>