Merge pull request #6819 from IgniteUI/mkirova/fix-6701-master

fix(igxHierarchicalGrid): Fixing ivy issue with dynamically added sum…

Author: ChronosSF

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

@@ -2845,14 +2845,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         const extractForOfs = pipe(map((collection: any[]) => collection.filter(elementFilter).map(item => item.virtDirRow)));
         const rowListObserver = extractForOfs(this._dataRowList.changes);
         const summaryRowObserver = extractForOfs(this._summaryRowList.changes);
-
-        combineLatest([rowListObserver, summaryRowObserver]).pipe(takeUntil(this.destroy$))
-            .subscribe(([row, summary]) => this._horizontalForOfs = [...row, ...summary]);
-
-        this._horizontalForOfs = [
-            ...this._dataRowList.filter(elementFilter).map(item => item.virtDirRow),
-            ...this._summaryRowList.filter(elementFilter).map(item => item.virtDirRow)
-        ];
+        const resetHorizontalForOfs = () => {
+            this._horizontalForOfs = [
+                ...this._dataRowList.filter(elementFilter).map(item => item.virtDirRow),
+                ...this._summaryRowList.filter(elementFilter).map(item => item.virtDirRow)
+            ];
+        };
+        rowListObserver.pipe(takeUntil(this.destroy$)).subscribe(resetHorizontalForOfs);
+        summaryRowObserver.pipe(takeUntil(this.destroy$)).subscribe(resetHorizontalForOfs);
+        resetHorizontalForOfs();
     }
 
     /**

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

@@ -211,7 +211,6 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
     }));
 
     it('should include summary rows in tab sequence.', (async () => {
-        pending('Related to the issue #6701');
         const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
         childGrid.getColumnByName('ID').hasSummary = true;
         fixture.detectChanges();

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

@@ -70,6 +70,7 @@ <h4 class="sample-title">Sample One</h4>
 
     <h4 class="sample-title">Sample two</h4>
     <div class="sample-actions">
+        <button igxButton="raised" (click)="enableSummary()">Enable Summaries</button>
         <button igxButton="raised" (click)='setterBindingChange()'>Set rowSelectable via binding</button>
         <button igxButton="raised" (click)='setterChange()'>Set rowSelectable via setter on 1st layout</button>
         <button igxButton="raised" (click)='testApis()'>Test APis</button>

src/app/hierarchical-grid/hierarchical-grid.sample.ts

@@ -33,6 +33,9 @@ export class HierarchicalGridSampleComponent {
     @ViewChild('hGrid', { static: true })
     hGrid: IgxHierarchicalGridComponent;
 
+    @ViewChild('hGrid2', { static: true })
+    hGrid2: IgxHierarchicalGridComponent;
+
     constructor(private cdr: ChangeDetectorRef) {
         // this.localData.push({ ID: -1, Name: ''});
         // for (let i = 0; i < 10000; i++) {
@@ -60,6 +63,14 @@ export class HierarchicalGridSampleComponent {
         this.localData[2].childData[1].hasChild = false;
     }
 
+    public enableSummary() {
+        const childGrid = this.hGrid2.hgridAPI.getChildGrids(false)[0];
+        this.hGrid2.getColumnByName('ID').hasSummary = true;
+        if (childGrid) {
+            childGrid.getColumnByName('ID').hasSummary = true;
+        }
+    }
+
     ngAfterViewInit() {
         this.cdr.detectChanges();
     }