diff --git a/CHANGELOG.md b/CHANGELOG.md index 18b94db9f0c..f270c64a8c6 100644 --- a/CHANGELOG.md +++ b/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 + + + ``` + can be simplified like: + ```html + + + ``` + - 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`. diff --git a/projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json new file mode 100644 index 00000000000..de9e6f202a9 --- /dev/null +++ b/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" + } + } + ] +} diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts index c5af7e551ce..5e218059e25 100644 --- a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts +++ b/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`, + ` + + + + + + + Child toolbar {{ gridRef.parentIsland.level }} + + + + + + + ` + ); + + const tree = await schematicRunner.runSchematic(migrationName, {}, appTree); + + expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual( + ` + + + + + + + Child toolbar {{ gridRef.parentIsland.level }} + + + + + + + ` + ); + }); }); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index 641446efc4b..4716c5c856e 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/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()); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts index 1d911779706..0f3f69f08f0 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts +++ b/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 diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index b9a921559d2..c78d7f19446 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -30,7 +30,7 @@ import { IgxPaginatorDirective } from '../paginator/paginator-interfaces'; - +
@@ -104,7 +104,7 @@ export class IgxHierarchicalGridTestBaseComponent { - +
@@ -355,12 +355,12 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit { - + - + diff --git a/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html b/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html index 0a43c019cc6..cc8eb716d93 100644 --- a/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html +++ b/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html @@ -14,7 +14,7 @@ - + Child Toolbar - Level 2 @@ -26,7 +26,7 @@ - + Child Toolbar - Level 3 diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index 0d919283fc5..09094c6fbda 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -67,8 +67,8 @@

Sample One

- - Child Grid 1 + + {{ toolbarTitle }} @@ -90,7 +90,7 @@

Sample One

- + Child of the Child diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index aad271cd009..f02da951c38 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/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 = {