fix(groupby): using pipetrigger for chip titles too

Author: ChronosSF

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

@@ -2175,6 +2175,28 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(fix.componentInstance.onGroupByRowClick).toHaveBeenCalledWith(fix.componentInstance.groupByRowClick, contextUnselect);
     }));
 
+    it('should update chips state when columns are added/removed', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupByDataMoreColumnsComponent);
+        const cols = fix.componentInstance.columns;
+        fix.componentInstance.columns = [];
+        fix.componentInstance.instance.groupingExpressions = [
+            {
+                dir: SortingDirection.Asc,
+                fieldName: 'A',
+                ignoreCase: false,
+                strategy: DefaultSortingStrategy.instance()
+            }
+        ];
+        fix.detectChanges();
+        const chips = fix.componentInstance.instance.groupArea.chips;
+        let chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('A');
+        fix.componentInstance.columns = cols;
+        fix.detectChanges();
+        chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('AA');
+    }));
+
     // GroupBy Row Formatting
     it('should properly apply formatters, both custom and default ones for the default row value template', fakeAsync(() => {
         const fix = TestBed.createComponent(GroupableGridComponent);
@@ -4103,7 +4125,7 @@ export class CustomTemplateGridComponent extends DataParent {
             [width]='width'
             [height]='height'
             [data]="testData">
-                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.field" [width]="c.width + 'px'">
+                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.header || c.field" [width]="c.width + 'px'">
                 </igx-column>
         </igx-grid>
     `,
@@ -4119,7 +4141,7 @@ export class GroupByDataMoreColumnsComponent extends DataParent {
     public testData = [];
 
     public columns = [
-        { field: 'A', width: 100 },
+        { field: 'A', header: 'AA', width: 100 },
         { field: 'B', width: 100 },
         { field: 'C', width: 100 },
         { field: 'D', width: 100 },

projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html

@@ -2,15 +2,15 @@
     <ng-container *ngFor="let expression of chipExpressions; let last = last;">
         <igx-chip
             [id]="expression.fieldName"
-            [title]="(expression.fieldName | igxGroupByMeta:grid).title"
+            [title]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title"
             [removable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             [draggable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             [disabled]="!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             (keyDown)="handleKeyDown($event.owner.id, $event.originalEvent)"
             (remove)="clearGrouping($event.owner.id)"
             (chipClick)="handleClick(expression.fieldName)"
         >
-            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>
+            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>
             <igx-icon
                 family="default"
                 [name]="expression.dir === 1 ? 'sort_asc' : 'sort_desc'"