Skip to content

Commit 3d1bdc3

Browse files
damyanpetevdamyanpetev
authored
feat(grid,h-grid): expand/collapse indicator template inputs (#13003)
Expose the previously available through directives templates as `@Input`
1 parent 50d3674 commit 3d1bdc3

File tree

13 files changed

+174
-34
lines changed

13 files changed

+174
-34
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,16 @@ import { IgxGridModule } from 'igniteui-angular';
5555
- **Behavioral Change** The `igxChip` styles have been revisited and the select container animaton has been removed when selecting/deselecting a chip.
5656
- **Behavioral Change** The remove button behavior have been revisited, now when the chip is in `disabled` state the remove button is hidden.
5757
- The `igxChip` have new input `variant` which can take any of the following values: `'primary'`, `'info'`, `'success'`, `'warning'`, `'danger'`
58+
- `IgxGrid`, `IgxHierarchicalGrid`:
59+
- **Breaking Change** The `IgxHeaderExpandIndicatorDirective` and `IgxHeaderCollapseIndicatorDirective` directives, as well as the `headerExpandIndicatorTemplate` and `headerCollapseIndicatorTemplate` properties have been renamed to `IgxHeaderExpandedIndicatorDirective`, `IgxHeaderCollapsedIndicatorDirective`, `headerExpandedIndicatorTemplate` and `headerCollapsedIndicatorTemplate` respectively to properly reflect their purpose. Automatic migrations are available and will be applied on `ng update`.
5860
### New Features
5961
- `IgxExpansionPanel`:
6062
- `IgxExpansionPanelTitleDirective` and `IgxExpansionPanelDescriptionDirective` show tooltip of the provided text content.
6163
- `IgxDateRangePicker`
6264
- Added `showWeekNumbers` input that toggles whether or not the number of a week will be visible next to it
6365
- `IgxGrid`, `IgxHierarchicalGrid`:
6466
- `totalItemCount` can now also be bound as `Input` in remote virtualization scenarios.
67+
- `rowExpandedIndicatorTemplate`, `rowCollapsedIndicatorTemplate`, `headerExpandedIndicatorTemplate`, `headerCollapsedIndicatorTemplate` can now also be bound as `Input` to provide templates for the row and header expand/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.
6568

6669
## 15.1.0
6770

‎projects/igniteui-angular/migrations/update-16_0_0/changes/classes.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
{
99
"name": "IgxColumMaxLengthValidatorDirective",
1010
"replaceWith": "IgxColumnMaxLengthValidatorDirective"
11+
},
12+
{
13+
"name": "IgxHeaderExpandIndicatorDirective",
14+
"replaceWith": "IgxHeaderExpandedIndicatorDirective"
15+
},
16+
{
17+
"name": "IgxHeaderCollapseIndicatorDirective",
18+
"replaceWith": "IgxHeaderCollapsedIndicatorDirective"
1119
}
1220
]
1321
}

