chore(*): Fixing issues with two-way bound collections that created copies of arrays in the setter to trigger change detection. Emit change event for them only if object is actually changed.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts

@@ -96,7 +96,7 @@ export class IgxGridAPIService extends GridBaseAPIService<IgxGridComponent> {
                 hierarchy: DataUtil.getHierarchy(groupRow)
             });
         }
-        this.grid.groupingExpansionState = expansionState;
+        this.grid.groupingExpansionState = [...expansionState];
         if (grid.rowEditable) {
             grid.repositionRowEditingOverlay(grid.rowInEditMode);
         }

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

@@ -331,8 +331,10 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
 	 * @memberof IgxGridComponent
      */
     set groupingExpansionState(value) {
-        this._groupingExpandState = cloneArray(value);
-        this.groupingExpansionStateChange.emit(this._groupingExpandState);
+        if (value !== this._groupingExpandState) {
+            this.groupingExpansionStateChange.emit(value);
+        }
+        this._groupingExpandState = value;
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
         }

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

@@ -143,14 +143,16 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return this._hierarchicalState;
     }
     public set hierarchicalState(val) {
+        if (this._hierarchicalState !== val) {
+            this.hierarchicalStateChange.emit(val);
+        }
         if (this.hasChildrenKey) {
             val = val.filter(item => {
                 const rec = this.primaryKey ? this.data.find(x => x[this.primaryKey] === item.rowID) : item.rowID;
                 return rec[this.hasChildrenKey];
             });
         }
         this._hierarchicalState = val;
-        this.hierarchicalStateChange.emit(this._hierarchicalState);
         if (this.parent) {
             this.notifyChanges(true);
         }

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

@@ -4,8 +4,8 @@
     <div class="density-chooser" style="margin-bottom: 16px">
             <igx-buttongroup [values]="summaryModes" (onSelect)="selectSummaryMode($event)" style="display: block; width: 500px"></igx-buttongroup>
         </div>
-    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" (onGroupingDone)="onGroupingDoneHandler($event)" [hideGroupedColumns]="hideGroupedColumns" [groupingExpressions]='groupingExpressions'
-    [height]="'700px'" [rowSelectable]='true'  [summaryCalculationMode]="summaryMode">
+    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" (onGroupingDone)="onGroupingDoneHandler($event)" [hideGroupedColumns]="hideGroupedColumns" [(groupingExpressions)]='groupingExpressions'
+    [height]="'700px'" [(groupingExpansionState)]='expState' [rowSelectable]='true'  [summaryCalculationMode]="summaryMode">
         <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width"
             [hidden]='c.hidden' [sortable]='true' [groupable]='c.groupable' [movable]='true' [pinned]='!!c.pinned' [editable]="true" [hasSummary]="true" [dataType]='c.dataType'>
         </igx-column>
@@ -20,6 +20,7 @@
     <button igxButton="raised" (click)="groupBy('City')">Group/Ungroup 'City'</button>
     <button igxButton="raised" (click)="groupBy('PostalCode')">Group/Ungroup 'PostalCode'</button>
     <button igxButton="raised" (click)="getRowsList()">Get rowslist'</button>
+    <button igxButton="raised" (click)="getState()">Get state</button>
 
     <br />
     <button igxButton="raised" (click)="groupMultiple()">Group "Contact Title", "Address", "Country"</button>

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

@@ -15,6 +15,7 @@ export class GridGroupBySampleComponent implements OnInit {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
     public data: Array<any>;
     public hideGroupedColumns = false;
+    expState = [];
     public columns: Array<any>;
     public groupingExpressions: Array<ISortingExpression>;
     public summaryMode = 'rootLevelOnly';
@@ -105,6 +106,11 @@ export class GridGroupBySampleComponent implements OnInit {
         console.log(this.grid1.rowList);
     }
 
+    getState() {
+        console.log(JSON.stringify(this.expState));
+        console.log(JSON.stringify(this.groupingExpressions));
+    }
+
     onGroupingDoneHandler(event){
         console.log("onGroupingDone: ");
         console.log(event);

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

@@ -3,7 +3,8 @@ <h4 class="sample-title">Sample One</h4>
     <div class="density-chooser" style="margin-bottom: 16px">
         <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
     </div>
-    <igx-hierarchical-grid [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
+    <button igxButton="raised" (click)="getState()">Get state</button>
+    <igx-hierarchical-grid [(hierarchicalState)]="hgridState" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' class="hgrid" [allowFiltering]='true' #grid1 [data]="localData" [displayDensity]="density" [rowSelectable]="true" [autoGenerate]="false" [allowFiltering]='true'  [paging]="true"
         [height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded" #hGrid>
         <igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
         <igx-column-group header="Information">

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

@@ -19,6 +19,7 @@ export class HierarchicalGridSampleComponent {
     density = 'comfortable';
     displayDensities;
     riToggle = true;
+    hgridState = [];
 
     public columns;
     public childColumns;
@@ -75,6 +76,10 @@ export class HierarchicalGridSampleComponent {
         return prods;
     }
 
+    getState() {
+        console.log(this.hgridState);
+    }
+
     generateDataUneven(count: number, level: number, parendID: string = null) {
         const prods = [];
         const currLevel = level;