feat(h-grid): provide injector to simplify child toolbar template setup

CHANGELOG.md

@@ -10,10 +10,23 @@ All notable changes for each version of this project will be documented in this
     - Added new property `toggleNodeOnClick` that determines whether clicking over a node will change its expanded state or not. Set to `false` by default.
 - `IgxPivotGrid`
     - `IPivotDimension` interface now exposes a property called `displayName` similar to the one in the `IPivotValue` interface. This property is optional and will be displayed inside the chips for rows and columns in the `IgxPivotGrid`. If the `displayName` property is not set, `memberName` will be used as a fallback.
+- `IgxHierarchicalGrid`, `IgxGridToolbar`
+    - The declaration of child layout toolbar templates no longer require explicit grid reference so the following:
+        ```html
+        <igx-row-island>
+          <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
+        ```
+        can be simplified like:
+        ```html
+        <igx-row-island>
+          <igx-grid-toolbar *igxGridToolbar>
+        ```
+    - With this change the `grid` property of the `IgxGridToolbar` has been deprecated as it's no longer needed and will be removed in a future version.
 - New directive -  `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`.
 - `IgxButton`
     - **Behavioral Change** `buttonSelected` event is now emitted not only when a button gets selected, but also when it gets deselected. However, the event is no longer being emitted on initialization. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on `eventArgs.selected` condition.
 
+
 ### General
 - `igxButton`:
     - **Breaking Change** The `raised` type of the `igxButton` directive has been renamed to `contained`. Automatic migrations are available and will be applied on `ng update`.

projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "grid",
+            "remove": true,
+            "owner": {
+                "selector": "igx-grid-toolbar",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts

@@ -113,4 +113,44 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should remove toolbar grid property', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-hierarchical-grid #grid1>
+            <igx-grid-toolbar>
+                <app-grid-search-box [grid]="grid1"></app-grid-search-box>
+            </igx-grid-toolbar>
+            <igx-row-island>
+                <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
+                    <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
+                    <igx-grid-toolbar-actions>
+                        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+                    </igx-grid-toolbar-actions>
+                </igx-grid-toolbar>
+            </igx-row-island>
+        </igx-hierarchical-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-hierarchical-grid #grid1>
+            <igx-grid-toolbar>
+                <app-grid-search-box [grid]="grid1"></app-grid-search-box>
+            </igx-grid-toolbar>
+            <igx-row-island>
+                <igx-grid-toolbar *igxGridToolbar="let childGrid">
+                    <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
+                    <igx-grid-toolbar-actions>
+                        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+                    </igx-grid-toolbar-actions>
+                </igx-grid-toolbar>
+            </igx-row-island>
+        </igx-hierarchical-grid>
+        `
+        );
+    });
 });

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

@@ -331,7 +331,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
         // Create the child toolbar if the parent island has a toolbar definition
         this.gridCreated.pipe(pluck('grid'), takeUntil(this.destroy$)).subscribe(grid => {
             grid.rendered$.pipe(first(), filter(() => !!this.islandToolbarTemplate))
-                .subscribe(() => grid.toolbarOutlet.createEmbeddedView(this.islandToolbarTemplate, { $implicit: grid }));
+                .subscribe(() => grid.toolbarOutlet.createEmbeddedView(this.islandToolbarTemplate, { $implicit: grid }, { injector: grid.toolbarOutlet.injector }));
             grid.rendered$.pipe(first(), filter(() => !!this.islandPaginatorTemplate))
                 .subscribe(() => {
                     this.rootGrid.paginatorList.changes.pipe(takeUntil(this.destroy$)).subscribe(() => grid.setUpPaginator());

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

@@ -47,6 +47,9 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes
     public showProgress = false;
 
     /**
+     * @deprecated since version 17.1.0
+     * No longer required to be set for the Hierarchical Grid child grid template
+     *
      * Gets/sets the grid component for the toolbar component.
      *
      * @remarks

projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts

@@ -30,7 +30,7 @@ import { IgxPaginatorDirective } from '../paginator/paginator-interfaces';
         </igx-column-group>
         <igx-paginator *ngIf="paging"></igx-paginator>
         <igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
+            <igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
             <igx-column field="ID" [groupable]="true" [hasSummary]='true'>
                 <ng-template igxHeader let-columnRef="column">
                     <div>
@@ -104,7 +104,7 @@ export class IgxHierarchicalGridTestBaseComponent {
         </igx-column-group>
         <igx-paginator *ngIf="paging"></igx-paginator>
         <igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
+            <igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
             <igx-column field="ID" [groupable]="true" [hasSummary]='true'>
                 <ng-template igxHeader let-columnRef="column">
                     <div>
@@ -355,12 +355,12 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
             <button type="button" igxButton="contained">Parent Button</button>
         </igx-grid-toolbar>
         <igx-row-island [key]="'childData1'" #rowIsland1 [primaryKey]="'ID'" [autoGenerate]="true">
-            <igx-grid-toolbar *igxGridToolbar="let grid" [grid]="grid">
+            <igx-grid-toolbar *igxGridToolbar>
                 <button type="button" igxButton="contained">Child 1 Button</button>
             </igx-grid-toolbar>
         </igx-row-island>
         <igx-row-island [key]="'childData2'" #rowIsland2 [primaryKey]="'ID'" [autoGenerate]="true">
-            <igx-grid-toolbar *igxGridToolbar="let grid" [grid]="grid">
+            <igx-grid-toolbar *igxGridToolbar>
                 <button type="button" igxButton="contained">Child2 Button</button>
             </igx-grid-toolbar>
         </igx-row-island>

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

@@ -14,7 +14,7 @@
     <igx-column field="Country"></igx-column>
     <igx-column field="Phone"></igx-column>
     <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
-        <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
+        <igx-grid-toolbar *igxGridToolbar>
             <igx-grid-toolbar-title>Child Toolbar - Level 2</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -26,7 +26,7 @@
         <igx-column field="ShipCity"></igx-column>
         <igx-column field="ShipAddress"></igx-column>
         <igx-row-island #rowIsland2 [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
+            <igx-grid-toolbar *igxGridToolbar>
                 <igx-grid-toolbar-title>Child Toolbar - Level 3</igx-grid-toolbar-title>
                 <igx-grid-toolbar-actions>
                     <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

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

@@ -67,8 +67,8 @@ <h4 class="sample-title">Sample One</h4>
                 </igx-excel-style-filter-operations>
             </igx-grid-excel-style-filtering>
 
-            <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
-                <igx-grid-toolbar-title>Child Grid 1</igx-grid-toolbar-title>
+            <igx-grid-toolbar *igxGridToolbar>
+                <igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
                 <igx-grid-toolbar-actions>
                     <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                     <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
@@ -90,7 +90,7 @@ <h4 class="sample-title">Sample One</h4>
             </ng-template>
             <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
                 [allowFiltering]="true">
-                <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
+                <igx-grid-toolbar *igxGridToolbar>
                     <igx-grid-toolbar-title>Child of the Child</igx-grid-toolbar-title>
                 </igx-grid-toolbar>
                 <igx-column field="ID" [hasSummary]='true'></igx-column>

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

@@ -42,6 +42,7 @@ export class HierarchicalGridSampleComponent implements AfterViewInit {
     public hgridState = [];
     public columns;
     public childColumns;
+    public toolbarTitle = 'Child Grid 1';
 
     public evenCondition = (row: RowType) =>  parseInt(row.data['ID'], 0) % 2 === 0;
     public rowClasses = {