diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
index db2228547e2..b581945429b 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -104,7 +104,17 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      * ```
      */
     @Input()
-    public data: any = [];
+    public get data(): any {
+        return this._data || [];
+    }
+
+    public set data(value: any) {
+        this._data = value;
+        if (this.hGrid) {
+            this.hGrid.data = this._data.childGridsData[this.layout.key];
+        }
+    }
+    
     /**
      * The index of the row.
      *
@@ -171,6 +181,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
      */
     public expanded = false;
 
+    private _data: any;
+
     constructor(
         @Inject(IGX_GRID_SERVICE_BASE) public readonly gridAPI: IgxHierarchicalGridAPIService,
         public element: ElementRef<HTMLElement>,
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
index 5526ee4dd92..0f605da4e59 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
@@ -458,6 +458,28 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
             expect(childGrid.data).toBe(newData2[0].childData);
         });
 
+        it('should update already created child grid with new records added to the root data', () => {
+            let row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+            let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+            fixture.componentInstance.data[0].childData = [...hierarchicalGrid.data[0].childData ?? [], { ID: 10, ProductName: 'New child' }];
+            fixture.componentInstance.data = [...fixture.componentInstance.data];
+            fixture.detectChanges();
+
+            childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+            childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+
+            const length = fixture.componentInstance.data[0].childData.length;
+            const newRow = childGrid.gridAPI.get_row_by_index(length - 1) as IgxHierarchicalRowComponent;
+
+            expect(newRow).not.toBeUndefined();
+            expect(childGrid.data).toBe(fixture.componentInstance.data[0].childData);
+        });
+
         it('when child width is in percents its width should be update if parent width changes while parent row is collapsed. ', async () => {
             const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
             UIInteractions.simulateClickAndSelectEvent(row.expander);