Merge pull request #6537 from IgniteUI/mkirova/fix-6535-8.2.x

fix(igxHierarchicalGrid): Fix for issue with caching when child grid …

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -106,6 +106,8 @@ export class IgxTemplateOutletDirective implements OnChanges {
             this._viewContainerRef.insert(view, 0);
             this._updateExistingContext(this.igxTemplateOutletContext);
             this.onViewMoved.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
+        } else {
+            this._updateExistingContext(this.igxTemplateOutletContext);
         }
     }
     private _useCachedView() {

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

@@ -108,8 +108,9 @@ <h4 class="sample-title">Sample three</h4>
     <h4 class="sample-title">Sample 4</h4>
     <div class="sample-actions">
         <button igxButton="raised" (click)='LoadMoreColumns()'>Change columns runtime</button>
+        <button igxButton="raised" (click)='changeData()'>Change data runtime</button>
     </div>
-    <igx-hierarchical-grid [data]="localData" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
+    <igx-hierarchical-grid [data]="localData1" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
             <igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
             <igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
             <igx-column field="ProductName" hasSummary='true'></igx-column>

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

@@ -13,6 +13,9 @@ import {
 })
 export class HierarchicalGridSampleComponent {
     localData = [];
+    localData1 = [];
+    data1 = [];
+    data2 = [];
     isRowSelectable = false;
     firstLevelExpanded = false;
     rootExpanded = false;
@@ -48,6 +51,9 @@ export class HierarchicalGridSampleComponent {
             { label: 'comfortable', selected: this.density === 'comfortable', togglable: true }
         ];
         this.localData = this.generateDataUneven(100, 3);
+        this.data1 = this.localData.slice(0, 10);
+        this.data2 = this.localData.slice(10, 20);
+        this.localData1 = this.data1;
         this.localData[0].hasChild = false;
         this.localData[1].hasChild = false;
         this.localData[2].childData[0].hasChild = false;
@@ -135,4 +141,13 @@ export class HierarchicalGridSampleComponent {
         this.columns = ['Col1', 'Col2', 'Col3'];
         this.childColumns = ['ChildCol1', 'ChildCol2'];
     }
+
+    public changeData() {
+        debugger;
+        if (this.localData1 === this.data1) {
+            this.localData1 = this.data2;
+        } else {
+            this.localData1 = this.data1;
+        }
+    }
 }