‎projects/igniteui-angular/migrations/update-16_0_0/changes/members.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"$schema": "../../common/schema/members-changes.schema.json",
3+
"changes": [
4+
{
5+
"member": "headerExpandIndicatorTemplate",
6+
"replaceWith": "headerExpandedIndicatorTemplate",
7+
"definedIn": [
8+
"IgxGridComponent",
9+
"IgxTreeGridComponent",
10+
"IgxHierarchicalGridComponent",
11+
"IgxPivotGridComponent"
12+
]
13+
},
14+
{
15+
"member": "headerCollapseIndicatorTemplate",
16+
"replaceWith": "headerCollapsedIndicatorTemplate",
17+
"definedIn": [
18+
"IgxGridComponent",
19+
"IgxTreeGridComponent",
20+
"IgxHierarchicalGridComponent",
21+
"IgxPivotGridComponent"
22+
]
23+
}
24+
]
25+
}

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -396,8 +396,8 @@ export interface GridType extends IGridDataBindable {
396396
sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
397397
sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
398398
sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>;
399-
headerCollapseIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
400-
headerExpandIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
399+
headerCollapsedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
400+
headerExpandedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
401401
dragIndicatorIconTemplate: any;
402402
dragIndicatorIconBase: any;
403403
disableTransitions: boolean;

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

Lines changed: 112 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ import { CharSeparatedValueData } from '../services/csv/char-separated-value-dat
7878
import { IgxColumnResizingService } from './resizing/resizing.service';
7979
import { FilteringStrategy, IFilteringStrategy } from '../data-operations/filtering-strategy';
8080
import {
81-
IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective,
82-
IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective,
81+
IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective,
82+
IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective,
8383
IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective
8484
} from './grid/grid.directives';
8585
import {
@@ -1452,25 +1452,125 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
14521452
* The custom template, if any, that should be used when rendering a row expand indicator.
14531453
*/
14541454
@ContentChild(IgxRowExpandedIndicatorDirective, { read: TemplateRef })
1455-
public rowExpandedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext> = null;
1455+
protected rowExpandedIndicatorDirectiveTemplate: TemplateRef<IgxGridRowTemplateContext> = null;
1456+
1457+
/**
1458+
* Gets the row expand indicator template.
1459+
*/
1460+
@Input()
1461+
public get rowExpandedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext> {
1462+
return this._rowExpandedIndicatorTemplate || this.rowExpandedIndicatorDirectiveTemplate;
1463+
}
1464+
1465+
/**
1466+
* Sets the row expand indicator template.
1467+
*```html
1468+
*<ng-template igxRowExpandedIndicator>
1469+
* <igx-icon role="button">remove</igx-icon>
1470+
*</ng-template>
1471+
* ```
1472+
*```typescript
1473+
* @ViewChild('template', {read: TemplateRef })
1474+
* public template: TemplateRef<any>;
1475+
* this.grid.rowExpandedIndicatorTemplate = this.template;
1476+
* ```
1477+
*/
1478+
public set rowExpandedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>) {
1479+
this._rowExpandedIndicatorTemplate = template;
1480+
}
14561481

14571482
/**
14581483
* The custom template, if any, that should be used when rendering a row collapse indicator.
14591484
*/
14601485
@ContentChild(IgxRowCollapsedIndicatorDirective, { read: TemplateRef })
1461-
public rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext> = null;
1486+
protected rowCollapsedIndicatorDirectiveTemplate: TemplateRef<IgxGridRowTemplateContext> = null;
1487+
1488+
/**
1489+
* Gets the row collapse indicator template.
1490+
*/
1491+
@Input()
1492+
public get rowCollapsedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext> {
1493+
return this._rowCollapsedIndicatorTemplate || this.rowCollapsedIndicatorDirectiveTemplate;
1494+
}
1495+
1496+
/**
1497+
* Sets the row collapse indicator template.
1498+
*```html
1499+
*<ng-template igxRowCollapsedIndicator>
1500+
* <igx-icon role="button">add</igx-icon>
1501+
*</ng-template>
1502+
* ```
1503+
*```typescript
1504+
* @ViewChild('template', {read: TemplateRef })
1505+
* public template: TemplateRef<any>;
1506+
* this.grid.rowCollapsedIndicatorTemplate = this.template;
1507+
* ```
1508+
*/
1509+
public set rowCollapsedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>) {
1510+
this._rowCollapsedIndicatorTemplate = template;
1511+
}
14621512

