Merge pull request #12855 from IgniteUI/mkirova/fix-12765

Generate child igx-hierarchical-grids dynamically.

Author: kdinev

projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.html

@@ -1,3 +1,3 @@
 <div class="igx-grid__hierarchical-indent" [ngClass]="{'igx-grid__hierarchical-indent--scroll': parentHasScroll}">
-    <igx-hierarchical-grid #hgrid [data]='data.childGridsData[layout.key]'></igx-hierarchical-grid>
+    <ng-container #container></ng-container>
 </div>

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

@@ -95,7 +95,12 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
     @Input()
     public index: number;
 
-    @ViewChild('hgrid', { static: true })
+    @ViewChild('container', {read: ViewContainerRef, static: true}) 
+    public container: ViewContainerRef;
+
+    /**
+     * @hidden
+     */
     public hGrid: IgxHierarchicalGridComponent;
 
     /**
@@ -155,6 +160,9 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      * @hidden
      */
     public ngOnInit() {
+        const ref = this.container.createComponent(IgxHierarchicalGridComponent, { injector: this.container.injector });
+        this.hGrid = ref.instance;
+        this.hGrid.data = this.data.childGridsData[this.layout.key];
         this.layout.layoutChange.subscribe((ch) => {
             this._handleLayoutChanges(ch);
         });