14631513
/**
14641514
* The custom template, if any, that should be used when rendering a header expand indicator.
14651515
*/
1466-
@ContentChild(IgxHeaderExpandIndicatorDirective, { read: TemplateRef })
1467-
public headerExpandIndicatorTemplate: TemplateRef<IgxGridTemplateContext> = null;
1516+
@ContentChild(IgxHeaderExpandedIndicatorDirective, { read: TemplateRef })
1517+
protected headerExpandedIndicatorDirectiveTemplate: TemplateRef<IgxGridTemplateContext> = null;
1518+
1519+
/**
1520+
* Gets the header expand indicator template.
1521+
*/
1522+
@Input()
1523+
public get headerExpandedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext> {
1524+
return this._headerExpandIndicatorTemplate || this.headerExpandedIndicatorDirectiveTemplate;
1525+
}
1526+
1527+
/**
1528+
* Sets the header expand indicator template.
1529+
*```html
1530+
*<ng-template igxHeaderExpandedIndicator>
1531+
* <igx-icon role="button">remove</igx-icon>
1532+
*</ng-template>
1533+
* ```
1534+
*```typescript
1535+
* @ViewChild('template', {read: TemplateRef })
1536+
* public template: TemplateRef<any>;
1537+
* this.grid.headerExpandedIndicatorTemplate = this.template;
1538+
* ```
1539+
*/
1540+
public set headerExpandedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>) {
1541+
this._headerExpandIndicatorTemplate = template;
1542+
}
14681543

14691544
/**
14701545
* The custom template, if any, that should be used when rendering a header collapse indicator.
14711546
*/
1472-
@ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef })
1473-
public headerCollapseIndicatorTemplate: TemplateRef<IgxGridTemplateContext> = null;
1547+
@ContentChild(IgxHeaderCollapsedIndicatorDirective, { read: TemplateRef })
1548+
protected headerCollapsedIndicatorDirectiveTemplate: TemplateRef<IgxGridTemplateContext> = null;
1549+
1550+
/**
1551+
* Gets the row collapse indicator template.
1552+
*/
1553+
@Input()
1554+
public get headerCollapsedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext> {
1555+
return this._headerCollapseIndicatorTemplate || this.headerCollapsedIndicatorDirectiveTemplate;
1556+
}
1557+
1558+
/**
1559+
* Sets the row collapse indicator template.
1560+
*```html
1561+
*<ng-template igxHeaderCollapsedIndicator>
1562+
* <igx-icon role="button">add</igx-icon>
1563+
*</ng-template>
1564+
* ```
1565+
*```typescript
1566+
* @ViewChild('template', {read: TemplateRef })
1567+
* public template: TemplateRef<any>;
1568+
* this.grid.headerCollapsedIndicatorTemplate = this.template;
1569+
* ```
1570+
*/
1571+
public set headerCollapsedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>) {
1572+
this._headerCollapseIndicatorTemplate = template;
1573+
}
14741574

14751575
/** @hidden @internal */
14761576
@ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef })
@@ -3086,6 +3186,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
30863186
private _rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>;
30873187
private _rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>;
30883188
private _dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>;
3189+
private _rowExpandedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>;
3190+
private _rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>;
3191+
private _headerExpandIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
3192+
private _headerCollapseIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
30893193

30903194
private _cdrRequests = false;
30913195
private _resourceStrings;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -962,9 +962,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
962962
*/
963963
public get iconTemplate() {
964964
if (this.groupsExpanded) {
965-
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
965+
return this.headerExpandedIndicatorTemplate || this.defaultExpandedTemplate;
966966
} else {
967-
return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
967+
return this.headerCollapsedIndicatorTemplate || this.defaultCollapsedTemplate;
968968
}
969969
}
970970

‎projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export class IgxRowCollapsedIndicatorDirective {
7878
selector: '[igxHeaderExpandedIndicator]',
7979
standalone: true
8080
})
81-
export class IgxHeaderExpandIndicatorDirective {
82-
public static ngTemplateContextGuard(_directive: IgxHeaderExpandIndicatorDirective,
81+
export class IgxHeaderExpandedIndicatorDirective {
82+
public static ngTemplateContextGuard(_directive: IgxHeaderExpandedIndicatorDirective,
8383
context: unknown): context is IgxGridTemplateContext {
8484
return true
8585
}
@@ -92,8 +92,8 @@ export class IgxHeaderExpandIndicatorDirective {
9292
selector: '[igxHeaderCollapsedIndicator]',
9393
standalone: true
9494
})
95-
export class IgxHeaderCollapseIndicatorDirective {
96-
public static ngTemplateContextGuard(_directive: IgxHeaderCollapseIndicatorDirective,
95+
export class IgxHeaderCollapsedIndicatorDirective {
96+
public static ngTemplateContextGuard(_directive: IgxHeaderCollapsedIndicatorDirective,
9797
context: unknown): context is IgxGridTemplateContext {
9898
return true
9999
}

‎projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
66
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
77
import { IgxColumnComponent } from '../columns/column.component';
88
import { IgxGridComponent } from './grid.component';
9-
import { IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective } from './grid.directives';
9+
import { IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective } from './grid.directives';
1010
import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive';
1111
import { IgxGridRowComponent } from './grid-row.component';
1212
import { IgxChipComponent } from '../../chips/chip.component';
@@ -3857,7 +3857,7 @@ export class GroupableGridComponent extends DataParent {
38573857
</ng-template>
38583858
`,
38593859
standalone: true,
3860-
imports: [IgxGridComponent, IgxColumnComponent, IgxGroupByRowTemplateDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective]
3860+
imports: [IgxGridComponent, IgxColumnComponent, IgxGroupByRowTemplateDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective]
38613861
})
38623862
export class CustomTemplateGridComponent extends DataParent {
38633863
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })

‎projects/igniteui-angular/src/lib/grids/grid/public_api.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IGX_GRID_COMMON_DIRECTIVES } from '../public_api';
22
import { IgxGridComponent } from './grid.component';
3-
import { IgxExcelStyleHeaderIconDirective, IgxGridDetailTemplateDirective, IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from './grid.directives';
3+
import { IgxExcelStyleHeaderIconDirective, IgxGridDetailTemplateDirective, IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from './grid.directives';
44

55
export * from './grid.component';
66
export * from './grid.directives';
@@ -12,8 +12,8 @@ export const IGX_GRID_DIRECTIVES = [
1212
IgxGridDetailTemplateDirective,
1313
IgxRowExpandedIndicatorDirective,
1414
IgxRowCollapsedIndicatorDirective,
15-
IgxHeaderExpandIndicatorDirective,
16-
IgxHeaderCollapseIndicatorDirective,
15+
IgxHeaderExpandedIndicatorDirective,
16+
IgxHeaderCollapsedIndicatorDirective,
1717
IgxExcelStyleHeaderIconDirective,
1818
IgxSortHeaderIconDirective,
1919
IgxSortAscendingHeaderIconDirective,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -662,8 +662,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
662662
this.dragIndicatorIconTemplate;
663663
this.rowExpandedIndicatorTemplate = this.rootGrid.rowExpandedIndicatorTemplate;
664664
this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate;
665-
this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate;
666-
this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate;
665+
this.headerCollapsedIndicatorTemplate = this.rootGrid.headerCollapsedIndicatorTemplate;
666+
this.headerExpandedIndicatorTemplate = this.rootGrid.headerExpandedIndicatorTemplate;
667667
this.excelStyleHeaderIconTemplate = this.rootGrid.excelStyleHeaderIconTemplate;
668668
this.sortAscendingHeaderIconTemplate = this.rootGrid.sortAscendingHeaderIconTemplate;
669669
this.sortDescendingHeaderIconTemplate = this.rootGrid.sortDescendingHeaderIconTemplate;
@@ -938,9 +938,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
938938
public get iconTemplate() {
939939
const expanded = this.hasExpandedRecords() && this.hasExpandableChildren;
940940
if (!expanded && this.showExpandAll) {
941-
return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
941+
return this.headerCollapsedIndicatorTemplate || this.defaultCollapsedTemplate;
942942
} else {
943-
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
943+
return this.headerExpandedIndicatorTemplate || this.defaultExpandedTemplate;
944944
}
945945
}
946946

0 commit comments

Comments
 (0)