# Ignite UI for Angular v21.0.x — Full API Reference

> Complete API reference for the Ignite UI for Angular package (21.0.x). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions.

Platform: Angular
Package: igniteui-angular
Version: 21.0.x

## Classes

### [AbsoluteScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/AbsoluteScrollStrategy)
On scroll reposition the overlay content.

- **constructor**(scrollContainer?: HTMLElement): AbsoluteScrollStrategy
- **attach**(): void — Attaches the strategy
settings.scrollStrategy.attach();
- **detach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void — Initializes the strategy. Should be called once

### [AutoPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/AutoPositionStrategy)
Positions the element as in **Connected** positioning strategy and re-positions the element in
the view port (calculating a different start point) in case the element is partially getting out of view

- **constructor**(settings?: PositionSettings): AutoPositionStrategy

### [BaseFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/BaseFilteringStrategy)

- **constructor**(): BaseFilteringStrategy
- **filter**(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): any[]
- **findMatchByExpression**(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>
- **matchRecord**(rec: any, expressions: IFilteringExpression | IFilteringExpressionsTree, grid?: GridType, entity?: string): boolean

### [BlockScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/BlockScrollStrategy)
Prevents scrolling while the overlay content is shown.

- **constructor**(): BlockScrollStrategy
- **attach**(): void — Attaches the strategy
settings.scrollStrategy.attach();
- **detach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **initialize**(document: Document): void — Initializes the strategy. Should be called once

### [CachedDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/CachedDataCloneStrategy)
Data clone strategy that is uses cache to deep clone primitive values, dates and objects.
It allows using circular references inside object.

- **constructor**(): CachedDataCloneStrategy
- **clone**(data: any): any — Clones provided data

### [Calendar](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/Calendar)

- **constructor**(): Calendar
- **timedelta**(date: Date, interval: string, units: number): Date

### [CarouselHammerConfig](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/CarouselHammerConfig)

- **constructor**(): CarouselHammerConfig
- **overrides**: `any` — Maps gesture event names to a set of configuration options
that specify overrides to the default values for specific properties.

The key is a supported event name to be configured,
and the options object contains a set of properties, with override values
to be applied to the named recognizer event.
For example, to disable recognition of the rotate event, specify
 {"rotate": {"enable": false}}.

Properties that are not present take the HammerJS default values.
For information about which properties are supported for which events,
and their allowed and default values, see
[HammerJS documentation](https://hammerjs.github.io/).

### [CloseScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/CloseScrollStrategy)
Uses a tolerance and closes the shown component upon scrolling if the tolerance is exceeded

- **constructor**(scrollContainer?: HTMLElement): CloseScrollStrategy
- **attach**(): void — Attaches the strategy
settings.scrollStrategy.attach();
- **detach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void — Initializes the strategy. Should be called once

### [ConnectedPositioningStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ConnectedPositioningStrategy)
Positions the element based on the directions and start point passed in trough PositionSettings.
It is possible to either pass a start point or an HTMLElement as a positioning base.

- **constructor**(settings?: PositionSettings): ConnectedPositioningStrategy
- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay
- **clone**(): IPositionStrategy — Creates clone of this position strategy
- **position**(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean, target?: HTMLElement | Point): void — Position the element based on the PositionStrategy implementing this interface.

### [ContainerPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ContainerPositionStrategy)
Positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection

- **constructor**(settings?: PositionSettings): ContainerPositionStrategy
- **position**(contentElement: HTMLElement): void — Position the element based on the PositionStrategy implementing this interface.

### [DefaultDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/DefaultDataCloneStrategy)
Simplified data clone strategy that deep clones primitive values, dates and objects.
Does not support circular references in objects.

- **constructor**(): DefaultDataCloneStrategy
- **clone**(data: any): any — Clones provided data

### [DefaultPivotGridRecordSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/DefaultPivotGridRecordSortingStrategy)

- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean, _grid?: PivotGridType): any[]
- static **instance**(): DefaultPivotGridRecordSortingStrategy

### [DefaultPivotSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/DefaultPivotSortingStrategy)

- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean, grid?: PivotGridType): any[]
- static **instance**(): DefaultPivotSortingStrategy

### [DefaultSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/DefaultSortingStrategy)

- **compareValues**(a: any, b: any): number
- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean): any[]
- static **instance**(): DefaultSortingStrategy

### [DimensionValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/DimensionValuesFilteringStrategy)

- **constructor**(fields?: string[]): DimensionValuesFilteringStrategy
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>

### [ElasticPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ElasticPositionStrategy)
Positions the element as in **Connected** positioning strategy and resize the element
to fit in the view port in case the element is partially getting out of view

- **constructor**(settings?: PositionSettings): ElasticPositionStrategy

### [ExpressionsTreeUtil](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ExpressionsTreeUtil)

- **constructor**(): ExpressionsTreeUtil
- static **find**(tree: IFilteringExpressionsTree, fieldName: string): IFilteringExpression | IFilteringExpressionsTree — Returns the filtering expression for a column with the provided tree and fieldName.
let filteringExpression = ExpressionsTreeUtil.find(gridExpressionTree, 'Column Field');
- static **findIndex**(tree: IFilteringExpressionsTree, fieldName: string): number — Returns the index of the filtering expression for a column with the provided tree and fieldName.
let filteringExpressionIndex = ExpressionsTreeUtil.findIndex(gridExpressionTree, 'Column Field');

### [FilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/FilteringExpressionsTree)

- **constructor**(operator: FilteringLogic, fieldName?: string, entity?: string, returnFields?: string[]): FilteringExpressionsTree
- **entity**: `string` — Sets/gets the entity.
gridExpressionsTree.entity = 'Entity A';

let entity = gridExpressionsTree.entity;
- **fieldName**: `string` — Sets/gets the field name of the column where the filtering expression is placed.
gridExpressionTree.fieldName = 'Column Field';

let columnField = expressionTree.fieldName;
- **filteringOperands**: `IFilteringExpression | IFilteringExpressionsTree[]` — Sets/gets the filtering operands.
const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const expression = [
{
  condition: IgxStringFilteringOperand.instance().condition('contains'),
  fieldName: 'Column Field',
  searchVal: 'Value',
  ignoreCase: false
}];
gridExpressionsTree.filteringOperands.push(expression);
this.grid.filteringExpressionsTree = gridExpressionsTree;

let filteringOperands = gridExpressionsTree.filteringOperands;
- **operator**: `FilteringLogic` — Sets/gets the operator.
gridExpressionsTree.operator = FilteringLogic.And;

let operator = gridExpressionsTree.operator;
- **returnFields**: `string[]` — Sets/gets the return fields.
gridExpressionsTree.returnFields = ['Column Field 1', 'Column Field 2'];

let returnFields = gridExpressionsTree.returnFields;
- **type**: `FilteringExpressionsTreeType` — Sets/gets the type of the filtering expressions tree.
gridExpressionTree.type = FilteringExpressionsTree.Advanced;

let type = expressionTree.type;
- **find**(fieldName: string): IFilteringExpression | IFilteringExpressionsTree — Returns the filtering expression for a column with the provided fieldName.
let filteringExpression = gridExpressionTree.find('Column Field');
- **findIndex**(fieldName: string): number — Returns the index of the filtering expression for a column with the provided fieldName.
let filteringExpressionIndex = gridExpressionTree.findIndex('Column Field');
- static **empty**(expressionTree: IFilteringExpressionsTree): boolean — Checks if filtering expressions tree is empty.

### [FilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/FilteringStrategy)

- **constructor**(): FilteringStrategy
- **filter**(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree, grid: GridType): T[]
- static **instance**(): FilteringStrategy

### [FilterUtil](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/FilterUtil)

- **constructor**(): FilterUtil
- static **filter**(data: T[], state: IFilteringState, grid?: GridType): T[]

### [FormattedValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/FormattedValuesFilteringStrategy)

- **constructor**(fields?: string[]): FormattedValuesFilteringStrategy

### [FormattedValuesSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/FormattedValuesSortingStrategy)

- **constructor**(): FormattedValuesSortingStrategy
- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean, grid?: GridType): any[]
- static **instance**(): FormattedValuesSortingStrategy

### [GlobalPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/GlobalPositionStrategy)
Positions the element based on the directions passed in trough PositionSettings.
These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection

- **constructor**(settings?: PositionSettings): GlobalPositionStrategy
- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay
- **clone**(): IPositionStrategy — Clone the strategy instance.
settings.positionStrategy.clone();
- **position**(contentElement: HTMLElement): void — Position the element based on the PositionStrategy implementing this interface.

### [GroupMemberCountSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/GroupMemberCountSortingStrategy)

- **groupBy**(data: any, key: any): any
- **sort**(data: any[], fieldName: string, dir: SortingDirection): any[]
- static **instance**(): GroupMemberCountSortingStrategy

### [IgcFormControlDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgcFormControlDirective)

- **constructor**(elementRef: ElementRef<any>, renderer: Renderer2): IgcFormControlDirective

### [IgSizeDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgSizeDirective)

- **constructor**(): IgSizeDirective
- **igSize**: `string`

### [IgxAccordionComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxAccordionComponent)
IgxAccordion is a container-based component that contains that can house multiple expansion panels.

- **constructor**(cdr: ChangeDetectorRef): IgxAccordionComponent
- **id**: `string` — Get/Set the id of the accordion component.
Default value is "igx-accordion-0";
<igx-accordion id="my-first-accordion"></igx-accordion>

const accordionId = this.accordion.id;
- **panelCollapsed**: `EventEmitter<IAccordionEventArgs>` — Emitted after a panel has been collapsed.

<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
- **panelCollapsing**: `EventEmitter<IAccordionCancelableEventArgs>` — Emitted before a panel is collapsed.
- **panelExpanded**: `EventEmitter<IAccordionEventArgs>` — Emitted after a panel has been expanded.

<igx-accordion (panelExpanded)="handlePanelExpanded($event)">
</igx-accordion>


public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
 const expandedPanel: IgxExpansionPanelComponent = event.panel;
 console.log("Panel is expanded: ", expandedPanel.id);
}
- **panelExpanding**: `EventEmitter<IAccordionCancelableEventArgs>` — Emitted before a panel is expanded.
- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that panels should use when expanding/collpasing.

<igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion>


const customAnimationSettings: ToggleAnimationSettings = {
     openAnimation: growVerIn,
     closeAnimation: growVerOut
};

this.accordion.animationSettings = customAnimationSettings;
- **panels**: `IgxExpansionPanelComponent[]` — Get all panels.

const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
- **singleBranchExpand**: `boolean` — Get/Set how the accordion handles the expansion of the projected expansion panels.
If set to true, only a single panel can be expanded at a time, collapsing all others

<igx-accordion [singleBranchExpand]="true">
...
</igx-accordion>


this.accordion.singleBranchExpand = false;
- **collapseAll**(): void — Collapses all expanded expansion panels.

accordion.collapseAll();
- **expandAll**(): void — Expands all collapsed expansion panels.

accordion.expandAll();

### [IgxActionStripComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxActionStripComponent)
Action Strip provides templatable area for one or more actions.

- **constructor**(_viewContainer: ViewContainerRef, renderer: Renderer2, el: ElementRef<any>): IgxActionStripComponent
- **context**: `any` — Sets the context of an action strip.
The context should be an instance of a @Component, that has element property.
This element will be the placeholder of the action strip.
- **hidden**: `boolean` — Gets/Sets the visibility of the Action Strip.
Could be used to set if the Action Strip will be initially hidden.
- **resourceStrings**: `IActionStripResourceStrings`
- **hide**(): void — Hiding the Action Strip and removing it from its current context element.
- **show**(context?: any): void — Showing the Action Strip and appending it the specified context element.

### [IgxActionStripMenuItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxActionStripMenuItemDirective)

- **constructor**(templateRef: TemplateRef<any>): IgxActionStripMenuItemDirective
- **templateRef**: `TemplateRef<any>`

### [IgxAdvancedFilteringDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxAdvancedFilteringDialogComponent)
A component used for presenting advanced filtering UI for a Grid.
It is used internally in the Grid, but could also be hosted in a container outside of it.

Example:
<igx-advanced-filtering-dialog
    [grid]="grid1">
</igx-advanced-filtering-dialog>

- **constructor**(cdr: ChangeDetectorRef, platform: PlatformUtil): IgxAdvancedFilteringDialogComponent
- **cdr**: `ChangeDetectorRef`
- **grid**: `GridType` — Returns the grid.

### [IgxAppendDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxAppendDropStrategy)

- **constructor**(_renderer: Renderer2): IgxAppendDropStrategy
- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void

### [IgxAutocompleteDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxAutocompleteDirective)
**Ignite UI for Angular Autocomplete** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html)

The igxAutocomplete directive provides a way to enhance a text input
by showing a drop down of suggested options, provided by the developer.

Example:
<input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/>
<igx-drop-down #townsPanel>
    <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
        {{town}}
    </igx-drop-down-item>
</igx-drop-down>

- **constructor**(ngModel: NgModel, formControl: FormControlName, group: IgxInputGroupComponent, elementRef: ElementRef<any>, cdr: ChangeDetectorRef): IgxAutocompleteDirective
- **autocompleteSettings**: `AutocompleteOverlaySettings` — Provide overlay settings for the autocomplete drop down

// get
let settings = this.autocomplete.autocompleteSettings;

<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/>

// set
this.settings = {
 positionStrategy: new ConnectedPositioningStrategy({
     closeAnimation: null,
     openAnimation: null
 })
};
- **disabled**: `boolean` — Enables/disables autocomplete component

// get
let disabled = this.autocomplete.disabled;

<!--set-->
<input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteDisabled]="disabled"/>

// set
public disabled = true;
- **selectionChanging**: `EventEmitter<AutocompleteSelectionChangingEventArgs>` — Emitted after item from the drop down is selected

<input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' />
- **target**: `IgxDropDownComponent` — Sets the target of the autocomplete directive

<!-- Set -->
<input [igxAutocomplete]="dropdown" />
...
<igx-drop-down #dropdown>
...
</igx-drop-down>
- **close**(): void — Closes autocomplete drop down
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **open**(): void — Opens autocomplete drop down

### [IgxAvatarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxAvatarComponent)
Avatar provides a way to display an image, icon or initials to the user.

- **constructor**(elementRef: ElementRef<any>): IgxAvatarComponent
- **ariaLabel**: `string` — Returns the aria-label attribute of the avatar.
- **bgColor**: `string` — Sets the background color of the avatar.
- **color**: `string` — Sets the color of the avatar's initials or icon.
- **elementRef**: `ElementRef<any>`
- **icon**: `string` — Sets an icon to the avatar. All icons from the material icon set are supported.
- **id**: `string` — Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0".
- **initials**: `string` — Sets initials to the avatar.
- **role**: `string` — Returns the role attribute of the avatar.
- **roleDescription**: `string` — Returns the type of the avatar.
The avatar can be:
- "initials type avatar"
- "icon type avatar"
- "image type avatar".
- "custom type avatar".
- **shape**: `"circle" | "rounded" | "square"` — Sets square, rounded or circular shape to the avatar.
By default the shape of the avatar is square.
- **size**: `string` — Returns the size of the avatar.
- **src**: `string`
- **type**: `IgxAvatarType` — Returns the type of the avatar.

### [IgxBadgeComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBadgeComponent)
Badge provides visual notifications used to decorate avatars, menus, etc.

- **constructor**(): IgxBadgeComponent
- **cssClass**: `string` — Sets/gets the css class to use on the badge.
- **icon**: `string` — Sets/gets an icon for the badge from the material icons set.
- **iconSet**: `string` — The name of the icon set. Used in case the icon is from a different icon set.
- **id**: `string` — Sets/gets the id of the badge.
- **label**: `string` — Sets/gets the aria-label attribute value.
- **outlined**: `boolean` — Sets/gets whether the badge is outlined.
Default value is false.
- **role**: `string` — Sets/gets the role attribute value.
- **shape**: `"rounded" | "square"` — Sets a square shape to the badge, if shape is set to square.
By default the shape of the badge is rounded.
- **type**: `string` — Sets/gets the type of the badge.
- **value**: `string | number` — Sets/gets the value to be displayed inside the badge.
- **errorClass**: `boolean`
- **infoClass**: `boolean`
- **successClass**: `boolean`
- **warningClass**: `boolean`

### [IgxBannerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBannerActionsDirective)

- **constructor**(): IgxBannerActionsDirective

### [IgxBannerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBannerComponent)
**Ignite UI for Angular Banner** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)

The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.

Usage:

<igx-banner #banner>
  Our privacy settings have changed.
 <igx-banner-actions>
     <button type="button" igxButton="contained">Read More</button>
     <button type="button" igxButton="contained">Accept and Continue</button>
 </igx-banner-actions>
</igx-banner>

- **constructor**(elementRef: ElementRef<HTMLElement>): IgxBannerComponent
- **closed**: `EventEmitter<BannerEventArgs>` — Fires after the banner hides
public handleClosed(event) {
 ...
}

<igx-banner (closed)="handleClosed($event)"></igx-banner>
- **closing**: `EventEmitter<BannerCancelEventArgs>` — Fires before the banner hides
public handleClosing(event) {
 ...
}

<igx-banner (closing)="handleClosing($event)"></igx-banner>
- **cssClass**: `string`
- **elementRef**: `ElementRef<HTMLElement>`
- **opened**: `EventEmitter<BannerEventArgs>` — Fires after the banner shows up
public handleOpened(event) {
 ...
}

<igx-banner (opened)="handleOpened($event)"></igx-banner>
- **opening**: `EventEmitter<BannerCancelEventArgs>` — Fires before the banner shows up
public handleOpening(event) {
 ...
}

<igx-banner (opening)="handleOpening($event)"></igx-banner>
- **animationSettings**: `ToggleAnimationSettings` — Get the animation settings used by the banner open/close methods
let currentAnimations: ToggleAnimationSettings = banner.animationSettings
- **collapsed**: `boolean` — Gets whether the banner is collapsed.

const isCollapsed: boolean = banner.collapsed;
- **element**: `HTMLElement` — Returns the native element of the banner component
 const myBannerElement: HTMLElement = banner.element;
- **expanded**: `boolean` — Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
Defaults to false.
Setting to true opens the banner, while false closes it.
- **resourceStrings**: `IBannerResourceStrings`
- **close**(event?: Event): void — Closes the banner

 myBanner.close();


<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.close()">Close Banner</button>
- **open**(event?: Event): void — Opens the banner

 myBanner.open();


<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.open()">Open Banner</button>
- **toggle**(event?: Event): void — Toggles the banner

 myBanner.toggle();


<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.toggle()">Toggle Banner</button>

### [IgxBaseExporter](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBaseExporter)

- **constructor**(): IgxBaseExporter
- **columnExporting**: `EventEmitter<IColumnExportingEventArgs>` — This event is emitted when a column is exported.
this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
// put event handler code here
});
- **exportEnded**: `EventEmitter<IBaseEventArgs>`
- **rowExporting**: `EventEmitter<IRowExportingEventArgs>` — This event is emitted when a row is exported.
this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => {
// put event handler code here
});
- **export**(grid: any, options: IgxExporterOptionsBase): void — Method for exporting IgxGrid component's data.
this.exporterService.export(this.igxGridForExport, this.exportOptions);
- **exportData**(data: any[], options: IgxExporterOptionsBase): void — Method for exporting any kind of array data.
this.exporterService.exportData(this.arrayForExport, this.exportOptions);

### [IgxBaseTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBaseTransactionService)

- **constructor**(): IgxBaseTransactionService<T, S>
- **onStateUpdate**: `EventEmitter<StateUpdateEvent>` — Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo
- **canRedo**: `boolean`
- **canUndo**: `boolean`
- **cloneStrategy**: `IDataCloneStrategy` — Gets/Sets the data clone strategy used to clone data
- **enabled**: `boolean` — Returns whether transaction is enabled for this service
- **add**(transaction: T, recordRef?: any): void — Adds provided  transaction with recordRef if any
- **clear**(_id?: any): void — Clears all transactions
- **commit**(_data: any[], _id?: any): void — Applies all transactions over the provided data
- **endPending**(_commit: boolean): void — Clears all pending transactions and aggregated pending state. If commit is set to true
commits pending states as single transaction
- **getAggregatedChanges**(mergeChanges: boolean): T[] — Returns aggregated changes from all transactions
- **getAggregatedValue**(id: any, mergeChanges: boolean): any — Returns value of the required id including all uncommitted changes
- **getState**(id: any): S — Returns the state of the record with provided id
- **getTransactionLog**(_id?: any): T[] — Returns all recorded transactions in chronological order
- **redo**(): void — Applies the last undone transaction if any
- **startPending**(): void — Starts pending transactions. All transactions passed after call to startPending
will not be added to transaction log
- **undo**(): void — Remove the last transaction if any

### [IgxBooleanFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBooleanFilteringOperand)
Provides filtering operations for booleans


### [IgxBottomNavComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavComponent)
Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.


### [IgxBottomNavContentComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavContentComponent)


### [IgxBottomNavHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavHeaderComponent)


### [IgxBottomNavHeaderIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavHeaderIconDirective)

- **constructor**(): IgxBottomNavHeaderIconDirective

### [IgxBottomNavHeaderLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavHeaderLabelDirective)

- **constructor**(): IgxBottomNavHeaderLabelDirective

### [IgxBottomNavItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxBottomNavItemComponent)


### [IgxButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxButtonDirective)
The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button.

- **constructor**(element: ElementRef<any>, _renderer: Renderer2): IgxButtonDirective
- **buttonSelected**: `EventEmitter<IButtonEventArgs>` — Called when the button is selected.
- **label**: `string`
- **selected**: `boolean`
- **type**: `IgxButtonType`

### [IgxButtonGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxButtonGroupComponent)
**Ignite UI for Angular Button Group** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)

The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports
single, multi and singleRequired selection.

Example:
<igx-buttongroup selectionMode="multi" [values]="fontOptions">
</igx-buttongroup>

The fontOptions value shown above is defined as:
this.fontOptions = [
  { icon: 'format_bold', selected: false },
  { icon: 'format_italic', selected: false },
  { icon: 'format_underlined', selected: false }];

- **constructor**(_cdr: ChangeDetectorRef, _renderer: Renderer2, _el: ElementRef<any>): IgxButtonGroupComponent
- **deselected**: `EventEmitter<IButtonGroupEventArgs>` — An
- **id**: `string` — Gets/Sets the value of the id attribute. If not set it will be automatically generated.
 <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
- **selected**: `EventEmitter<IButtonGroupEventArgs>` — An
- **values**: `any` — Property that configures the buttons in the button group using a collection of Button objects.
 public ngOnInit() {
     this.cities = [
       new Button({
         label: "Sofia"
     }),
       new Button({
         label: "London"
     }),
       new Button({
         label: "New York",
         selected: true
     }),
       new Button({
         label: "Tokyo"
     })
 ];
 }
 //..

 <igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>
- **alignment**: `ButtonGroupAlignment` — Returns the alignment of the igx-buttongroup.
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let buttonAlignment = this.buttonG.alignment;
}
- **buttons**: `IgxButtonDirective[]` — A collection containing all buttons inside the button group.
- **disabled**: `boolean` — Disables the igx-buttongroup component. By default it's false.
<igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
- **isVertical**: `boolean` — Returns true if the igx-buttongroup alignment is vertical.
Note that in order for the accessor to work correctly the property should be set explicitly.
<igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions">

//...
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let orientation = this.buttonG.isVertical;
}
- **itemContentCssClass**: `string` — Returns the CSS class of the item content of the IgxButtonGroup.
 @ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let buttonSelect = this.buttonG.itemContentCssClass;
}
- **multiSelection**: `boolean` — Enables selecting multiple buttons. By default, multi-selection is false.
- **selectedButtons**: `IgxButtonDirective[]` — Gets the selected button/buttons.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let selectedButton = this.buttonG.selectedButtons;
}
- **selectionMode**: `"single" | "multi" | "singleRequired"` — Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
<igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
- **deselectButton**(index: number): void — Deselects a button by its index.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   this.buttonG.deselectButton(2);
   this.cdr.detectChanges();
}
- **selectButton**(index: number): void — Selects a button by its index.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   this.buttonG.selectButton(2);
   this.cdr.detectChanges();
}
- **updateDeselected**(index: number): void

### [IgxCalendarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCalendarComponent)
Calendar provides a way to display date information.

- **hasHeader**: `boolean` — Sets/gets whether the calendar has header.
Default value is true.
- **headerOrientation**: `"horizontal" | "vertical"`
- **id**: `string` — Sets/gets the id of the calendar.
- **orientation**: `"horizontal" | "vertical"`
- **showWeekNumbers**: `boolean` — Show/hide week numbers
- **vertical**: `boolean` — Sets/gets whether the calendar header will be in vertical position.
Default value is false.
- **context**: `any` — Gets the context for the template marked with either igxCalendarSubHeaderMonth
or igxCalendarSubHeaderYear directive.
- **headerContext**: `any` — Gets the context for the template marked with the igxCalendarHeader directive.
- **headerTemplate**: `any` — Gets the header template.
- **headerTitleTemplate**: `any` — Gets the header template.
- **monthsViewNumber**: `number` — Sets/gets the number of month views displayed.
Default value is 1.
- **subheaderTemplate**: `any` — Gets the subheader template.
- **deselectDate**(value?: string | Date | Date[]): void — Deselects date(s) (based on the selection type).
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **updateActiveDescendant**(date: Date): void

### [IgxCalendarMonthDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCalendarMonthDirective)

- **constructor**(elementRef: ElementRef<any>): IgxCalendarMonthDirective
- **isActive**: `boolean`
- **isCurrent**: `boolean`
- **isSelected**: `boolean`

### [IgxCalendarViewBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCalendarViewBaseDirective)

- **constructor**(elementRef: ElementRef<any>): IgxCalendarViewBaseDirective
- **date**: `Date`
- **elementRef**: `ElementRef<any>`
- **itemSelection**: `EventEmitter<Date>`
- **showActive**: `boolean`
- **value**: `Date`
- **isActive**: `boolean`
- **isCurrent**: `boolean`
- **isSelected**: `boolean`
- **nativeElement**: `any`
- **onMouseDown**(event: MouseEvent): void

### [IgxCardActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardActionsComponent)
IgxCardActions is container for the card actions.

- **constructor**(card: IgxCardComponent): IgxCardActionsComponent
- **card**: `IgxCardComponent`
- **layout**: `string` — Sets the layout style of the actions.
You can justify the elements slotted in the igx-card-action container
so that they are positioned equally from one another taking up all the
space available along the card actions axis.
- **vertical**: `boolean` — Sets the vertical attribute of the actions.
When set to true the actions will be layed out vertically.
- **isJustifyLayout**: `boolean` — A getter that returns true when the layout has been
set to justify.

### [IgxCardComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardComponent)
Card provides a way to display organized content in appealing way.

- **constructor**(): IgxCardComponent
- **elevated**: `boolean` — Sets/gets whether the card is elevated.
Default value is false.
- **horizontal**: `boolean` — Sets the value of the horizontal attribute of the card.
Setting this to true will make the different card sections align horizontally,
essentially flipping the card to the side.
- **id**: `string` — Sets/gets the id of the card.
If not set, id will have value "igx-card-0";
- **role**: `string` — Sets the value of the role attribute of the card.
By default the value is set to group.

### [IgxCardContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardContentDirective)
IgxCardContent is container for the card content.

- **constructor**(): IgxCardContentDirective

### [IgxCardFooterDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardFooterDirective)
IgxCardFooter is container for the card footer

- **constructor**(): IgxCardFooterDirective
- **role**: `string` — Sets the value of the role attribute of the card footer.
By default the value is set to footer.

### [IgxCardHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardHeaderComponent)
IgxCardHeader is container for the card header

- **constructor**(): IgxCardHeaderComponent
- **vertical**: `boolean` — Sets the layout style of the header.
By default the header elements(thumbnail and title/subtitle) are aligned horizontally.

### [IgxCardHeaderSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardHeaderSubtitleDirective)
igxCardHeaderSubtitle is used to denote the header subtitle in a card.
Use it to tag text nodes.

- **constructor**(): IgxCardHeaderSubtitleDirective

### [IgxCardHeaderTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardHeaderTitleDirective)
igxCardHeaderTitle is used to denote the header title in a card.
Use it to tag text nodes.

- **constructor**(): IgxCardHeaderTitleDirective

### [IgxCardMediaDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardMediaDirective)
IgxCardMedia is container for the card media section.
Use it to wrap images and videos.

- **constructor**(): IgxCardMediaDirective
- **height**: `string` — Sets the height style property of the media container.
If not provided it will be set to auto.
- **role**: `string` — Sets the role attribute of the media container.
- **width**: `string` — Sets the width and min-width style property
of the media container. If not provided it will be set to auto.

### [IgxCardThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCardThumbnailDirective)
IgxCardThumbnail is container for the card thumbnail section.
Use it to wrap anything you want to be used as a thumbnail.

- **constructor**(): IgxCardThumbnailDirective

### [IgxCarouselComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCarouselComponent)
**Ignite UI for Angular Carousel** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)

The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom
content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces.
It can be used as a separate fullscreen element or inside another component.

Example:
<igx-carousel>
  <igx-slide>
    <h3>First Slide Header</h3>
    <p>First slide Content</p>
  <igx-slide>
  <igx-slide>
    <h3>Second Slide Header</h3>
    <p>Second Slide Content</p>
</igx-carousel>

- **constructor**(cdr: ChangeDetectorRef, element: ElementRef<any>, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality, document: any): IgxCarouselComponent
- **animationType**: `CarouselAnimationType` — Gets/sets the animation type of carousel.
Default value is slide.
<igx-carousel animationType="none">
<igx-carousel>
- **carouselPaused**: `EventEmitter<IgxCarouselComponent>` — An event that is emitted after the carousel has been paused.
Provides a reference to the IgxCarouselComponent as an event argument.
<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>
- **carouselPlaying**: `EventEmitter<IgxCarouselComponent>` — An event that is emitted after the carousel has resumed transitioning between slides.
Provides a reference to the IgxCarouselComponent as an event argument.
<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>
- **cssClass**: `string` — Returns the class of the carousel component.
let class =  this.carousel.cssClass;
- **gesturesSupport**: `boolean` — Controls whether the carousel should support gestures.
Default value is true.
<igx-carousel [gesturesSupport]="false"></igx-carousel>
- **id**: `string` — Sets the id of the carousel.
If not set, the id of the first carousel component will be "igx-carousel-0".
<igx-carousel id="my-first-carousel"></igx-carousel>
- **indicators**: `boolean` — Controls whether the carousel should render the indicators.
Default value is true.
<igx-carousel [indicators]="false"></igx-carousel>
- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Gets/sets the display mode of carousel indicators. It can be start or end.
Default value is end.
<igx-carousel indicatorsOrientation="start">
<igx-carousel>
- **indicatorTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering carousel indicators

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselIndicator let-slide>
        <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
        <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
     </ng-template>
 </igx-carousel>
- **loop**: `boolean` — Sets whether the carousel should loop back to the first slide after reaching the last slide.
Default value is true.
<igx-carousel [loop]="false"></igx-carousel>
- **maximumIndicatorsCount**: `number` — Controls the maximum indexes that can be shown.
Default value is 10.
<igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>
- **navigation**: `boolean` — Controls whether the carousel should render the left/right navigation buttons.
Default value is true.
<igx-carousel [navigation]="false"></igx-carousel>
- **nextButtonTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering carousel next button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselNextButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="add"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
- **pause**: `boolean` — Sets whether the carousel will pause the slide transitions on user interactions.
Default value is true.
 <igx-carousel [pause]="false"></igx-carousel>
- **prevButtonTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering carousel previous button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.prevButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="remove"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
- **role**: `string` — Returns the role attribute of the carousel.
let carouselRole =  this.carousel.role;
- **slideAdded**: `EventEmitter<ISlideEventArgs>` — An event that is emitted after a slide has been added to the carousel.
Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments.
<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>
- **slideChanged**: `EventEmitter<ISlideEventArgs>` — An event that is emitted after a slide transition has happened.
Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments.
<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>
- **slideRemoved**: `EventEmitter<ISlideEventArgs>` — An event that is emitted after a slide has been removed from the carousel.
Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments.
<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>
- **slides**: `QueryList<IgxSlideComponent>` — The collection of slides currently in the carousel.
let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
- **vertical**: `boolean` — Controls whether the carousel has vertical alignment.
Default value is false.
<igx-carousel [vertical]="true"></igx-carousel>
- **current**: `number` — The index of the slide being currently shown.
let currentSlideNumber =  this.carousel.current;
- **interval**: `number` — Returns the time interval in milliseconds before the slide changes.
let timeInterval = this.carousel.interval;
- **isDestroyed**: `boolean` — Returns а boolean indicating if the carousel is destroyed.
let isDestroyed =  this.carousel.isDestroyed;
- **isPlaying**: `boolean` — Returns a boolean indicating if the carousel is playing.
let isPlaying =  this.carousel.isPlaying;
- **nativeElement**: `any` — Returns a reference to the carousel element in the DOM.
let nativeElement =  this.carousel.nativeElement;
- **resourceStrings**: `ICarouselResourceStrings` — An accessor that returns the resource strings.
- **total**: `number` — Returns the total number of slides in the carousel.
let slideCount =  this.carousel.total;
- **touchAction**: `"auto" | "pan-y"` — Gets the touch-action style of the list item.
let touchAction = this.listItem.touchAction;
- **add**(slide: IgxSlideComponent): void — Adds a new slide to the carousel.
this.carousel.add(newSlide);
- **get**(index: number): IgxSlideComponent — Returns the slide corresponding to the provided index or null.
let slide1 =  this.carousel.get(1);
- **next**(): void — Transitions to the next slide in the carousel.
this.carousel.next();
- **play**(): void — Resumes playing of the carousel if in paused state.
No operation otherwise.
this.carousel.play();
}
- **prev**(): void — Transitions to the previous slide in the carousel.
this.carousel.prev();
- **remove**(slide: IgxSlideComponent): void — Removes a slide from the carousel.
this.carousel.remove(slide);
- **select**(slide: IgxSlideComponent, direction: Direction): void — Kicks in a transition for a given slide with a given direction.
this.carousel.select(this.carousel.get(2), Direction.NEXT);
- **stop**(): void — Stops slide transitions if the pause option is set to true.
No operation otherwise.
 this.carousel.stop();
}

### [IgxCarouselIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCarouselIndicatorDirective)

- **constructor**(): IgxCarouselIndicatorDirective

### [IgxCarouselNextButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCarouselNextButtonDirective)

- **constructor**(): IgxCarouselNextButtonDirective

### [IgxCarouselPrevButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCarouselPrevButtonDirective)

- **constructor**(): IgxCarouselPrevButtonDirective

### [IgxCellEditorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCellEditorTemplateDirective)

- **constructor**(template: TemplateRef<IgxCellTemplateContext>): IgxCellEditorTemplateDirective
- **template**: `TemplateRef<IgxCellTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxCellEditorTemplateDirective, context: unknown): context

### [IgxCellHeaderTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCellHeaderTemplateDirective)

- **constructor**(template: TemplateRef<IgxColumnTemplateContext>): IgxCellHeaderTemplateDirective
- **template**: `TemplateRef<IgxColumnTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxCellHeaderTemplateDirective, context: unknown): context

### [IgxCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCellTemplateDirective)

- **constructor**(template: TemplateRef<IgxCellTemplateContext>): IgxCellTemplateDirective
- **template**: `TemplateRef<IgxCellTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxCellTemplateDirective, context: unknown): context

### [IgxCellValidationErrorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCellValidationErrorDirective)

- **constructor**(template: TemplateRef<IgxCellTemplateContext>): IgxCellValidationErrorDirective
- **template**: `TemplateRef<IgxCellTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxCellValidationErrorDirective, context: unknown): context

### [IgxCheckboxComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCheckboxComponent)
Allows users to make a binary choice for a certain condition.

- **constructor**(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl): IgxCheckboxComponent
- **cssClass**: `string` — Returns the class of the checkbox component.
- **disabled**: `boolean` — Sets/gets whether the checkbox is disabled.
Default value is false.
- **disableTransitions**: `boolean` — Sets/gets whether the checkbox should disable all css transitions.
Default value is false.
- **focused**: `boolean` — Sets/gets whether the checkbox component is on focus.
Default value is false.
- **indeterminate**: `boolean` — Sets/gets the checkbox indeterminate visual state.
Default value is false;
- **invalid**: `boolean` — Sets/gets whether the checkbox is invalid.
Default value is false.
- **readonly**: `boolean` — Sets/gets whether the checkbox is readonly.
Default value is false.
- **checked**: `boolean`

### [IgxChipComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxChipComponent)
Chip is compact visual component that displays information in an obround.

- **constructor**(cdr: ChangeDetectorRef, ref: ElementRef<HTMLElement>, renderer: Renderer2, document: any): IgxChipComponent
- **animateOnRelease**: `boolean` — Enables/disables the draggable element animation when the element is released.
By default it's set to true.
- **cdr**: `ChangeDetectorRef`
- **chipClick**: `EventEmitter<IChipClickEventArgs>` — Emits an event when the IgxChipComponent is clicked.
Returns the clicked IgxChipComponent, whether the event should be canceled.
- **data**: `any` — Stores data related to the chip.
- **disabled**: `boolean` — Disables the IgxChipComponent. When disabled it restricts user interactions
like focusing on click or tab, selection on click or Space, dragging.
By default it is set to false.
- **document**: `any`
- **dragDirective**: `IgxDragDirective` — Property that contains a reference to the IgxDragDirective the IgxChipComponent uses for dragging behavior.
- **dragDrop**: `EventEmitter<IChipEnterDragAreaEventArgs>` — Emits an event when the IgxChipComponent has been dropped in the IgxChipsAreaComponent.
Returns the target IgxChipComponent, the drag IgxChipComponent, as  well as
the original drop event arguments.
- **dragEnter**: `EventEmitter<IChipEnterDragAreaEventArgs>` — Emits an event when the IgxChipComponent has entered the IgxChipsAreaComponent.
Returns the target IgxChipComponent, the drag IgxChipComponent, as  well as
the original drop event arguments.
- **draggable**: `boolean` — Defines if the IgxChipComponent can be dragged in order to change it's position.
By default it is set to false.
- **dragLeave**: `EventEmitter<IChipEnterDragAreaEventArgs>` — Emits an event when the IgxChipComponent has left the IgxChipsAreaComponent.
Returns the target IgxChipComponent, the drag IgxChipComponent, as  well as
the original drop event arguments.
- **dragOver**: `EventEmitter<IChipEnterDragAreaEventArgs>` — Emits an event when the IgxChipComponent is over the IgxChipsAreaComponent.
Returns the target IgxChipComponent, the drag IgxChipComponent, as  well as
the original drop event arguments.
- **hideBaseOnDrag**: `boolean` — Enables/disables the hiding of the base element that has been dragged.
By default it's set to true.
- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated.
- **keyDown**: `EventEmitter<IChipKeyDownEventArgs>` — Emits an event when the IgxChipComponent keyboard navigation is being used.
Returns the focused/selected IgxChipComponent, whether the event should be canceled,
if the alt, shift or control key is pressed and the pressed key name.
- **moveEnd**: `EventEmitter<IBaseChipEventArgs>` — Emits an event when the IgxChipComponent moving ends.
Returns the moved IgxChipComponent.
- **moveStart**: `EventEmitter<IBaseChipEventArgs>` — Emits an event when the IgxChipComponent moving starts.
Returns the moving IgxChipComponent.
- **removable**: `boolean` — Defines if the IgxChipComponent should render remove button and throw remove events.
By default it is set to false.
- **remove**: `EventEmitter<IBaseChipEventArgs>` — Emits an event when the IgxChipComponent is removed.
Returns the removed IgxChipComponent.
- **removeIcon**: `TemplateRef<any>` — Overrides the default icon that the chip applies to the remove button.
- **role**: `string` — Returns the role attribute of the chip.
- **selectable**: `boolean` — Defines if the IgxChipComponent can be selected on click or through navigation,
By default it is set to false.
- **selectedChanged**: `EventEmitter<IBaseChipEventArgs>` — Emits event when the IgxChipComponent is selected/deselected and any related animations and transitions also end.
- **selectedChanging**: `EventEmitter<IChipSelectEventArgs>` — Emits event when the IgxChipComponent is selected/deselected.
Returns the selected chip reference, whether the event should be canceled, what is the next selection state and
when the event is triggered by interaction originalEvent is provided, otherwise originalEvent is null.
- **selectIcon**: `TemplateRef<any>` — Overrides the default icon that the chip applies when it is selected.
- **variant**: `string | any` — Sets/gets the variant of the chip.
- **color**: `any` — Returns the background color of the IgxChipComponent.
- **resourceStrings**: `IChipResourceStrings` — An accessor that returns the resource strings.
- **selected**: `boolean` — Returns if the IgxChipComponent is selected.
- **tabIndex**: `number`
- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
- **ngOnInit**(): void — A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.
- **onRemoveMouseDown**(event: PointerEvent | MouseEvent): void
- **onSelectTransitionDone**(event: any): void

### [IgxChipsAreaComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxChipsAreaComponent)
The chip area allows you to perform more complex scenarios with chips that require interaction,
like dragging, selection, navigation, etc.

- **constructor**(cdr: ChangeDetectorRef, element: ElementRef<any>, _iterableDiffers: IterableDiffers): IgxChipsAreaComponent
- **ariaLabel**: `string` — Returns the aria-label attribute of the chips area.
- **cdr**: `ChangeDetectorRef`
- **chipsList**: `QueryList<IgxChipComponent>` — Holds the IgxChipComponent in the IgxChipsAreaComponent.
- **element**: `ElementRef<any>`
- **height**: `number` — Sets the height of the IgxChipsAreaComponent.
- **moveEnd**: `EventEmitter<IBaseChipsAreaEventArgs>` — Emits an event after an IgxChipComponent in the IgxChipsAreaComponent is moved.
- **moveStart**: `EventEmitter<IBaseChipsAreaEventArgs>` — Emits an event when an IgxChipComponent in the IgxChipsAreaComponent is moved.
- **reorder**: `EventEmitter<IChipsAreaReorderEventArgs>` — Emits an event when IgxChipComponents in the IgxChipsAreaComponent should be reordered.
Returns an array of IgxChipComponents.
- **role**: `string` — Returns the role attribute of the chips area.
- **selectionChange**: `EventEmitter<IChipsAreaSelectEventArgs>` — Emits an event when an IgxChipComponent in the IgxChipsAreaComponent is selected/deselected.
Fired after the chips area is initialized if there are initially selected chips as well.
Returns an array of selected IgxChipComponents and the IgxChipAreaComponent.
- **width**: `number` — Sets the width of the IgxChipsAreaComponent.

### [IgxCircularProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCircularProgressBarComponent)

- **constructor**(renderer: Renderer2): IgxCircularProgressBarComponent
- **gradientTemplate**: `IgxProgressBarGradientDirective`
- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated.
<igx-circular-bar [id]="'igx-circular-bar-55'"></igx-circular-bar>
- **textTemplate**: `IgxProgressBarTextTemplateDirective`
- **textVisibility**: `boolean` — Sets the text visibility. By default, it is set to true.
<igx-circular-bar [textVisibility]="false"></igx-circular-bar>
- **type**: `string` — Set type of the IgxCircularProgressBarComponent. Possible options - default, success, info, warning, and error.
<igx-circular-bar [type]="'error'"></igx-circular-bar>
- **ngAfterContentInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.

### [IgxCollapsibleIndicatorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCollapsibleIndicatorTemplateDirective)

- **constructor**(template: TemplateRef<IgxColumnTemplateContext>): IgxCollapsibleIndicatorTemplateDirective
- **template**: `TemplateRef<IgxColumnTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxCollapsibleIndicatorTemplateDirective, context: unknown): context

### [IgxColumnActionsBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnActionsBaseDirective)

- **constructor**(): IgxColumnActionsBaseDirective

### [IgxColumnActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnActionsComponent)
Providing reference to IgxColumnActionsComponent:
 @ViewChild('columnActions', { read: IgxColumnActionsComponent })
 public columnActions: IgxColumnActionsComponent;

- **constructor**(differs: IterableDiffers): IgxColumnActionsComponent
- **columnItems**: `QueryList<IgxCheckboxComponent>` — Gets the checkbox components representing column items currently present in the dropdown
- **columnsAreaMaxHeight**: `string` — Gets/sets the max height of the columns area.
- **columnToggled**: `EventEmitter<IColumnToggledEventArgs>` — An event that is emitted after a column's checked state is changed.
Provides references to the column and the checked properties as event arguments.
 <igx-column-actions (columnToggled)="columnToggled($event)"></igx-column-actions>
- **cssClass**: `string` — Sets/Gets the css class selector.
By default the value of the class attribute is "igx-column-actions".
let cssCLass =  this.columnHidingUI.cssClass;

this.columnHidingUI.cssClass = 'column-chooser';
- **grid**: `GridType` — Gets/Sets the grid to provide column actions for.
- **hideFilter**: `boolean` — Shows/hides the columns filtering input from the UI.
- **indentation**: `number` — Gets/sets the indentation of columns in the column list based on their hierarchy level.
- **title**: `string` — Gets/sets the title of the column actions component.
- **checkAllText**: `string` — Gets the text of the button that checks all columns.
- **columnDisplayOrder**: `ColumnDisplayOrder` — Gets the display order of the columns.
- **filterColumnsPrompt**: `string` — Gets the prompt that is displayed in the filter input.
- **filterCriteria**: `string` — Gets the value which filters the columns list.
- **id**: `string` — Gets/Sets the value of the id attribute.
- **uncheckAllText**: `string` — Gets the text of the button that unchecks all columns.
- **checkAllColumns**(): void — Checks all columns and performs the appropriate action.
- **uncheckAllColumns**(): void — Unchecks all columns and performs the appropriate action.

### [IgxColumnComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnComponent)
**Ignite UI for Angular Column** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#columns-configuration)

The Ignite UI Column is used within an igx-grid element to define what data the column will show. Features such as sorting,
filtering & editing are enabled at the column level.  You can also provide a template containing custom content inside
the column using ng-template which will be used for all cells within the column.

- **constructor**(grid: GridType, _validators: Validator[], platform: PlatformUtil): IgxColumnComponent
- **additionalTemplateContext**: `any` — Sets/gets custom properties provided in additional template context.

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>
- **autosizeHeader**: `boolean` — Sets/gets whether the column header is included in autosize logic.
Useful when template for a column header is sized based on parent, for example a default div.
Default value is false.
let isResizable = this.column.resizable;

<igx-column [resizable] = "true"></igx-column>
- **cellClasses**: `any` — Sets a conditional class selector of the column cells.
Accepts an object literal, containing key-value pairs,
where the key is the name of the CSS class, while the
value is either a callback function that returns a boolean,
or boolean, like so:
callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };

<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>
- **cellStyles**: `any` — Sets conditional style properties on the column cells.
Similar to ngStyle it accepts an object literal where the keys are
the style properties and the value is the expression to be evaluated.
As with cellClasses it accepts a callback function.
styles = {
 background: 'royalblue',
 color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
}

<igx-column [cellStyles]="styles"></igx-column>
- **children**: `QueryList<IgxColumnComponent>` — Sets/gets the children columns.
let columnChildren = this.column.children;
- **colEnd**: `number` — Column index where the current field should end.
The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field
<igx-column-layout>
  <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
- **colStart**: `number` — Column index from which the field is starting.
<igx-column-layout>
  <igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
- **dataType**: `GridColumnDataType` — Sets/gets the data type of the column values.
Default value is string.
let columnDataType = this.column.dataType;

<igx-column [dataType] = "'number'"></igx-column>
- **disableHiding**: `boolean` — Gets whether the hiding is disabled.
let isHidingDisabled =  this.column.disableHiding;
- **disablePinning**: `boolean` — Gets whether the pinning is disabled.
let isPinningDisabled =  this.column.disablePinning;
- **expandedChange**: `EventEmitter<boolean>` — Emitted when the column expanded or collapsed.

<igx-column (expandedChange)="expandedChange($event)">
</igx-column>
- **filterable**: `boolean` — Sets/gets whether the column is filterable.
Default value is true.
let isFilterable = this.column.filterable;

<igx-column [filterable] = "false"></igx-column>
- **filteringIgnoreCase**: `boolean` — Sets/gets whether the column filtering should be case sensitive.
Default value is true.
let filteringIgnoreCase = this.column.filteringIgnoreCase;

<igx-column [filteringIgnoreCase] = "false"></igx-column>
- **formatter**: `any` — Applies display format to cell values in the column. Does not modify the underlying data.
- **grid**: `GridType` — Represents the instance of the parent GridType that contains this column.
- **header**: `string` — Sets/gets the header value.
let columnHeader = this.column.header;

<igx-column [header] = "'ID'"></igx-column>
- **headerClasses**: `string` — Sets/gets the class selector of the column header.
let columnHeaderClass = this.column.headerClasses;

<igx-column [headerClasses] = "'column-header'"></igx-column>
- **headerGroupClasses**: `string` — Sets/gets the class selector of the column group header.
let columnHeaderClass = this.column.headerGroupClasses;

<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
- **headerGroupStyles**: `any` — Sets conditional style properties on the column header group wrapper.
Similar to ngStyle it accepts an object literal where the keys are
the style properties and the value is the expression to be evaluated.
styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}

<igx-column [headerGroupStyles]="styles"></igx-column>
- **headerStyles**: `any` — Sets conditional style properties on the column header.
Similar to ngStyle it accepts an object literal where the keys are
the style properties and the value is the expression to be evaluated.
styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}

<igx-column [headerStyles]="styles"></igx-column>
- **hiddenChange**: `EventEmitter<boolean>` — Emitted when the column is hidden or shown.

<igx-column (hiddenChange)="hiddenChange($event)">
</igx-column>
- **parent**: `any` — Sets/gets the parent column.
let parentColumn = this.column.parent;

this.column.parent = higherLevelColumn;
- **pinnedChange**: `EventEmitter<boolean>` — Emitted when the column is pinned/unpinned.

<igx-column (pinnedChange)="pinnedChange($event)">
</igx-column>
- **resizable**: `boolean` — Sets/gets whether the column is resizable.
Default value is false.
let isResizable = this.column.resizable;

<igx-column [resizable] = "true"></igx-column>
- **rowEnd**: `number` — Row index where the current field should end.
The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field
<igx-column-layout>
  <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
- **rowStart**: `number` — Row index from which the field is starting.
<igx-column-layout>
  <igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
- **searchable**: `boolean` — Sets/gets whether the column is searchable.
Default value is true.
let isSearchable =  this.column.searchable';

 <igx-column [searchable] = "false"></igx-column>
- **sortable**: `boolean` — Sets/gets whether the column is sortable.
Default value is false.
let isSortable = this.column.sortable;

<igx-column [sortable] = "true"></igx-column>
- **sortingIgnoreCase**: `boolean` — Sets/gets whether the column sorting should be case sensitive.
Default value is true.
let sortingIgnoreCase = this.column.sortingIgnoreCase;

<igx-column [sortingIgnoreCase] = "false"></igx-column>
- **summaryFormatter**: `any` — The summaryFormatter is used to format the display of the column summaries.

In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter
to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.

columnInit(column: IgxColumnComponent) {
  if (column.field == "OrderDate") {
    column.summaryFormatter = this.summaryFormat;
  }
}

summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
  const result = summary.summaryResult;
  if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
     const pipe = new DatePipe('fr-FR');
     return pipe.transform(result,'mediumDate');
  }
  return result;
}
- **title**: `string` — Sets/gets the title value.
let title = this.column.title;

<igx-column [title] = "'Some column tooltip'"></igx-column>
- **widthChange**: `EventEmitter<string>` — Emitted when the column width changes.

<igx-column (widthChange)="widthChange($event)">
</igx-column>
- **bodyTemplate**: `TemplateRef<IgxCellTemplateContext>` — Returns a reference to the bodyTemplate.
let bodyTemplate = this.column.bodyTemplate;
- **childColumns**: `ColumnType[]` — A list containing all the child columns under this column (if any).
Empty without children or if this column is not Group or Layout.
- **collapsible**: `boolean` — Optional
Indicated whether the column can be collapsed. If the value is true, the column can be collapsed
It is used in tree grid and for navigation
- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns.
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **columnLayoutChild**: `boolean` — Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
let columnLayoutChild =  this.column.columnLayoutChild;
- **disabledSummaries**: `string[]` — Sets/gets the summary operands to exclude from display.
Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.
let disabledSummaries = this.column.disabledSummaries;

<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column>
- **editable**: `boolean` — Indicated whether the column can be edited. If the value is true, the column can be edited
- **editorOptions**: `IColumnEditorOptions` — Sets properties on the default column editors
- **errorTemplate**: `TemplateRef<IgxCellTemplateContext>` — Returns a reference to the validation error template.
let errorTemplate = this.column.errorTemplate;
- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded
- **field**: `string` — The internal field name, used in expressions and queries.
- **filterCellTemplate**: `TemplateRef<IgxColumnTemplateContext>` — Represents a custom template for filtering
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **filteringExpressionsTree**: `FilteringExpressionsTree` — The filtering expressions for the column.
The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc.
- **filters**: `IgxFilteringOperand` — Optional filtering operands that apply to this field.
- **groupable**: `boolean` — Indicates whether a column can be put in a group. If the value is true, the column can be put in a group
- **groupingComparer**: `any` — Represents a method with custom grouping comparator to determine the members of the group.
- **hasSummary**: `boolean` — Gets a value indicating whether the summary for the column is enabled.
let hasSummary = this.column.hasSummary;
- **headerTemplate**: `TemplateRef<IgxColumnTemplateContext>` — The template reference for the custom header of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible
- **index**: `number` — The index of the column within the grid.
Includes the hidden columns when counting
- **inlineEditorTemplate**: `TemplateRef<IgxCellTemplateContext>` — The template reference for the custom inline editor of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **level**: `number` — Represents the hierarchical level of the column in the column layout
- **maxWidth**: `string`
- **minWidth**: `string`
- **pinned**: `boolean` — Indicates if the column is currently pinned. If the value is true, the column is pinned
- **pipeArgs**: `IColumnPipeArgs` — Optional arguments for any pipe applied to the field.
- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected
- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected
- **sortStrategy**: `ISortingStrategy` — The sorting strategy used for sorting this column.
The interface contains a method sort that sorts the provided data based on the given sorting expressions
- **summaries**: `any` — Gets the column summaries.
let columnSummaries = this.column.summaries;
- **summaryTemplate**: `TemplateRef<IgxSummaryTemplateContext>` — The template reference for a summary of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **topLevelParent**: `ColumnType` — Optional
The root parent of this column (if any).
If there is no root parent, that means the current column is the root parent
- **visibleIndex**: `number` — The index of the column within the grid.
Does not include the hidden columns when counting
- **visibleWhenCollapsed**: `boolean`
- **width**: `string` — Gets the width of the column.
let columnWidth = this.column.width;
- **autosize**(byHeaderOnly: boolean): void — Autosize the column to the longest currently visible cell value, including the header cell.
@ViewChild('grid') grid: IgxGridComponent;
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
- **move**(index: number): void — Moves a column to the specified visible index.
If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.
If passed index would move the column to a different column group. moving is not performed.
- **pin**(index?: number): boolean — Pins the column at the provided index in the pinned area.
Defaults to index 0 if not provided, or to the initial index in the pinned area.
Returns true if the column is successfully pinned. Returns false if the column cannot be pinned.
Column cannot be pinned if:
- Is already pinned
- index argument is out of range
- The pinned area exceeds 80% of the grid width
let success = this.column.pin();
- **unpin**(index?: number): boolean — Unpins the column and place it at the provided index in the unpinned area.
Defaults to index 0 if not provided, or to the initial index in the unpinned area.
Returns true if the column is successfully unpinned. Returns false if the column cannot be unpinned.
Column cannot be unpinned if:
- Is already unpinned
- index argument is out of range
let success = this.column.unpin();

### [IgxColumnEmailValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnEmailValidatorDirective)

- **constructor**(): IgxColumnEmailValidatorDirective

### [IgxColumnGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnGroupComponent)
**Ignite UI for Angular Column Group**

- **constructor**(grid: GridType, _validators: Validator[], platform: PlatformUtil): IgxColumnGroupComponent
- **children**: `QueryList<IgxColumnComponent>`
- **collapsibleIndicatorTemplate**: `TemplateRef<IgxColumnTemplateContext>` — Allows you to define a custom template for expand/collapse indicator
- **searchable**: `boolean` — Sets/gets whether the column group is searchable.
Default value is true.
let isSearchable =  this.columnGroup.searchable;

 <igx-column-group [searchable] = "false"></igx-column-group>
- **childColumns**: `ColumnType[]` — A list containing all the child columns under this column (if any).
Empty without children or if this column is not Group or Layout.
- **collapsible**: `boolean` — Optional
Indicated whether the column can be collapsed. If the value is true, the column can be collapsed
It is used in tree grid and for navigation
- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns.
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded
- **filters**: `any` — Optional filtering operands that apply to this field.
- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible
- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected
- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected
- **summaries**: `any` — Gets the column group summaries.
let columnGroupSummaries = this.columnGroup.summaries;
- **width**: `string` — Gets the width of the column group.
let columnGroupWidth = this.columnGroup.width;

### [IgxColumnHidingDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnHidingDirective)

- **constructor**(columnActions: IgxColumnActionsComponent): IgxColumnHidingDirective

### [IgxColumnLayoutComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnLayoutComponent)
Column layout for declaration of Multi-row Layout

- **constructor**(grid: GridType, _validators: Validator[], platform: PlatformUtil): IgxColumnLayoutComponent
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible
- **visibleIndex**: `number` — The index of the column within the grid.
Does not include the hidden columns when counting
- **width**: `any` — Gets the width of the column layout.
let columnGroupWidth = this.columnGroup.width;

### [IgxColumnMaxLengthValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnMaxLengthValidatorDirective)

- **constructor**(): IgxColumnMaxLengthValidatorDirective

### [IgxColumnMaxValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnMaxValidatorDirective)

- **constructor**(): IgxColumnMaxValidatorDirective

### [IgxColumnMinLengthValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnMinLengthValidatorDirective)

- **constructor**(): IgxColumnMinLengthValidatorDirective

### [IgxColumnMinValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnMinValidatorDirective)

- **constructor**(): IgxColumnMinValidatorDirective

### [IgxColumnPinningDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnPinningDirective)

- **constructor**(columnActions: IgxColumnActionsComponent): IgxColumnPinningDirective

### [IgxColumnRequiredValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumnRequiredValidatorDirective)

- **constructor**(): IgxColumnRequiredValidatorDirective

### [IgxColumPatternValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxColumPatternValidatorDirective)

- **constructor**(): IgxColumPatternValidatorDirective

### [IgxComboAddItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboAddItemDirective)
Defines the custom template that will be used to display the ADD button

- **constructor**(): IgxComboAddItemDirective

### [IgxComboClearIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboClearIconDirective)
Defines the custom template that will be used when rendering the combo's clear icon

- **constructor**(): IgxComboClearIconDirective

### [IgxComboComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboComponent)
Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list.

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, document: any, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService): IgxComboComponent
- **autoFocusSearch**: `boolean` — Whether the combo's search box should be focused after the dropdown is opened.
When false, the combo's list item container will be focused instead
- **searchPlaceholder**: `string` — Defines the placeholder value for the combo dropdown search field
- **selectionChanging**: `EventEmitter<IComboSelectionChangingEventArgs>` — Emitted when item selection is changing, before the selection completes

<igx-combo (selectionChanging)='handleSelection()'></igx-combo>
- **deselect**(items: any[], event?: Event): void — Deselect defined items
- **deselectAllItems**(ignoreFilter?: boolean, event?: Event): void — Deselect all (filtered) items
- **onArrowDown**(event: Event): void
- **select**(newItems: any[], clearCurrentSelection?: boolean, event?: Event): void — Select defined items
- **selectAllItems**(ignoreFilter?: boolean, event?: Event): void — Select all (filtered) items
- **setSelectedItem**(itemID: any, select: boolean, event?: Event): void — Selects/Deselects a single item

### [IgxComboEmptyDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboEmptyDirective)
Defines the custom template that will be displayed when the combo's list is empty

- **constructor**(): IgxComboEmptyDirective

### [IgxComboFooterDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboFooterDirective)
Allows a custom element to be added at the end of the combo list.

- **constructor**(): IgxComboFooterDirective

### [IgxComboHeaderDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboHeaderDirective)
Allows a custom element to be added at the beginning of the combo list.

- **constructor**(): IgxComboHeaderDirective

### [IgxComboHeaderItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboHeaderItemDirective)
Defines the custom template that will be used when rendering header items for groups in the combo's list

- **constructor**(): IgxComboHeaderItemDirective

### [IgxComboItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboItemDirective)
Allows the combo's items to be modified with a custom template

- **constructor**(): IgxComboItemDirective

### [IgxComboToggleIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxComboToggleIconDirective)
The custom template that will be used when rendering the combo's toggle button

- **constructor**(): IgxComboToggleIconDirective

### [IgxCsvExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCsvExporterOptions)
Objects of this class are used to configure the CSV exporting process.

- **constructor**(fileName: string, fileType: CsvFileTypes): IgxCsvExporterOptions
- **fileType**: `any` — Gets the CSV export format.
let filetype = this.exportOptions.fileType;
- **valueDelimiter**: `any` — Gets the value delimiter which will be used for the exporting operation.
let delimiter = this.exportOptions.valueDelimiter;

### [IgxCsvExporterService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCsvExporterService)
**Ignite UI for Angular CSV Exporter Service** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv)

The Ignite UI for Angular CSV Exporter service can export data in a Character Separated Values format from
both raw data (array) or from an IgxGrid.

Example:
public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

constructor(private csvExportService: IgxCsvExporterService) {
}

const opt: IgxCsvExporterOptions = new IgxCsvExporterOptions("FileName", CsvFileTypes.CSV);
this.csvExportService.exportData(this.localData, opt);

- **constructor**(): IgxCsvExporterService
- **exportEnded**: `EventEmitter<ICsvExportEndedEventArgs>` — This event is emitted when the export process finishes.
this.exporterService.exportEnded.subscribe((args: ICsvExportEndedEventArgs) => {
// put event handler code here
});

### [IgxCSVTextDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxCSVTextDirective)

- **constructor**(): IgxCSVTextDirective

### [IgxDataLoadingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDataLoadingTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxDataLoadingTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxDataRecordSorting](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDataRecordSorting)
Represents a class extending the IgxSorting class
Provides custom data record sorting.

- **constructor**(): IgxDataRecordSorting

### [IgxDateFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateFilteringOperand)
Provides filtering operations for Dates


### [IgxDatePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDatePickerComponent)
Date Picker displays a popup calendar that lets users select a single date.

- **constructor**(element: ElementRef<HTMLElement>, _localeId: string, _overlayService: IgxOverlayService, _injector: Injector, _renderer: Renderer2, platform: PlatformUtil, cdr: ChangeDetectorRef, _inputGroupType?: IgxInputGroupType): IgxDatePickerComponent
- **calendarFormat**: `IFormattingOptions` — Gets/Sets the format options of the IgxDatePickerComponent.
- **cancelButtonLabel**: `string` — Gets/Sets the cancel button's label.
- **displayMonthsCount**: `number` — Gets/Sets the number of month views displayed.
- **formatter**: `any` — Gets/Sets a custom formatter function on the selected or passed date.
- **formatViews**: `IFormattingViews` — Gets/Sets the format views of the IgxDatePickerComponent.
- **headerOrientation**: `PickerHeaderOrientation` — Gets/Sets the orientation of the IgxDatePickerComponent header.
- **hideOutsideDays**: `boolean` — Gets/Sets whether the inactive dates will be hidden.
- **id**: `string` — Gets/Sets the value of id attribute.
- **outlet**: `ElementRef<any> | IgxOverlayOutletDirective` — Gets/Sets the container used for the popup element.
- **resourceStrings**: `IDatePickerResourceStrings` — Gets/Sets the resource strings for the picker's default toggle icon.
By default it uses EN resources.
- **showWeekNumbers**: `boolean` — Show/hide week numbers
- **spinDelta**: `Pick<DatePartDeltas, "date" | "month" | "year">` — Delta values used to increment or decrement each editor date part on spin actions.
All values default to 1.
- **spinLoop**: `boolean` — Specify if the currently spun date segment should loop over.
- **todayButtonLabel**: `string` — Gets/Sets the today button's label.
- **validationFailed**: `EventEmitter<IDatePickerValidationFailedEventArgs>` — Emitted when the user types/spins invalid date in the date-picker editor.
- **valueChange**: `EventEmitter<Date>` — Emitted when the picker's value changes.
- **disabledDates**: `DateRangeDescriptor[]` — Gets/Sets the disabled dates descriptors.
- **maxValue**: `string | Date`
- **minValue**: `string | Date`
- **specialDates**: `DateRangeDescriptor[]` — Gets/Sets the special dates descriptors.
- **value**: `string | Date` — Gets/Sets the selected date.
- **clear**(): void — Clears the input field and the picker's value.
- **close**(): void — Closes the picker's dropdown or dialog.
- **decrement**(datePart?: DatePart, delta?: number): void — Decrement a specified DatePart
- **increment**(datePart?: DatePart, delta?: number): void — Increment a specified DatePart.
- **open**(settings?: OverlaySettings): void — Opens the picker's dropdown or dialog.
- **select**(value: Date): void — Selects a date.
- **selectToday**(): void — Selects today's date and closes the picker.
- **toggle**(settings?: OverlaySettings): void — Toggles the picker's dropdown or dialog

### [IgxDateRangeEndComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateRangeEndComponent)
Defines the end input for a date range picker

- **constructor**(element: ElementRef<HTMLElement>, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef, themeToken: ThemeToken): IgxDateRangeEndComponent

### [IgxDateRangePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateRangePickerComponent)
Provides the ability to select a range of dates from a calendar UI or editable inputs.

- **constructor**(element: ElementRef<any>, _localeId: string, platform: PlatformUtil, _injector: Injector, _cdr: ChangeDetectorRef, _overlayService: IgxOverlayService, _inputGroupType?: IgxInputGroupType): IgxDateRangePickerComponent
- **displayFormat**: `string` — The format used when editable inputs are not focused.
- **displayMonthsCount**: `number` — The number of displayed month views.
- **formatter**: `any` — A custom formatter function, applied on the selected or passed in date.
- **hideOutsideDays**: `boolean` — Gets/Sets whether dates that are not part of the current month will be displayed.
- **inputFormat**: `string` — The expected user input format and placeholder.
- **label**: `IgxLabelDirective`
- **outlet**: `ElementRef<any> | IgxOverlayOutletDirective` — Gets/Sets the container used for the popup element.
- **overlaySettings**: `OverlaySettings` — Custom overlay settings that should be used to display the calendar.
- **pickerActions**: `IgxPickerActionsDirective`
- **placeholder**: `string` — Sets the placeholder for single-input IgxDateRangePickerComponent.
- **showWeekNumbers**: `boolean` — Show/hide week numbers
- **valueChange**: `EventEmitter<DateRange>` — Emitted when the picker's value changes. Used for two-way binding.
- **collapsed**: `boolean` — Gets calendar state.

let state = this.dateRange.collapsed;
- **doneButtonText**: `string`
- **locale**: `string` — Gets the locale of the date-range-picker.
If not set, defaults to application's locale.
- **maxValue**: `string | Date`
- **minValue**: `string | Date`
- **resourceStrings**: `IDateRangePickerResourceStrings` — An accessor that returns the resource strings.
- **value**: `DateRange` — The currently selected value / range from the calendar
- **close**(): void — Closes the date range picker's dropdown or dialog.
- **open**(overlaySettings?: OverlaySettings): void — Opens the date range picker's dropdown or dialog.
- **select**(startDate: Date, endDate?: Date): void — Selects a range of dates. If no endDate is passed, range is 1 day (only startDate)
- **toggle**(overlaySettings?: OverlaySettings): void — Toggles the date range picker's dropdown or dialog

### [IgxDateRangeSeparatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateRangeSeparatorDirective)
Replaces the default separator to with the provided value

- **constructor**(): IgxDateRangeSeparatorDirective

### [IgxDateRangeStartComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateRangeStartComponent)
Defines the start input for a date range picker

- **constructor**(element: ElementRef<HTMLElement>, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef, themeToken: ThemeToken): IgxDateRangeStartComponent

### [IgxDateSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateSummaryOperand)

- **constructor**(): IgxDateSummaryOperand
- **operate**(data: any[], allData: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static methods and returns IgxSummaryResult[].
interface IgxSummaryResult {
  key: string;
  label: string;
  summaryResult: any;
}

Can be overridden in the inherited classes to provide customization for the summary.
class CustomDateSummary extends IgxDateSummaryOperand {
  constructor() {
    super();
  }
  public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
    const result = super.operate(data, allData, fieldName, groupRecord);
    result.push({
      key: "deadline",
      label: "Deadline Date",
      summaryResult: this.calculateDeadline(data);
    });
    return result;
  }
}
this.grid.getColumnByName('ColumnName').summaries = CustomDateSummary;
- static **earliest**(data: any[]): any — Returns the earliest date value in the data records.
If filtering is applied, returns the latest date value in the filtered data records.
IgxDateSummaryOperand.earliest(data);
- static **latest**(data: any[]): any — Returns the latest date value in the data records.
If filtering is applied, returns the latest date value in the filtered data records.
IgxDateSummaryOperand.latest(data);

### [IgxDateTimeEditorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateTimeEditorDirective)
Date Time Editor provides a functionality to input, edit and format date and time.

- **constructor**(renderer: Renderer2, elementRef: ElementRef<any>, maskParser: MaskParsingService, platform: PlatformUtil, _document: any, _locale: any): IgxDateTimeEditorDirective
- **defaultFormatType**: `"date" | "dateTime" | "time"` — Specify the default input format type. Defaults to date, which includes
only date parts for editing. Other valid options are time and dateTime.
- **locale**: `string` — Locale settings used for value formatting.
- **spinDelta**: `DatePartDeltas` — Delta values used to increment or decrement each editor date part on spin actions.
All values default to 1.
- **spinLoop**: `boolean` — Specify if the currently spun date segment should loop over.
- **validationFailed**: `EventEmitter<IgxDateTimeEditorEventArgs>` — Emitted when the editor is not within a specified range or when the editor's value is in an invalid state.
- **valueChange**: `EventEmitter<string | Date>` — Emitted when the editor's value has changed.
- **displayFormat**: `string`
- **inputFormat**: `string`
- **maxValue**: `string | Date` — Maximum value required for the editor to remain valid.
- **minValue**: `string | Date` — Minimum value required for the editor to remain valid.
- **value**: `string | Date`
- **clear**(): void — Clear the input element value.
- **decrement**(datePart?: DatePart, delta?: number): void — Decrement specified DatePart.
- **increment**(datePart?: DatePart, delta?: number): void — Increment specified DatePart.
- **onWheel**(event: WheelEvent): void

### [IgxDateTimeFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDateTimeFilteringOperand)


### [IgxDaysViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDaysViewComponent)

- **id**: `string` — Sets/gets the id of the days view.
If not set, the id will have value "igx-days-view-0".
<igx-days-view id="my-days-view"></igx-days-view>

let daysViewId = this.daysView.id;
- **role**: `string`
- **showWeekNumbers**: `boolean` — Show/hide week numbers
- **tabIndex**: `number`
- readonly **viewClass**: `true`
- **activeDate**: `Date`
- **hideLeadingDays**: `boolean`
- **hideTrailingDays**: `boolean`
- **previewRangeDate**: `Date`
- **showActiveDay**: `boolean`
- **standalone**: `boolean`

### [IgxDefaultDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDefaultDropStrategy)

- **constructor**(): IgxDefaultDropStrategy
- **dropAction**(_drag: IgxDragDirective, _drop: IgxDropDirective, _atIndex: number): void

### [IgxDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDialogComponent)
**Ignite UI for Angular Dialog Window** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)

The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display
more complicated visuals such as a user sign-in form.  It also provides a right and left button
which can be used for custom actions.

Example:
<button type="button" igxButton (click)="form.open()">Show Dialog</button>
<igx-dialog #form title="Sign In" rightButtonLabel="OK">
  <div>
    <igx-input-group>
      <input type="text" igxInput/>
      <label igxLabel>Username</label>
    </igx-input-group>
  </div>
  <div>
    <igx-input-group>
      <input type="password" igxInput/>
      <label igxLabel>Password</label>
    </igx-input-group>
  </div>
</igx-dialog>

- **constructor**(elementRef: ElementRef<any>, navService: IgxNavigationService): IgxDialogComponent
- **closed**: `EventEmitter<IDialogEventArgs>` — An event that is emitted after the dialog is closed.
<igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
- **closing**: `EventEmitter<IDialogCancellableEventArgs>` — An event that is emitted before the dialog is closed.
<igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
</igx-dialog>
- **focusTrap**: `boolean` — Set whether the Tab key focus is trapped within the dialog when opened.
Defaults to true.
<igx-dialog focusTrap="false""></igx-dialog>
- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated.
<igx-dialog [id]="'igx-dialog-56'" #alert title="Notification"
 leftButtonLabel="OK" (leftButtonSelect)="alert.close()">
</igx-dialog>
- **leftButtonLabel**: `string` — Sets the label of the left button of the dialog.
<igx-dialog leftButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
- **leftButtonRipple**: `string` — Sets the left button ripple. The ripple animates a click/tap to a component as a series of fading waves.
The property accepts all valid CSS color property values.
<igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
- **leftButtonSelect**: `EventEmitter<IDialogEventArgs>` — An event that is emitted when the left button is clicked.
<igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
</igx-dialog>
- **leftButtonType**: `IgxButtonType` — Sets the left button type. The types are flat, contained and fab.
The flat type button is a rectangle and doesn't have a shadow. <br>
The contained type button is also a rectangle but has a shadow. <br>
The fab type button is a circle with a shadow. <br>
The default value is flat.
<igx-dialog leftButtonType="contained" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
- **message**: `string` — Sets the message text of the dialog.
<igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
- **opened**: `EventEmitter<IDialogEventArgs>` — An event that is emitted after the dialog is opened.
<igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
- **opening**: `EventEmitter<IDialogCancellableEventArgs>` — An event that is emitted before the dialog is opened.
<igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
</igx-dialog>
- **rightButtonLabel**: `string` — Sets the label of the right button of the dialog.
<igx-dialog rightButtonLabel="OKAY" #alert title="Notification"  (leftButtonSelect)="alert.close()"></igx-dialog>
- **rightButtonRipple**: `string` — Sets the right button ripple.
<igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
- **rightButtonSelect**: `EventEmitter<IDialogEventArgs>` — An event that is emitted when the right button is clicked.
<igx-dialog (rightButtonSelect)="onDialogOKSelected($event)"
#dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
</igx-dialog>
- **rightButtonType**: `IgxButtonType` — Sets the right button type. The types are flat, contained and fab.
The flat type button is a rectangle and doesn't have a shadow. <br>
The contained type button is also a rectangle but has a shadow. <br>
The fab type button is a circle with a shadow. <br>
The default value is flat.
<igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
- **title**: `string` — Sets the title of the dialog.
<igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
- **toggleRef**: `IgxToggleDirective`
- **closeOnEscape**: `boolean` — Controls whether the dialog should close when Esc key is pressed. Defaults to true
<igx-dialog [closeOnEscape]="false" ></igx-dialog>
- **closeOnOutsideSelect**: `boolean` — Gets/Sets whether the dialog should close on click outside the component. By default it's false.
<igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()"
rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)">
</igx-dialog>
- **isCollapsed**: `boolean`
- **isModal**: `boolean` — Controls whether the dialog should be shown as modal. Defaults to true
<igx-dialog [isModal]="false" ></igx-dialog>
- **isOpen**: `boolean` — State of the dialog.

// get
let dialogIsOpen = this.dialog.isOpen;


<!--set-->
<igx-dialog [isOpen]='false'></igx-dialog>


Two-way data binding.
<!--set-->
<igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the dialog.
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
let currentPosition: PositionSettings = this.alert.positionSettings
- **role**: `"dialog" | "alertdialog" | "alert"` — Returns the value of the role of the dialog. The valid values are dialog, alertdialog, alert.
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
    let dialogRole = this.dialog.role;
}
- **state**: `string` — Returns the value of state. Possible state values are "open" or "close".
@ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
    let dialogState = this.dialog.state;
}
- **titleId**: `string` — Returns the value of the title id.
 @ViewChild("MyDialog")
public dialog: IgxDialogComponent;
ngAfterViewInit() {
    let dialogTitle = this.dialog.titleId;
}
- **close**(): void — A method that that closes the dialog.
- **ngAfterContentInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.
- **open**(overlaySettings: OverlaySettings): void — A method that opens the dialog.
- **toggle**(): void — A method that opens/closes the dialog.

### [IgxDividerDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDividerDirective)

- **constructor**(): IgxDividerDirective
- **id**: `string` — Sets/gets the id of the divider.
If not set, id will have value "igx-divider-0";
<igx-divider id="my-divider"></igx-divider>

let dividerId =  this.divider.id;
- **middle**: `boolean` — If set to true and an inset value has been provided,
the divider will start shrinking from both ends.
<igx-divider [middle]="true"></igx-divider>
- **role**: `string` — Sets the value of role attribute.
If not the default value of separator will be used.
- **type**: `string` — Sets the type of the divider. The default value
is default. The divider can also be dashed;
<igx-divider type="dashed"></igx-divider>
- **vertical**: `boolean` — Sets the divider in vertical orientation.
<igx-divider [vertical]="true"></igx-divider>
- **inset**: `string` — Gets the current divider inset in terms of
inset-inline-start representation as applied to the divider.
const inset = this.divider.inset;
- **isDashed**: `boolean`
- **isSolid**: `boolean` — A getter that returns true if the type of the divider is default;
const isDefault = this.divider.isDefault;

### [IgxDragDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDragDirective)

- **constructor**(cdr: ChangeDetectorRef, element: ElementRef<any>, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2, platformUtil: PlatformUtil): IgxDragDirective
- **cdr**: `ChangeDetectorRef`
- **dragChannel**: `string | number | string[] | number[]` — A property that provides a way for igxDrag and igxDrop to be linked through channels.
It accepts single value or an array of values and evaluates then using strict equality.
<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>
- **dragClick**: `EventEmitter<IDragBaseEventArgs>` — Event triggered when the draggable element is clicked.
<div igxDrag (dragClick)="onDragClick()">
        <span>Drag Me!</span>
</div>

public onDragClick(){
     alert("The element has been clicked!");
}
- **dragDirection**: `DragDirection` — Sets the directions that the element can be dragged.
By default it is set to both horizontal and vertical directions.
<div igxDrag [dragDirection]="dragDir">
        <span>Drag Me!</span>
</div>

public dragDir = DragDirection.HORIZONTAL;
- **dragEnd**: `EventEmitter<IDragBaseEventArgs>` — Event triggered when the draggable element is released.
<div igxDrag (dragEnd)="onDragEnd()">
        <span>Drag Me!</span>
</div>

public onDragEnd(){
     alert("The drag has ended!");
}
- **dragMove**: `EventEmitter<IDragMoveEventArgs>` — Event triggered when the draggable element has been moved.
<div igxDrag  (dragMove)="onDragMove()">
        <span>Drag Me!</span>
</div>

public onDragMove(){
     alert("The element has moved!");
}
- **dragStart**: `EventEmitter<IDragStartEventArgs>` — Event triggered when the draggable element drag starts.
<div igxDrag (dragStart)="onDragStart()">
        <span>Drag Me!</span>
</div>

public onDragStart(){
     alert("The drag has stared!");
}
- **dragTolerance**: `number` — Sets the tolerance in pixels before drag starts.
By default the drag starts after the draggable element is moved by 5px.
<div igxDrag [dragTolerance]="100">
        <span>Drag Me!</span>
</div>
- **element**: `ElementRef<any>`
- **ghost**: `boolean` — Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead.
By default it is set to true.
If it is set to false when dragging the base element is moved instead and no ghost elements are rendered.
<div igxDrag [ghost]="false">
     <span>Drag Me!</span>
</div>
- **ghostClass**: `string` — Sets a custom class that will be added to the ghostElement element.
<div igxDrag [ghostClass]="'ghostElement'">
        <span>Drag Me!</span>
</div>
- **ghostCreate**: `EventEmitter<IDragGhostBaseEventArgs>` — Event triggered when the drag ghost element is created.
<div igxDrag (ghostCreate)="ghostCreated()">
        <span>Drag Me!</span>
</div>

public ghostCreated(){
     alert("The ghost has been created!");
}
- **ghostDestroy**: `EventEmitter<IDragGhostBaseEventArgs>` — Event triggered when the drag ghost element is created.
<div igxDrag (ghostDestroy)="ghostDestroyed()">
        <span>Drag Me!</span>
</div>

public ghostDestroyed(){
     alert("The ghost has been destroyed!");
}
- **ghostHost**: `any` — Sets the element to which the dragged element will be appended.
By default it's set to null and the dragged element is appended to the body.
<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
        <span>Drag Me!</span>
</div>
- **ghostStyle**: `any` — Set styles that will be added to the ghostElement element.
<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
        <span>Drag Me!</span>
</div>
- **ghostTemplate**: `TemplateRef<any>` — Specifies a template for the ghost element created when dragging starts and ghost is true.
By default a clone of the base element the igxDrag is instanced is created.
<div igxDrag [ghostTemplate]="customGhost">
        <span>Drag Me!</span>
</div>
<ng-template #customGhost>
     <div class="customGhostStyle">
         <span>I am being dragged!</span>
     </div>
</ng-template>
- **renderer**: `Renderer2`
- **scrollContainer**: `HTMLElement` — Overrides the scroll container of the dragged element. By default its the window.
- **transitioned**: `EventEmitter<IDragBaseEventArgs>` — Event triggered after the draggable element is released and after its animation has finished.
<div igxDrag (transitioned)="onMoveEnd()">
        <span>Drag Me!</span>
</div>

public onMoveEnd(){
     alert("The move has ended!");
}
- **viewContainer**: `ViewContainerRef`
- **zone**: `NgZone`
- **data**: `any`
- **ghostOffsetX**: `any`
- **ghostOffsetY**: `any`
- **location**: `IgxDragLocation` — Gets the current location of the element relative to the page.
- **originLocation**: `IgxDragLocation` — Gets the original location of the element before dragging started.
- **setLocation**(newLocation: IgxDragLocation): void — Sets desired location of the base element or ghost element if rended relative to the document.
- **transitionTo**(target: ElementRef<any> | IgxDragLocation, customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void — Animates the base or ghost element to a specific target location or other element using transition.
If ghost is true but there is not ghost rendered, it will be created and animated.
It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location.
- **transitionToOrigin**(customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void — Animates the base or ghost element depending on the ghost input to its initial location.
If ghost is true but there is not ghost rendered, it will be created and animated.
If the base element has changed its DOM position its initial location will be changed accordingly.

### [IgxDragHandleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDragHandleDirective)

- **constructor**(element: ElementRef<any>): IgxDragHandleDirective
- **baseClass**: `boolean`
- **element**: `ElementRef<any>`

### [IgxDragIgnoreDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDragIgnoreDirective)

- **constructor**(element: ElementRef<any>): IgxDragIgnoreDirective
- **baseClass**: `boolean`
- **element**: `ElementRef<any>`

### [IgxDragLocation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDragLocation)

- **constructor**(_pageX: any, _pageY: any): IgxDragLocation
- **pageX**: `number`
- **pageY**: `number`

### [IgxDropDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDropDirective)

- **constructor**(element: ElementRef<any>, _renderer: Renderer2, _zone: NgZone): IgxDropDirective
- **dropChannel**: `string | number | string[] | number[]` — A property that provides a way for igxDrag and igxDrop to be linked through channels.
It accepts single value or an array of values and evaluates then using strict equality.
<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>
- **dropped**: `EventEmitter<IDropDroppedEventArgs>` — Event triggered when dragged element is dropped in the area of the element.
Since the igxDrop has default logic that appends the dropped element as a child, it can be canceled here.
To cancel the default logic the cancel property of the event needs to be set to true.
<div class="cageArea" igxDrop (dropped)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>

public dragDrop(){
    alert("A draggable element has been dropped in the chip area!");
}
- **element**: `ElementRef<any>`
- **enter**: `EventEmitter<IDropBaseEventArgs>` — Event triggered when dragged element enters the area of the element.
<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>

public dragEnter(){
    alert("A draggable element has entered the chip area!");
}
- **leave**: `EventEmitter<IDropBaseEventArgs>` — Event triggered when dragged element leaves the area of the element.
<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>

public dragLeave(){
    alert("A draggable element has left the chip area!");
}
- **over**: `EventEmitter<IDropBaseEventArgs>` — Event triggered when dragged element enters the area of the element.
<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>

public dragEnter(){
    alert("A draggable element has entered the chip area!");
}
- **data**: `any`
- **dropStrategy**: `any`

### [IgxDropDownComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDropDownComponent)
**Ignite UI for Angular DropDown** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down)

The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and
supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down

Example:
<igx-drop-down>
  <igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
    {{ item.value }}
  </igx-drop-down-item>
</igx-drop-down>

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService): IgxDropDownComponent
- **allowItemsFocus**: `boolean` — Gets/sets whether items take focus. Disabled by default.
When enabled, drop down items gain tab index and are focused when active -
this includes activating the selected item when opening the drop down and moving with keyboard navigation.

Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive
and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events.

// get
let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus;


<!--set-->
<igx-drop-down [allowItemsFocus]='true'></igx-drop-down>
- **closed**: `EventEmitter<IBaseEventArgs>` — Emitted after the dropdown is closed

<igx-drop-down (closed)='handleClosed($event)'></igx-drop-down>
- **closing**: `EventEmitter<IBaseCancelableBrowserEventArgs>` — Emitted before the dropdown is closed

<igx-drop-down (closing)='handleClosing($event)'></igx-drop-down>
- **labelledBy**: `string` — Sets aria-labelledby attribute value.
<igx-drop-down [labelledby]="labelId"></igx-drop-down>
- **opened**: `EventEmitter<IBaseEventArgs>` — Emitted after the dropdown is opened

<igx-drop-down (opened)='handleOpened($event)'></igx-drop-down>
- **opening**: `EventEmitter<IBaseCancelableBrowserEventArgs>` — Emitted before the dropdown is opened

<igx-drop-down (opening)='handleOpening($event)'></igx-drop-down>
- **collapsed**: `boolean` — Gets if the dropdown is collapsed

let isCollapsed = this.dropdown.collapsed;
- **id**: `string` — Gets/Sets the drop down's id

// get
let myDropDownCurrentId = this.dropdown.id;

<!--set-->
<igx-drop-down [id]='newDropDownId'></igx-drop-down>
- **listId**: `string` — Id of the internal listbox of the drop down
- **selectedItem**: `IgxDropDownItemBaseDirective` — Get currently selected item

let currentItem = this.dropdown.selectedItem;
- **clearSelection**(): void — Clears the selection of the dropdown
this.dropdown.clearSelection();
- **close**(event?: Event): void — Closes the dropdown

this.dropdown.close();
- **navigateItem**(index: number): void — Navigates to the item on the specified index
If the data in the drop-down is virtualized, pass the index of the item in the virtualized data.
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **onItemActionKey**(key: DropDownActionKey, event?: Event): void — Keydown Handler
- **open**(overlaySettings?: OverlaySettings): void — Opens the dropdown

this.dropdown.open();
- **setSelectedItem**(index: number): void — Select an item by index
- **toggle**(overlaySettings?: OverlaySettings): void — Toggles the dropdown

this.dropdown.toggle();

### [IgxDropDownGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDropDownGroupComponent)
The <igx-drop-down-item> is a container intended for row items in
a <igx-drop-down> container.

- **constructor**(): IgxDropDownGroupComponent
- **disabled**: `boolean` — Sets/gets if the item group is disabled

const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup;
// get
...
const groupState: boolean = myDropDownGroup.disabled;
...
//set
...
myDropDownGroup,disabled = false;
...


<igx-drop-down-item-group [label]="'My Items'" [disabled]="true">
    <igx-drop-down-item *ngFor="let item of items[index]" [value]="item.value">
        {{ item.text }}
    </igx-drop-down-item>
</igx-drop-down-item-group>


**NOTE:** All items inside of a disabled drop down group will be treated as disabled
- **label**: `string` — Sets/gets the label of the item group

const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup;
// get
...
const myLabel: string = myDropDownGroup.label;
...
// set
...
myDropDownGroup.label = 'My New Label';
...


<igx-drop-down-item-group [label]="'My new Label'">
     ...
</igx-drop-down-item-group>
- **labelledBy**: `string`

### [IgxDropDownItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDropDownItemComponent)
The <igx-drop-down-item> is a container intended for row items in
a <igx-drop-down> container.

- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef<any>, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxDropDownItemComponent
- **focused**: `boolean` — Sets/gets if the given item is focused
 let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemFocused = mySelectedItem.focused;
- **selected**: `boolean` — Sets/Gets if the item is the currently selected one in the dropdown

 let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemSelected = mySelectedItem.selected; // true


Two-way data binding
<igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>

### [IgxDropDownItemNavigationDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxDropDownItemNavigationDirective)
Navigation Directive that handles keyboard events on its host and controls a targeted IgxDropDownBaseDirective component

- **constructor**(dropdown: IgxDropDownBaseDirective): IgxDropDownItemNavigationDirective
- **dropdown**: `IgxDropDownBaseDirective`
- **activeDescendant**: `string`
- **target**: `IgxDropDownBaseDirective` — Gets the target of the navigation directive;

// Get
export class MyComponent {
 ...
 @ContentChild(IgxDropDownNavigationDirective)
 navDirective: IgxDropDownNavigationDirective = null
 ...
 const navTarget: IgxDropDownBaseDirective = navDirective.navTarget
}
- **handleKeyDown**(event: KeyboardEvent): void — Captures keydown events and calls the appropriate handlers on the target component
- **onArrowDownKeyDown**(): void — Navigates to previous item
- **onArrowUpKeyDown**(): void — Navigates to previous item
- **onEndKeyDown**(): void — Navigates to target's last item
- **onHomeKeyDown**(): void — Navigates to target's first item

### [IgxEmptyListTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxEmptyListTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxEmptyListTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxExcelExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelExporterOptions)
Objects of this class are used to configure the Excel exporting process.

- **constructor**(fileName: string): IgxExcelExporterOptions
- **exportAsTable**: `boolean` — Specifies whether the exported data should be formatted as Excel table. (True by default)
let exportAsTable = this.exportOptions.exportAsTable;
this.exportOptions.exportAsTable = false;
- **ignorePinning**: `boolean` — Specifies if column pinning should be ignored. If ignoreColumnsOrder is set to true,
this option will always be considered as set to true.
let ignorePinning = this.exportOptions.ignorePinning;
this.exportOptions.ignorePinning = true;
- **columnWidth**: `number` — Gets the width of the columns in the exported excel file.
let width = this.exportOptions.columnWidth;
- **rowHeight**: `number` — Gets the height of the rows in the exported excel file.
let height = this.exportOptions.rowHeight;
- **worksheetName**: `string` — Gets the name of the worksheet in the exported excel file.
let worksheetName = this.exportOptions.worksheetName;

### [IgxExcelExporterService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelExporterService)
**Ignite UI for Angular Excel Exporter Service** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter_excel.html)

The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from both raw data
(array) or from an IgxGrid.

Example:
public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

constructor(private excelExportService: IgxExcelExporterService) {
}

this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("FileName"));

- **constructor**(): IgxExcelExporterService
- **exportEnded**: `EventEmitter<IExcelExportEndedEventArgs>` — This event is emitted when the export process finishes.
this.exporterService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => {
// put event handler code here
});

### [IgxExcelStyleClearFiltersComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleClearFiltersComponent)
A component used for presenting Excel style clear filters UI.

- **constructor**(esf: BaseFilteringComponent, platform: PlatformUtil): IgxExcelStyleClearFiltersComponent
- **esf**: `BaseFilteringComponent`

### [IgxExcelStyleColumnOperationsTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleColumnOperationsTemplateDirective)

- **constructor**(): IgxExcelStyleColumnOperationsTemplateDirective

### [IgxExcelStyleConditionalFilterComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleConditionalFilterComponent)
A component used for presenting Excel style conditional filter UI.

- **constructor**(esf: BaseFilteringComponent, platform: PlatformUtil): IgxExcelStyleConditionalFilterComponent
- **esf**: `BaseFilteringComponent`
- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.

### [IgxExcelStyleFilterOperationsTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleFilterOperationsTemplateDirective)

- **constructor**(): IgxExcelStyleFilterOperationsTemplateDirective

### [IgxExcelStyleHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleHeaderComponent)
A component used for presenting Excel style header UI.

- **constructor**(esf: BaseFilteringComponent): IgxExcelStyleHeaderComponent
- **esf**: `BaseFilteringComponent`
- **showHiding**: `boolean` — Sets whether the column hiding icon should be shown in the header.
Default value is false.
- **showPinning**: `boolean` — Sets whether the column pinning icon should be shown in the header.
Default value is false.
- **showSelecting**: `boolean` — Sets whether the column selecting icon should be shown in the header.
Default value is false.

### [IgxExcelStyleHidingComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleHidingComponent)
A component used for presenting Excel style column hiding UI.

- **constructor**(esf: BaseFilteringComponent): IgxExcelStyleHidingComponent
- **esf**: `BaseFilteringComponent`

### [IgxExcelStyleLoadingValuesTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleLoadingValuesTemplateDirective)

- **constructor**(template: TemplateRef<undefined>): IgxExcelStyleLoadingValuesTemplateDirective
- **template**: `TemplateRef<undefined>`
- static **ngTemplateContextGuard**(_dir: IgxExcelStyleLoadingValuesTemplateDirective, ctx: unknown): ctx

### [IgxExcelStyleMovingComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleMovingComponent)
A component used for presenting Excel style column moving UI.

- **constructor**(esf: BaseFilteringComponent): IgxExcelStyleMovingComponent
- **esf**: `BaseFilteringComponent`

### [IgxExcelStylePinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStylePinningComponent)
A component used for presenting Excel style column pinning UI.

- **constructor**(esf: BaseFilteringComponent): IgxExcelStylePinningComponent
- **esf**: `BaseFilteringComponent`

### [IgxExcelStyleSearchComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleSearchComponent)
A component used for presenting Excel style search UI.

- **constructor**(cdr: ChangeDetectorRef, esf: BaseFilteringComponent, platform: PlatformUtil): IgxExcelStyleSearchComponent
- **cdr**: `ChangeDetectorRef`
- **esf**: `BaseFilteringComponent`
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.

### [IgxExcelStyleSelectingComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleSelectingComponent)
A component used for presenting Excel style conditional filter UI.

- **constructor**(esf: BaseFilteringComponent): IgxExcelStyleSelectingComponent
- **esf**: `BaseFilteringComponent`

### [IgxExcelStyleSortingComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelStyleSortingComponent)
A component used for presenting Excel style column sorting UI.

- **constructor**(esf: BaseFilteringComponent, cdr: ChangeDetectorRef): IgxExcelStyleSortingComponent
- **esf**: `BaseFilteringComponent`
- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.

### [IgxExcelTextDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExcelTextDirective)

- **constructor**(): IgxExcelTextDirective

### [IgxExpansionPanelBodyComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExpansionPanelBodyComponent)

- **constructor**(panel: IgxExpansionPanelBase, element: ElementRef<any>, cdr: ChangeDetectorRef): IgxExpansionPanelBodyComponent
- **cdr**: `ChangeDetectorRef`
- **element**: `ElementRef<any>`
- **panel**: `IgxExpansionPanelBase`
- **role**: `string` — Gets/sets the role attribute of the panel body
Default is 'region';
Get
 const currentRole = this.panel.body.role;

Set
 this.panel.body.role = 'content';

 <igx-expansion-panel-body [role]="'custom'"></igx-expansion-panel-body>
- **label**: `string` — Gets the aria-label attribute of the panel body
Defaults to the panel id with '-region' in the end;
Get
 const currentLabel = this.panel.body.label;
- **labelledBy**: `string` — Gets the aria-labelledby attribute of the panel body
Defaults to the panel header id;
Get
 const currentLabel = this.panel.body.labelledBy;

### [IgxExpansionPanelComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExpansionPanelComponent)

- **constructor**(animationService: AnimationService, cdr: ChangeDetectorRef, elementRef?: ElementRef<any>): IgxExpansionPanelComponent
- **collapsed**: `boolean` — Gets/sets whether the component is collapsed (its content is hidden)
Get
 const myPanelState: boolean = this.panel.collapsed;

Set
 this.panel.collapsed = true;


Two-way data binding:
<igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
- **contentCollapsed**: `EventEmitter<IExpansionPanelEventArgs>` — Emitted when the expansion panel finishes collapsing
 handleCollapsed(event: IExpansionPanelEventArgs)

 <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
     ...
 </igx-expansion-panel>
- **contentCollapsing**: `EventEmitter<IExpansionPanelCancelableEventArgs>` — Emitted when the expansion panel starts collapsing
 handleCollapsing(event: IExpansionPanelCancelableEventArgs)

 <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
     ...
 </igx-expansion-panel>
- **contentExpanded**: `EventEmitter<IExpansionPanelEventArgs>` — Emitted when the expansion panel finishes expanding
 handleExpanded(event: IExpansionPanelEventArgs)

 <igx-expansion-panel (contentExpanded)="handleExpanded($event)">
     ...
 </igx-expansion-panel>
- **contentExpanding**: `EventEmitter<IExpansionPanelCancelableEventArgs>` — Emitted when the expansion panel starts expanding
 handleExpanding(event: IExpansionPanelCancelableEventArgs)

 <igx-expansion-panel (contentExpanding)="handleExpanding($event)">
     ...
 </igx-expansion-panel>
- **id**: `string` — Sets/gets the id of the expansion panel component.
If not set, id will have value "igx-expansion-panel-0";
<igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>

let panelId =  this.panel.id;
- **animationSettings**: `ToggleAnimationSettings` — Sets/gets the animation settings of the expansion panel component
Open and Close animation should be passed

Get
 const currentAnimations = this.panel.animationSettings;

Set
 import { slideInLeft, slideOutRight } from 'igniteui-angular';
 ...
 this.panel.animationsSettings = {
     openAnimation: slideInLeft,
     closeAnimation: slideOutRight
};

or via template
 import { slideInLeft, slideOutRight } from 'igniteui-angular';
 ...
 myCustomAnimationObject = {
     openAnimation: slideInLeft,
     closeAnimation: slideOutRight
};
html
 <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
 ...
 </igx-expansion-panel>
```
- **close**(evt?: Event): void
- **collapse**(evt?: Event): void — Collapses the panel

 <igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
- **expand**(evt?: Event): void — Expands the panel

 <igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
- **open**(evt?: Event): void
- **toggle**(evt?: Event): void — Toggles the panel

 <igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>

### [IgxExpansionPanelHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExpansionPanelHeaderComponent)

- **constructor**(panel: IgxExpansionPanelBase, cdr: ChangeDetectorRef, elementRef: ElementRef<any>): IgxExpansionPanelHeaderComponent
- **cdr**: `ChangeDetectorRef`
- **elementRef**: `ElementRef<any>`
- **iconPosition**: `ExpansionPanelHeaderIconPosition` — Gets/sets the position of the expansion-panel-header expand/collapse icon
Accepts left, right or none
 const currentIconPosition = this.panel.header.iconPosition;

Set
 this.panel.header.iconPosition = 'left';

 <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
- **id**: `string` — Sets/gets the id of the expansion panel header.
let panelHeaderId =  this.panel.header.id;
- **interaction**: `EventEmitter<IExpansionPanelCancelableEventArgs>` — Emitted whenever a user interacts with the header host
 handleInteraction(event: IExpansionPanelCancelableEventArgs) {
 ...
}

 <igx-expansion-panel-header (interaction)="handleInteraction($event)">
     ...
 </igx-expansion-panel-header>
- **lv**: `string` — Gets/sets the aria-level attribute of the header
Get
 const currentAriaLevel = this.panel.header.lv;

Set
 this.panel.header.lv = '5';

 <igx-expansion-panel-header [lv]="myCustomLevel"></igx-expansion-panel-header>
- **panel**: `IgxExpansionPanelBase`
- **role**: `string` — Gets/sets the role attribute of the header
Get
 const currentRole = this.panel.header.role;

Set
 this.panel.header.role = '5';

 <igx-expansion-panel-header [role]="'custom'"></igx-expansion-panel-header>
- **disabled**: `boolean` — Gets/sets the whether the header is disabled
When disabled, the header will not handle user events and will stop their propagation

 const isDisabled = this.panel.header.disabled;

Set
 this.panel.header.disabled = true;

 <igx-expansion-panel-header [disabled]="true">
    ...
 </igx-expansion-panel-header>
- **iconRef**: `ElementRef<any>` — Returns a reference to the igx-expansion-panel-icon element;
If iconPosition is NONE - return null;

### [IgxExporterOptionsBase](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxExporterOptionsBase)

- **constructor**(fileName: string, _fileExtension: string): IgxExporterOptionsBase
- **alwaysExportHeaders**: `boolean` — Specifies whether the headers should be exported if there is no data.
let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders;
this.exportOptions.alwaysExportHeaders = false;
- **exportSummaries**: `boolean` — Specifies whether the exported data should include column summaries.
let exportSummaries = this.exportOptions.exportSummaries;
this.exportOptions.exportSummaries = true;
- **freezeHeaders**: `boolean` — Specifies whether the exported data should have frozen headers.
let freezeHeaders = this.exportOptions.freezeHeaders;
this.exportOptions.freezeHeaders = true;
- **ignoreColumnsOrder**: `boolean` — Specifies if the exporter should ignore the current column order in the IgxGrid.
let ignoreColumnsOrder = this.exportOptions.ignoreColumnsOrder;
this.exportOptions.ignoreColumnsOrder = true;
- **ignoreColumnsVisibility**: `boolean` — Specifies whether hidden columns should be exported.
let ignoreColumnsVisibility = this.exportOptions.ignoreColumnsVisibility;
this.exportOptions.ignoreColumnsVisibility = true;
- **ignoreFiltering**: `boolean` — Specifies whether filtered out rows should be exported.
let ignoreFiltering = this.exportOptions.ignoreFiltering;
this.exportOptions.ignoreFiltering = true;
- **ignoreGrouping**: `boolean` — Specifies whether the exported data should be grouped as in the provided IgxGrid.
let ignoreGrouping = this.exportOptions.ignoreGrouping;
this.exportOptions.ignoreGrouping = true;
- **ignoreMultiColumnHeaders**: `boolean` — Specifies whether the exported data should include multi column headers as in the provided IgxGrid.
let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders;
this.exportOptions.ignoreMultiColumnHeaders = true;
- **ignoreSorting**: `boolean` — Specifies whether the exported data should be sorted as in the provided IgxGrid.
When you export grouped data, setting ignoreSorting to true will cause
the grouping to fail because it relies on the sorting of the records.
let ignoreSorting = this.exportOptions.ignoreSorting;
this.exportOptions.ignoreSorting = true;
- **fileName**: `string` — Gets the file name which will be used for the exporting operation.
let fileName = this.exportOptions.fileName;

### [IgxFilterCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFilterCellTemplateDirective)

- **constructor**(template: TemplateRef<IgxColumnTemplateContext>): IgxFilterCellTemplateDirective
- **template**: `TemplateRef<IgxColumnTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxFilterCellTemplateDirective, context: unknown): context

### [IgxFilterDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFilterDirective)

- **constructor**(): IgxFilterDirective
- **filtered**: `EventEmitter<any>`
- **filtering**: `EventEmitter<any>`
- **filterOptions**: `IgxFilterOptions`
- **ngOnChanges**(changes: SimpleChanges): void — A callback method that is invoked immediately after the
default change detector has checked data-bound properties
if at least one has changed, and before the view and content
children are checked.

### [IgxFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFilteringOperand)
Provides base filtering operations
Implementations should be Singleton

- **constructor**(): IgxFilteringOperand
- **operations**: `IFilteringOperation[]`
- **append**(operation: IFilteringOperation): void — Adds a new condition to the filtering operations.
- **condition**(name: string): IFilteringOperation — Returns an instance of the condition with the specified name.
- **conditionList**(): string[] — Returns an array of names of the conditions which are visible in the filtering UI
- static **instance**(): IgxFilteringOperand

### [IgxFilterOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFilterOptions)

- **constructor**(): IgxFilterOptions
- **inputValue**: `string`
- **items**: `any[]`
- **key**: `string | string[]`
- **formatter**(valueToTest: string): string
- **get_value**(item: any, key: string): string
- **matchFn**(valueToTest: string, inputValue: string): boolean
- **metConditionFn**(item: any): void
- **overdueConditionFn**(item: any): void

### [IgxFilterPipe](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFilterPipe)

- **constructor**(): IgxFilterPipe
- **transform**(items: any[], options: IgxFilterOptions): any[]

### [IgxFlatTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFlatTransactionFactory)
Factory service for instantiating TransactionServices

- **constructor**(): IgxFlatTransactionFactory
- **create**(type: TRANSACTION_TYPE): TransactionService<Transaction, State> — Creates a new Transaction service instance depending on the specified type.

### [IgxFlexDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFlexDirective)

- **constructor**(): IgxFlexDirective
- **basis**: `string` — Applies the flex-basis attribute to an element that uses the directive.

Default value is auto.

Other possible values include content, max-content, min-content, fit-content.

<div igxFlex igxFlexBasis="fit-content">Content</div>
- **flex**: `string` — Applies the directive to an element.

Possible values include igxFlexGrow, igxFlexShrink, igxFlexOrder, igxFlexBasis.

<div igxFlex>Content</div>
- **grow**: `number` — Applies the grow attribute to an element that uses the directive.

Default value is 1.

<div>
   <div igxFlex igxFlexGrow="0">Content1</div>
   <div igxFlex igxFlexGrow="1">Content2</div>
   <div igxFlex igxFlexGrow="0">Content3</div>
</div>
- **order**: `number` — Applies the order attribute to an element that uses the directive.

Default value is 0.

<div>
   <div igxFlex igxFlexOrder="1">Content1</div>
   <div igxFlex igxFlexOrder="0">Content2</div>
   <div igxFlex igxFlexOrder="2">Content3</div>
</div>
- **shrink**: `number` — Applies the shrink attribute to an element that uses the directive.

Default value is 1.

<div>
   <div igxFlex igxFlexShrink="1">Content1</div>
   <div igxFlex igxFlexShrink="0">Content2</div>
   <div igxFlex igxFlexShrink="1">Content3</div>
</div>

### [IgxFocusDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFocusDirective)

- **constructor**(element: ElementRef<any>, comp?: any[], control?: any[]): IgxFocusDirective
- **focused**: `boolean` — Returns the state of the igxFocus.
@ViewChild('focusContainer', {read: IgxFocusDirective})
public igxFocus: IgxFocusDirective;
let isFocusOn = this.igxFocus.focused;
- **nativeElement**: `any` — Gets the native element of the igxFocus.
@ViewChild('focusContainer', {read: IgxFocusDirective})
public igxFocus: IgxFocusDirective;
let igxFocusNativeElement = this.igxFocus.nativeElement;
- **trigger**(): void — Triggers the igxFocus state.
@ViewChild('focusContainer', {read: IgxFocusDirective})
public igxFocus: IgxFocusDirective;
this.igxFocus.trigger();

### [IgxFocusTrapDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxFocusTrapDirective)

- **focusTrap**: `boolean`

### [IgxForOfContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxForOfContext)

- **constructor**($implicit: T, igxForOf: U, index: number, count: number): IgxForOfContext<T, U>
- **$implicit**: `T`
- **count**: `number`
- **igxForOf**: `U`
- **index**: `number`
- **even**: `boolean` — A function that returns whether the element is even or not
- **first**: `boolean` — A function that returns whether the element is the first or not
- **last**: `boolean` — A function that returns whether the element is the last or not
- **odd**: `boolean` — A function that returns whether the element is odd or not

### [IgxForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxForOfDirective)

- **constructor**(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T, NgIterable<T>>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService, platformUtil: PlatformUtil, document: any): IgxForOfDirective<T, U>
- **beforeViewDestroyed**: `EventEmitter<EmbeddedViewRef<any>>`
- **cdr**: `ChangeDetectorRef`
- **chunkLoad**: `EventEmitter<IForOfState>` — An event that is emitted after a new chunk has been loaded.
<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template>

loadChunk(e){
alert("chunk loaded!");
}
- **chunkPreload**: `EventEmitter<IForOfState>` — An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount.
Can be used for implementing remote load on demand for the igxFor data.
<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template>

chunkPreload(e){
alert("chunk is loading!");
}
- **contentSizeChange**: `EventEmitter<any>` — An event that is emitted after the rendered content size of the igxForOf has been changed.
- **dataChanged**: `EventEmitter<IForOfDataChangeEventArgs>` — An event that is emitted after data has been changed.
<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template>

dataChanged(e){
alert("data changed!");
}
- **igxForContainerSize**: `any` — Sets the px-affixed size of the container along the axis of scrolling.
For "horizontal" orientation this value is the width of the container and for "vertical" is the height.
<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'"
     [igxForScrollOrientation]="'horizontal'">
</ng-template>
- **igxForItemSize**: `any` — Sets the px-affixed size of the item along the axis of scrolling.
For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row.
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template>
- **igxForOf**: `U & T[]` — Sets the data to be rendered.
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
- **igxForScrollContainer**: `any` — Optionally pass the parent igxFor instance to create a virtual template scrolling both horizontally and vertically.
<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data"
      [igxForScrollOrientation]="'vertical'"
      [igxForContainerSize]="'500px'"
      [igxForItemSize]="'50px'"
      let-rowIndex="index">
      <div [style.display]="'flex'" [style.height]="'50px'">
          <ng-template #childContainer igxFor let-item [igxForOf]="data"
              [igxForScrollOrientation]="'horizontal'"
              [igxForScrollContainer]="parentVirtDir"
              [igxForContainerSize]="'500px'">
                  <div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div>
          </ng-template>
      </div>
</ng-template>
- **igxForScrollOrientation**: `string` — Specifies the scroll orientation.
Scroll orientation can be "vertical" or "horizontal".
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
- **igxForSizePropName**: `any` — Sets the property name from which to read the size in the data object.
- **state**: `IForOfState` — The current state of the directive. It contains startIndex and chunkSize.
state.startIndex - The index of the item at which the current visible chunk begins.
state.chunkSize - The number of items the current visible chunk holds.
These options can be used when implementing remote virtualization as they provide the necessary state information.
const gridState = this.parentVirtDir.state;
- **displayContainer**: `HTMLElement`
- **igxForTotalItemCount**: `number` — The total count of the virtual data items, when using remote service.
Similar to the property totalItemCount, but this will allow setting the data count into the template.
<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
 [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>
- **igxForTrackBy**: `TrackByFunction<T>` — Gets the function used to track changes in the items collection.
By default the object references are compared. However this can be optimized if you have unique identifier
value that can be used for the comparison instead of the object ref or if you have some other property values
in the item object that should be tracked for changes.
This option is similar to ngForTrackBy.
const trackFunc = this.parentVirtDir.igxForTrackBy;
- **scrollPosition**: `number` — Gets/Sets the scroll position.
const position = directive.scrollPosition;
directive.scrollPosition = value;
- **totalItemCount**: `number` — The total count of the virtual data items, when using remote service.
this.parentVirtDir.totalItemCount = data.Count;
- **virtualHelper**: `HTMLElement`
- **addScroll**(add: number): boolean — Shifts the scroll thumb position.
this.parentVirtDir.addScroll(5);
- **addScrollTop**(add: number): boolean — Shifts the scroll thumb position.
this.parentVirtDir.addScroll(5);
- **getIndexAtScroll**(scrollOffset: number): number — Returns the index of the element at the specified offset.
this.parentVirtDir.getIndexAtScroll(100);
- **getItemCountInView**(): number — Returns the total number of items that are fully visible.
this.parentVirtDir.getItemCountInView();
- **getScroll**(): HTMLElement — Returns a reference to the scrollbar DOM element.
This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation.
dir.getScroll();
- **getScrollForIndex**(index: number, bottom?: boolean): number — Returns the scroll offset of the element at the specified index.
this.parentVirtDir.getScrollForIndex(1);
- **getSizeAt**(index: number): number — Returns the size of the element at the specified index.
this.parentVirtDir.getSizeAt(1);
- **isIndexOutsideView**(index: number): boolean — Returns whether the target index is outside the view.
this.parentVirtDir.isIndexOutsideView(10);
- **isScrollable**(): boolean
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **scrollNext**(): void — Scrolls by one item into the appropriate next direction.
For "horizontal" orientation that will be the right column and for "vertical" that is the lower row.
this.parentVirtDir.scrollNext();
- **scrollNextPage**(): void — Scrolls by one page into the appropriate next direction.
For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom.
this.parentVirtDir.scrollNextPage();
- **scrollPrev**(): void — Scrolls by one item into the appropriate previous direction.
For "horizontal" orientation that will be the left column and for "vertical" that is the upper row.
this.parentVirtDir.scrollPrev();
- **scrollPrevPage**(): void — Scrolls by one page into the appropriate previous direction.
For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top.
this.parentVirtDir.scrollPrevPage();
- **scrollTo**(index: number): void — Scrolls to the specified index.
this.parentVirtDir.scrollTo(5);
- **verticalScrollHandler**(event: any): void

### [IgxGridActionButtonComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridActionButtonComponent)

- **constructor**(): IgxGridActionButtonComponent
- **actionClick**: `EventEmitter<Event>` — Event emitted when action button is clicked.
- **asMenuItem**: `boolean` — Whether button action is rendered in menu and should container text label.
- **classNames**: `string` — Additional Menu item container element classes.
- **container**: `ElementRef<any>`
- **iconName**: `string` — Name of the icon to display in the button.
- **iconSet**: `string` — The name of the icon set. Used in case the icon is from a different icon set.
- **labelText**: `string` — The text of the label.

### [IgxGridActionsBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridActionsBaseDirective)

- **constructor**(iconService: IgxIconService, differs: IterableDiffers): IgxGridActionsBaseDirective
- **asMenuItems**: `boolean` — Gets/Sets if the action buttons will be rendered as menu items. When in menu, items will be rendered with text label.

### [IgxGridCell](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridCell)
Interface representing a cell in the grid. It is essentially the blueprint to a cell object.
Contains definitions of properties and methods, relevant to a cell

- **grid**: `GridType` — Returns the grid containing the cell.
- **active**: `boolean` — Indicates whether the cell is currently active (focused).
- **column**: `ColumnType` — Represents the column that the cell belongs to.
- **editable**: `boolean` — Indicates whether the cell can be edited.
- **editMode**: `boolean` — Indicates whether the cell is currently in edit mode.
- **editValue**: `any` — The value to display when the cell is in edit mode.
- **id**: `any` — Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell.
- **row**: `RowType` — Represents the row that the cell belongs to
- **selected**: `boolean` — Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is.
- **validation**: `IGridValidationState` — Optional; An object representing the validation state of the cell.
Whether it's valid or invalid, and if it has errors
- **value**: `any` — The current value of the cell.
- **width**: `string` — The CSS width of the cell as a string.
- **update**(val: any): void — Updates the cell value.

cell.update(newValue);

### [IgxGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridComponent)
Grid provides a way to present and manipulate tabular data.

- **constructor**(validation: IgxGridValidationService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxGridComponent
- **dataPreLoad**: `EventEmitter<IForOfState>` — Emitted when a new chunk of data is loaded from virtualization.
- **dropAreaTemplate**: `TemplateRef<void>` — Gets/Sets the template that will be rendered as a GroupBy drop area.
- **groupingDone**: `EventEmitter<IGroupingDoneEventArgs>` — Emitted when columns are grouped/ungrouped.
- **groupingExpansionStateChange**: `EventEmitter<IGroupByExpandState[]>` — Emitted when groups are expanded/collapsed.
- **groupingExpressionsChange**: `EventEmitter<IGroupingExpression[]>` — Emitted when grouping is performed.
- **groupsExpanded**: `boolean` — Gets/Sets whether created groups are rendered expanded or collapsed.
- **id**: `string` — Gets/Sets the value of the id attribute.
- **data**: `any[]` — Gets/Sets the array of data that populates the component.
- **detailTemplate**: `TemplateRef<IgxGridMasterDetailContext>` — Returns a reference to the master-detail template.
let detailTemplate = this.grid.detailTemplate;
- **dropAreaMessage**: `string`
- **groupByRowSelectorTemplate**: `TemplateRef<IgxGroupByRowSelectorTemplateContext>` — Optional
The template for the group row selector.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **groupingExpansionState**: `IGroupByExpandState[]` — Gets/Sets a list of expansion states for group rows.
- **groupingExpressions**: `IGroupingExpression[]` — Gets/Sets the group by state.
- **groupRowTemplate**: `TemplateRef<IgxGroupByRowTemplateContext>` — Optional
The template for group-by rows.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **groupsRecords**: `IGroupByRecord[]` — Gets the hierarchical representation of the group by records.
- **groupStrategy**: `IGridGroupingStrategy` — Gets/Sets the grouping strategy of the grid.
- **hideGroupedColumns**: `boolean` — Gets/Sets whether the grouped columns should be hidden.
- **selectedCells**: `CellType[]` — Returns an array of the selected IgxGridCells.
- **showGroupArea**: `boolean` — Returns whether the IgxGridComponent has group area.
- **totalItemCount**: `number`
- **clearGrouping**(name?: string | string[]): void — Clears grouping for particular column, array of columns or all columns.
- **deselectRowsInGroup**(groupRow: IGroupByRecord): void — Deselect all rows within a group.
- **fullyExpandGroup**(groupRow: IGroupByRecord): void — Expands the specified group and all of its parent groups.
- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getRowByIndex**(index: number): RowType — Returns the IgxGridRow by index.
- **getRowByKey**(key: any): RowType — Returns IgxGridRow object by the specified primary key.
- **getSelectedData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].
- **groupBy**(expression: IGroupingExpression | IGroupingExpression[]): void — Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one.
- **isExpandedGroup**(group: IGroupByRecord): boolean — Returns if a group is expanded or not.
- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id.
- **selectRowsInGroup**(groupRow: IGroupByRecord, clearPrevSelection?: boolean): void — Select all rows within a group.
- **toggleAllGroupRows**(): void — Toggles the expansion state of all group rows recursively.
- **toggleGroup**(groupRow: IGroupByRecord): void — Toggles the expansion state of a group.
- **unpinRow**(rowID: any): boolean — Unpin the row by its id.

### [IgxGridEditingActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridEditingActionsComponent)
Grid Editing Actions for the Action Strip

- **constructor**(iconService: IgxIconService, differs: IterableDiffers): IgxGridEditingActionsComponent
- **addChild**: `boolean` — An input to enable/disable action strip child row adding button
- **deleteRow**: `boolean` — An input to enable/disable action strip row deleting button
- **editRow**: `boolean` — An input to enable/disable action strip row editing button
- **addRow**: `boolean`
- **hasChildren**: `boolean`
- **startEdit**(event?: any): void — Enter row or cell edit mode depending the grid rowEditable option

### [IgxGridExcelStyleFilteringComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridExcelStyleFilteringComponent)
A component used for presenting Excel style filtering UI for a specific column.
It is used internally in the Grid, but could also be hosted in a container outside of it.

Example:
<igx-grid-excel-style-filtering
    [column]="grid1.columns[0]">
</igx-grid-excel-style-filtering>

- **constructor**(cdr: ChangeDetectorRef, element: ElementRef<HTMLElement>, platform: PlatformUtil, document: any, gridAPI?: GridType): IgxGridExcelStyleFilteringComponent
- **mainDropdown**: `ElementRef<HTMLElement>`
- **column**: `ColumnType` — Returns the current column.
- **maxHeight**: `string` — Gets the maximum height.

Setting value in template:
[maxHeight]="'<number><unit (px|rem|etc..)>'"


Example for setting a value:
[maxHeight]="'700px'"
- **minHeight**: `string` — Gets the minimum height.

Setting value in template:
[minHeight]="'<number><unit (px|rem|etc..)>'"


Example for setting a value:
[minHeight]="'700px'"

### [IgxGridFooterComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridFooterComponent)

- **constructor**(): IgxGridFooterComponent

### [IgxGridForOfContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridForOfContext)

- **constructor**($implicit: T, igxGridForOf: U, index: number, count: number): IgxGridForOfContext<T, U>
- **igxGridForOf**: `U`

### [IgxGridForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridForOfDirective)

- **constructor**(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T, NgIterable<T>>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, _platformUtil: PlatformUtil, _document: any, syncScrollService: IgxForOfScrollSyncService, syncService: IgxForOfSyncService): IgxGridForOfDirective<T, U>
- **igxGridForOfUniqueSizeCache**: `boolean`
- **igxGridForOfVariableSizes**: `boolean`
- **igxGridForOf**: `U & T[]`

### [IgxGridPinningActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridPinningActionsComponent)
Grid Pinning Actions for the Action Strip

- **constructor**(iconService: IgxIconService, differs: IterableDiffers): IgxGridPinningActionsComponent
- **pin**(event?: any): void — Pin the row according to the context.
- **scrollToRow**(event: any): void
- **unpin**(event?: any): void — Unpin the row according to the context.

### [IgxGridRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **parent**: `RowType` — Optional
Contains the parent row of the current row, if it has one.
If the parent row exist, it means that the current row is a child row
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxGridStateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridStateDirective)

- **stateParsed**: `EventEmitter<IGridState>` — Event emitted when set state is called with a string.
Returns the parsed state object so that it can be further modified before applying to the grid.
this.state.stateParsed.subscribe(parsedState => parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance()});
- **options**: `IGridStateOptions` — An object with options determining if a certain feature state should be saved.
<igx-grid [igxGridState]="options"></igx-grid>

public options = {selection: false, advancedFiltering: false};
- **getState**(serialize: boolean, features?: keyof IGridStateOptions | keyof IGridStateOptions[]): string | IGridState — Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the options property.
- **setState**(state: string | IGridState, features?: keyof IGridStateOptions | keyof IGridStateOptions[]): void — Restores grid features' state based on the IGridState object passed as an argument.

### [IgxGridToolbarActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarActionsComponent)
Provides a way to template the action portion of the toolbar in the grid.

- **constructor**(): IgxGridToolbarActionsComponent

### [IgxGridToolbarAdvancedFilteringComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarAdvancedFilteringComponent)
Provides a pre-configured button to open the advanced filtering dialog of the grid.

- **constructor**(toolbar: IgxToolbarToken): IgxGridToolbarAdvancedFilteringComponent
- **overlaySettings**: `OverlaySettings`

### [IgxGridToolbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarComponent)
Provides a context-aware container component for UI operations for the grid components.

- **constructor**(api: GridServiceType, iconService: IgxIconService, element: ElementRef<HTMLElement>): IgxGridToolbarComponent
- **showProgress**: `boolean` — When enabled, shows the indeterminate progress bar.
- **grid**: `GridType` — Gets/sets the grid component for the toolbar component.
- **nativeElement**: `HTMLElement` — Returns the native DOM element of the toolbar component

### [IgxGridToolbarDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarDirective)

- **constructor**(template: TemplateRef<IgxGridToolbarTemplateContext>): IgxGridToolbarDirective
- **template**: `TemplateRef<IgxGridToolbarTemplateContext>`
- static **ngTemplateContextGuard**(_dir: IgxGridToolbarDirective, ctx: unknown): ctx

### [IgxGridToolbarExporterComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarExporterComponent)
Provides a pre-configured exporter component for the grid.

- **constructor**(toolbar: IgxToolbarToken, excelExporter: IgxExcelExporterService, csvExporter: IgxCsvExporterService): IgxGridToolbarExporterComponent
- **exportCSV**: `boolean` — Show entry for CSV export.
- **exportEnded**: `EventEmitter<void>` — Emitted on successful ending of an export operation.
- **exportExcel**: `boolean` — Show entry for Excel export.
- **exportStarted**: `EventEmitter<IgxExporterEvent>` — Emitted when starting an export operation. Re-emitted additionally
by the grid itself.
- **filename**: `string` — The name for the exported file.
- **export**(type: "excel" | "csv"): void — Export the grid's data

### [IgxGridToolbarHidingComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarHidingComponent)
Provides a pre-configured column hiding component for the grid.

- **constructor**(toolbar: IgxToolbarToken): IgxGridToolbarHidingComponent

### [IgxGridToolbarPinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarPinningComponent)
Provides a pre-configured column pinning component for the grid.

- **constructor**(toolbar: IgxToolbarToken): IgxGridToolbarPinningComponent

### [IgxGridToolbarTitleComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGridToolbarTitleComponent)
Provides a way to template the title portion of the toolbar in the grid.

- **constructor**(): IgxGridToolbarTitleComponent

### [IgxGroupByRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGroupByRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **grid**: `GridType` — The grid that contains the row.
- **index**: `number` — Returns the row index.
- **isGroupByRow**: `boolean` — Returns always true, because this is in instance of an IgxGroupByRow.
- **children**: `RowType[]` — Optional
Contains the child rows of the current row, if there are any.
- **expanded**: `boolean` — Optional
Indicates whether the current row is expanded.
The value is true, if the row is expanded and false, if it is collapsed
- **groupRow**: `IGroupByRecord` — The IGroupByRecord object, representing the group record, if the row is a GroupByRow.
- **selected**: `boolean` — Optional
Indicates whether the current row is selected
- **viewIndex**: `number` — Returns the view index calculated per the grid page.
- **isActive**(): boolean
- **toggle**(): void — Toggles the group row expanded/collapsed state.
groupRow.toggle()

### [IgxGroupedTreeGridSorting](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGroupedTreeGridSorting)
Represents a class implementing the IGridSortingStrategy interface.
It provides sorting functionality for grid data based on sorting expressions.

- **constructor**(): IgxGroupedTreeGridSorting
- static **instance**(): IgxGroupedTreeGridSorting

### [IgxGrouping](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxGrouping)
Represents a class implementing the IGridGroupingStrategy interface and extending the IgxSorting class.
It provides a method to group data based on the given grouping state.

- **constructor**(): IgxGrouping
- **groupBy**(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult: IGroupByResult): IGroupByResult — Groups the provided data based on the given grouping state.
Returns an object containing the result of the grouping operation.

### [IgxHierarchicalGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxHierarchicalGridComponent)
Hierarchical grid

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxHierarchicalGridComponent
- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree` — Gets/Sets the advanced filtering state.
- **data**: `any[]` — Returns an array of data set to the IgxHierarchicalGridComponent.
let filteredData = this.grid.filteredData;
- **expandChildren**: `boolean` — Gets if all immediate children of the IgxHierarchicalGridComponent previously have been set to be expanded/collapsed.
If previously set and some rows have been manually expanded/collapsed it will still return the last set value.
const expanded = this.grid.expandChildren;
- **foreignKey**: `any` — Gets the unique identifier of the parent row. It may be a string or number if primaryKey of the
parent grid is set or an object reference of the parent record otherwise.
const foreignKey = this.grid.foreignKey;
- **id**: `string` — Represents the unique identifier of the grid.
- **schema**: `EntityType[]`
- **selectedCells**: `CellType[]` — Returns an array of the selected IgxGridCells.
- **totalItemCount**: `number`
- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getRowByIndex**(index: number): RowType — Returns the RowType by index.
- **getRowByKey**(key: any): RowType — Returns the RowType by key.
- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id.
- **unpinRow**(rowID: any): boolean — Unpin the row by its id.

### [IgxHierarchicalGridRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxHierarchicalGridRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **cells**: `CellType[]` — Optional
A list or an array of cells, that belong to the row
- **hasChildren**: `boolean` — Optional
Indicates whether the current row has any child rows
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxHierarchicalTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxHierarchicalTransactionFactory)
Factory service for instantiating HierarchicalTransactionServices

- **constructor**(): IgxHierarchicalTransactionFactory
- **create**(type: TRANSACTION_TYPE): HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState> — Creates a new HierarchialTransaction service instance depending on the specified type.

### [IgxHintDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxHintDirective)

- **constructor**(): IgxHintDirective
- **isPositionEnd**: `boolean` — Sets/gets whether the hint position is at the end.
Default value is false.
@ViewChild('hint', {read: IgxHintDirective})
public igxHint: IgxHintDirective;
this.igxHint.isPositionEnd = true;

let isHintPositionEnd = this.igxHint.isPositionEnd;
- **isPositionStart**: `boolean` — Sets/gets whether the hint position is at the start.
Default value is false.
@ViewChild('hint', {read: IgxHintDirective})
public igxHint: IgxHintDirective;
this.igxHint.isPositionStart = true;

let isHintPositionStart = this.igxHint.isPositionStart;
- **position**: `string` — Gets the position of the hint.
@ViewChild('hint', {read: IgxHintDirective})
public igxHint: IgxHintDirective;
let hintPosition =  this.igxHint.position;

### [igxI18N](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/igxI18N)

- **changei18n**(resourceStrings: IResourceStrings): void — Changes the resource strings for all components in the application
@param resourceStrings to be applied
- **getCurrentResourceStrings**(en: IResourceStrings): IResourceStrings
- static **instance**(): igxI18N

### [IgxIconButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxIconButtonDirective)
The IgxIconButtonDirective provides a way to use an icon as a fully functional button.

- **constructor**(element: ElementRef<any>): IgxIconButtonDirective
- **type**: `IgxIconButtonType`

### [IgxIconComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxIconComponent)
Icon provides a way to include material icons to markup

- **constructor**(el: ElementRef<any>, iconService: IgxIconService, ref: ChangeDetectorRef): IgxIconComponent
- **active**: `boolean` — An
- **ariaHidden**: `boolean` — The aria-hidden attribute of the icon.
 By default is set to 'true'.
- **el**: `ElementRef<any>`
- **family**: `string` — An
- **name**: `string` — Set the name of the icon.
- **getActive**: `boolean` — An accessor that returns the value of the active property.
- **getFamily**: `string` — An accessor that returns the value of the family property.
- **getInactive**: `boolean` — An accessor that returns inactive property.
- **getName**: `string` — An accessor that returns the value of the iconName property.
- **getSvg**: `SafeHtml` — An accessor that returns the underlying SVG image as SafeHtml.

### [IgxIconService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxIconService)
**Ignite UI for Angular Icon Service** -

The Ignite UI Icon Service makes it easy for developers to include custom SVG images and use them with IgxIconComponent.
In addition it could be used to associate a custom class to be applied on IgxIconComponent according to given font-family.

Example:
this.iconService.setFamily('material', { className: 'material-icons', type: 'font' });
this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');

- **constructor**(_sanitizer: DomSanitizer, _httpClient: HttpClient, _platformUtil: PlatformUtil, _themeToken: ThemeToken, _destroyRef: DestroyRef, document: Document): IgxIconService
- **iconLoaded**: `Observable<IgxIconLoadedEvent>` — Observable that emits when an icon is successfully loaded
through a HTTP request.
- **defaultFamily**: `IconFamily` — Returns the default font-family.
  const defaultFamily = this.iconService.defaultFamily;
- **addIconRef**(name: string, family: string, icon: IconMeta): void — Adds an icon reference meta for an icon in a meta family.
 Executes only if no icon reference is found.
  this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });
- **addSvgIcon**(name: string, url: string, family: string, stripMeta: boolean): void — Adds an SVG image to the cache. SVG source is an url.
  this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
- **addSvgIconFromText**(name: string, iconText: string, family: string, stripMeta: boolean): void — Adds an SVG image to the cache. SVG source is its text.
  this.iconService.addSvgIconFromText('simple', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <path d="M74 74h54v54H74" /></svg>', 'svg-flags');
- **familyClassName**(alias: string): string — Returns the custom class, if any, associated to a given font-family.
  const familyClass = this.iconService.familyClassName('material');
- **getIconRef**(name: string, family: string): IconReference — Returns the icon reference meta for an icon in a given family.
  const iconRef = this.iconService.getIconRef('aruba', 'default');
- **getSvgIcon**(name: string, family: string): SafeHtml — Returns the cached SVG image as string.
  const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags');
- **isSvgIconCached**(name: string, family: string): boolean — Returns whether a given SVG image is present in the cache.
  const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
- **registerFamilyAlias**(alias: string, className: string, type: IconType): this — Registers a custom class to be applied to IgxIconComponent for a given font-family.
  this.iconService.registerFamilyAlias('material', 'material-icons');
- **setFamily**(name: string, meta: FamilyMeta): void — Creates a family to className relationship that is applied to the IgxIconComponent
  whenever that family name is used.
  this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
- **setIconRef**(name: string, family: string, icon: IconMeta): void — Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family.
  this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });

### [IgxInputDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxInputDirective)
The igxInput directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs.

- **constructor**(inputGroup: IgxInputGroupBase, ngModel: NgModel, formControl: NgControl, element: ElementRef<HTMLInputElement>, cdr: ChangeDetectorRef, renderer: Renderer2): IgxInputDirective
- **inputGroup**: `IgxInputGroupBase`
- **isInput**: `boolean` — Sets/gets whether the "igx-input-group__input" class is added to the host element.
Default value is false.
- **isTextArea**: `boolean` — Sets/gets whether the "class.igx-input-group__textarea" class is added to the host element.
Default value is false.
- **disabled**: `boolean` — Gets the disabled property
- **focused**: `boolean` — Gets whether the igxInput is focused.
- **hasPlaceholder**: `boolean` — Gets whether the igxInput has a placeholder.
- **isValid**: `boolean` — Gets whether the igxInput is valid.
- **nativeElement**: `HTMLInputElement` — Gets the nativeElement of the igxInput.
- **placeholder**: `string` — Gets the placeholder element of the igxInput.
- **required**: `boolean` — Gets whether the igxInput is required.
- **valid**: `IgxInputState` — Gets the state of the igxInput.
- **value**: `any` — Gets the value property.
- **focus**(): void — Sets a focus on the igxInput.

### [IgxInputGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxInputGroupComponent)

- **constructor**(element: ElementRef<HTMLElement>, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef, themeToken: ThemeToken): IgxInputGroupComponent
- **defaultClass**: `boolean` — Property that enables/disables the auto-generated class of the IgxInputGroupComponent.
By default applied the class is applied.
 @ViewChild("MyInputGroup")
 public inputGroup: IgxInputGroupComponent;
 ngAfterViewInit(){
 this.inputGroup.defaultClass = false;

}
- **element**: `ElementRef<HTMLElement>`
- **suppressInputAutofocus**: `boolean` — Prevents automatically focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).
- **hasBorder**: `boolean` — Returns whether the IgxInputGroupComponent has border.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputBorder = this.inputGroup.hasBorder;
}
- **hasHints**: `boolean` — Returns whether the IgxInputGroupComponent has hints.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputHints = this.inputGroup.hasHints;
}
- **isTypeBootstrap**: `boolean` — Returns true if the IgxInputGroupComponent theme is Bootstrap.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBootstrap = this.inputGroup.isTypeBootstrap;
}
- **isTypeBorder**: `boolean` — Returns whether the IgxInputGroupComponent type is border.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBorder = this.inputGroup.isTypeBorder;
}
- **isTypeBox**: `boolean` — Returns whether the IgxInputGroupComponent type is box.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeBox = this.inputGroup.isTypeBox;
}
- **isTypeFluent**: `boolean` — Returns true if the IgxInputGroupComponent theme is Fluent.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeFluent = this.inputGroup.isTypeFluent;
}
- **isTypeIndigo**: `boolean` — Returns true if the IgxInputGroupComponent theme is Indigo.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeIndigo = this.inputGroup.isTypeIndigo;
}
- **isTypeLine**: `boolean` — Returns whether the IgxInputGroupComponent type is line.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeLine = this.inputGroup.isTypeLine;
}
- **isTypeSearch**: `boolean` — Returns whether the IgxInputGroupComponent type is search.
@ViewChild("MyInputGroup1")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let isTypeSearch = this.inputGroup.isTypeSearch;
}
- **resourceStrings**: `IInputResourceStrings` — Returns the resource strings.
- **theme**: `IgxTheme` — Returns the theme of the input.
The returned value is of type IgxInputGroupType.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit() {
 let inputTheme = this.inputGroup.theme;
}
- **type**: `IgxInputGroupType` — Returns the type of the IgxInputGroupComponent. How the input is styled.
The default is line.
@ViewChild("MyInputGroup")
public inputGroup: IgxInputGroupComponent;
ngAfterViewInit(){
   let inputType = this.inputGroup.type;
}

### [IgxInsertDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxInsertDropStrategy)

- **constructor**(_renderer: Renderer2): IgxInsertDropStrategy
- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void

### [IgxLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxLabelDirective)

- **constructor**(): IgxLabelDirective
- **defaultClass**: `boolean`

### [IgxLayoutDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxLayoutDirective)

- **constructor**(): IgxLayoutDirective
- **dir**: `string` — Sets the default flow direction of the container's children.

Defaults to rows.

 <div
  igxLayout
  igxLayoutDir="row">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
 </div>
- **itemAlign**: `string` — Defines the default behavior for how children are laid out along the corss axis of the current line.

Defaults to flex-start.

Other possible values are flex-end, center, baseline, and stretch.

<div
  igxLayout
  igxLayoutDir="column"
  igxLayoutItemAlign="start">
   <div igxFlex igxFlexGrow="0">1</div>
   <div igxFlex igxFlexGrow="0">2</div>
   <div igxFlex igxFlexGrow="0">3</div>
</div>
- **justify**: `string` — Defines the alignment along the main axis.

Defaults to flex-start which packs the children toward the start line.

Other possible values are flex-end, center, space-between, space-around.

<div
  igxLayout
  igxLayoutDir="column"
  igxLayoutJustify="space-between">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>
- **reverse**: `boolean` — Defines the direction flex children are placed in the flex container.

When set to true, the rows direction goes right to left and columns goes bottom to top.

<div
  igxLayout
  igxLayoutReverse="true">
   <div igxFlex>1</div>
   <div igxFlex>2</div>
   <div igxFlex>3</div>
</div>
- **wrap**: `string` — By default the immediate children will all try to fit onto one line.

The default value nowrap sets this behavior.

Other accepted values are wrap and wrap-reverse.

<div
  igxLayout
  igxLayoutDir="row"
  igxLayoutWrap="wrap">
   <div igxFlex igxFlexGrow="0">1</div>
   <div igxFlex igxFlexGrow="0">2</div>
   <div igxFlex igxFlexGrow="0">3</div>
</div>

### [IgxLinearProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxLinearProgressBarComponent)

- **constructor**(): IgxLinearProgressBarComponent
- **cssClass**: `string`
- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated.
<igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
- **role**: `string` — Sets the value of the role attribute. If not provided it will be automatically set to progressbar.
<igx-linear-bar role="progressbar"></igx-linear-bar>
- **striped**: `boolean` — Set IgxLinearProgressBarComponent to have striped style. By default it is set to false.
<igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
- **textAlign**: `IgxTextAlign` — Set the position that defines where the text is aligned.
Possible options - IgxTextAlign.START (default), IgxTextAlign.CENTER, IgxTextAlign.END.
public positionCenter: IgxTextAlign;
public ngOnInit() {
    this.positionCenter = IgxTextAlign.CENTER;
}
 //...

 <igx-linear-bar [textAlign]="positionCenter"></igx-linear-bar>
- **textTop**: `boolean` — Set the position that defines if the text should be aligned above the progress line. By default, is set to false.
 <igx-linear-bar [textTop]="true"></igx-linear-bar>
- **textVisibility**: `boolean` — Set the text to be visible. By default, it is set to true.
 <igx-linear-bar [textVisibility]="false"></igx-linear-bar>
- **type**: `string` — Set type of the IgxLinearProgressBarComponent. Possible options - default, success, info, warning, and error.
<igx-linear-bar [type]="'error'"></igx-linear-bar>
- **valueMin**: `number`
- **ngAfterContentInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.

### [IgxListActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListActionDirective)
igxListAction is container for the List action
Use it to wrap anything you want to be used as a list action: icon, checkbox...

- **constructor**(): IgxListActionDirective

### [IgxListComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListComponent)
Displays a collection of data items in a templatable list format

- **constructor**(element: ElementRef<any>): IgxListComponent
- **allowLeftPanning**: `boolean` — Sets/gets whether the left panning of an item is allowed.
- **allowRightPanning**: `boolean` — Sets/gets whether the right panning of an item is allowed.
- **children**: `QueryList<IgxListItemComponent>` — Returns a collection of all items and headers in the list.
- **dataLoadingTemplate**: `IgxDataLoadingTemplateDirective` — Sets/gets the list loading template.
- **element**: `ElementRef<any>`
- **emptyListTemplate**: `IgxEmptyListTemplateDirective` — Sets/gets the empty list template.
- **endPan**: `EventEmitter<IListItemPanningEventArgs>` — Event emitted when a pan gesture is completed or canceled.
- **id**: `string` — Sets/gets the id of the list.
- **isLoading**: `boolean` — Sets/gets whether the list is currently loading data.
- **itemClicked**: `EventEmitter<IListItemClickEventArgs>` — Event emitted when a list item is clicked.
- **leftPan**: `EventEmitter<IListItemPanningEventArgs>` — Event emitted when a left pan gesture is executed on a list item.
- **listItemLeftPanningTemplate**: `IgxListItemLeftPanningTemplateDirective` — Sets/gets the template for left panning a list item.
- **listItemRightPanningTemplate**: `IgxListItemRightPanningTemplateDirective` — Sets/gets the template for right panning a list item.
- **panEndTriggeringThreshold**: `number` — Provides a threshold after which the item's panning will be completed automatically.
- **panStateChange**: `EventEmitter<IPanStateChangeEventArgs>` — Event emitted when a pan gesture is executed on a list item.
- **resetPan**: `EventEmitter<IgxListComponent>` — Event emitted when a pan item is returned to its original position.
- **rightPan**: `EventEmitter<IListItemPanningEventArgs>` — Event emitted when a right pan gesture is executed on a list item.
- **startPan**: `EventEmitter<IListItemPanningEventArgs>` — Event emitted when a pan gesture is started.
- **context**: `any` — Gets the context object of the template binding.
- **headers**: `IgxListItemComponent[]` — Gets the header list items.
- **isListEmpty**: `boolean` — Gets a boolean indicating if the list is empty.
- **items**: `IgxListItemComponent[]` — Gets the list items excluding the header ones.
- **resourceStrings**: `IListResourceStrings` — Returns the resource strings.
- **role**: `string` — Gets/Sets the role attribute value.
- **template**: `TemplateRef<any>` — Gets a TemplateRef to the currently used template.

### [IgxListItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListItemComponent)
The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component.

Example:
<igx-list>
  <igx-list-item isHeader="true">Contacts</igx-list-item>
  <igx-list-item *ngFor="let contact of contacts">
    <span class="name">{{ contact.name }}</span>
    <span class="phone">{{ contact.phone }}</span>
  </igx-list-item>
</igx-list>

- **constructor**(list: IgxListBaseDirective, elementRef: ElementRef<any>, _renderer: Renderer2): IgxListItemComponent
- **ariaLabel**: `string` — Sets/gets the aria-label attribute of the list item.
this.listItem.ariaLabel = "Item1";

let itemAriaLabel = this.listItem.ariaLabel;
- **hidden**: `boolean` — Sets/gets whether the list item is hidden.
By default the hidden value is false.
<igx-list-item [hidden] = "true">Hidden Item</igx-list-item>

let isHidden =  this.listItem.hidden;
- **isHeader**: `boolean` — Sets/gets whether the list item is a header.
<igx-list-item [isHeader] = "true">Header</igx-list-item>

let isHeader =  this.listItem.isHeader;
- **leftPanningTemplateElement**: `any` — Provides a reference to the template's base element shown when left panning a list item.
const leftPanTmpl = this.listItem.leftPanningTemplateElement;
- **list**: `IgxListBaseDirective`
- **rightPanningTemplateElement**: `any` — Provides a reference to the template's base element shown when right panning a list item.
const rightPanTmpl = this.listItem.rightPanningTemplateElement;
- **touchAction**: `string` — Gets the touch-action style of the list item.
let touchAction = this.listItem.touchAction;
- **contentElement**: `any` — Returns a reference container which contains the list item's content.
let listItemContainer =  this.listItem.contentElement.
- **context**: `any` — Returns the context object which represents the template context binding into the list item container
by providing the $implicit declaration which is the IgxListItemComponent itself.
let listItemComponent = this.listItem.context;
- **display**: `string` — Returns string value which describes the display mode of the list item.
let isHidden = this.listItem.display;
- **element**: `any` — Returns an element reference to the list item.
let listItemElement =  this.listItem.element.
- **headerStyle**: `boolean` — Indicates whether list item should have header style.
let headerStyle =  this.listItem.headerStyle;
- **index**: `number` — Gets the index of a list item.
let itemIndex =  this.listItem.index;
- **innerStyle**: `boolean` — Applies the inner style of the list item if the item is not counted as header.
let innerStyle =  this.listItem.innerStyle;
- **maxLeft**: `number` — Gets the maximum left position of the list item.
let maxLeft = this.listItem.maxLeft;
- **maxRight**: `any` — Gets the maximum right position of the list item.
let maxRight = this.listItem.maxRight;
- **panState**: `IgxListPanState` — Gets the panState of a list item.
let itemPanState =  this.listItem.panState;
- **role**: `string` — Gets/Sets the role attribute of the list item.
let itemRole =  this.listItem.role;
- **selected**: `boolean` — Sets/gets whether the list item is selected.
Selection is only applied to non-header items.
When selected, the CSS class 'igx-list__item-base--selected' is added to the item.
<igx-list-item [selected]="true">Selected Item</igx-list-item>

let isSelected = this.listItem.selected;
this.listItem.selected = true;
- **width**: `any` — Gets the width of a list item.
let itemWidth = this.listItem.width;

### [IgxListItemLeftPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListItemLeftPanningTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxListItemLeftPanningTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxListItemRightPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListItemRightPanningTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxListItemRightPanningTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxListLineDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListLineDirective)
igxListLine is container for the List text content
Use it to wrap anything you want to be used as a plane text.

- **constructor**(): IgxListLineDirective

### [IgxListLineSubTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListLineSubTitleDirective)
igxListLineSubTitle is a directive that add class to the target element
Use it to make anything to look like list Subtitle.

- **constructor**(): IgxListLineSubTitleDirective
- **cssClass**: `string`

### [IgxListLineTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListLineTitleDirective)
igxListLineTitle is a directive that add class to the target element
Use it to make anything to look like list Title.

- **constructor**(): IgxListLineTitleDirective
- **cssClass**: `string`

### [IgxListThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxListThumbnailDirective)
igxListThumbnail is container for the List media
Use it to wrap anything you want to be used as a thumbnail.

- **constructor**(): IgxListThumbnailDirective

### [IgxMaskDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxMaskDirective)

- **constructor**(elementRef: ElementRef<HTMLInputElement>, maskParser: MaskParsingService, renderer: Renderer2, platform: PlatformUtil): IgxMaskDirective
- **displayValuePipe**: `PipeTransform` — Specifies a pipe to be used on blur.
<input [displayValuePipe] = "displayFormatPipe">
- **focusedValuePipe**: `PipeTransform` — Specifies a pipe to be used on focus.
<input [focusedValuePipe] = "inputFormatPipe">
- **includeLiterals**: `boolean` — Specifies if the bound value includes the formatting symbols.
<input [includeLiterals] = "true">
- **promptChar**: `string` — Sets the character representing a fillable spot in the input mask.
Default value is "'_'".
<input [promptChar] = "'/'">
- **valueChanged**: `EventEmitter<IMaskEventArgs>` — Emits an event each time the value changes.
Provides rawValue: string and formattedValue: string as event arguments.
<input (valueChanged) = "valueChanged(rawValue: string, formattedValue: string)">
- **mask**: `string` — Sets the input mask.
<input [igxMask] = "'00/00/0000'">

### [IgxMonthPickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxMonthPickerComponent)

- **id**: `string` — Sets/gets the id of the month picker.
If not set, the id will have value "igx-month-picker-0".
- **ngAfterViewInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of a component's view.
It is invoked only once when the view is instantiated.
- **ngOnInit**(): void — A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.
- **selectDate**(value: Date): Date — Selects a date.
 this.monthPicker.selectDate(new Date(2018-06-12));

### [IgxMonthsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxMonthsViewComponent)

- **constructor**(el: ElementRef<any>, dayInterval: DayInterval): IgxMonthsViewComponent
- **el**: `ElementRef<any>`
- **formatView**: `boolean` — Gets/sets whether the view should be rendered
according to the locale and format, if any.
- **id**: `string` — Sets/gets the id of the months view.
If not set, the id will have value "igx-months-view-0".
<igx-months-view id="my-months-view"></igx-months-view>

let monthsViewId =  this.monthsView.id;
- **monthFormat**: `any` — Gets the month format option of the months view.
let monthFormat = this.monthsView.monthFormat.
- **standalone**: `boolean`

### [IgxNavbarActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavbarActionDirective)
IgxActionIcon is a container for the action nav icon of the IgxNavbar.

- **constructor**(): IgxNavbarActionDirective

### [IgxNavbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavbarComponent)
**Ignite UI for Angular Navbar** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html)

The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation
state such as a "Go Back" button. It also supports other actions represented by icons.

Example:
<igx-navbar title="Sample App" actionButtonIcon="menu">
  <igx-icon>search</igx-icon>
  <igx-icon>favorite</igx-icon>
  <igx-icon>more_vert</igx-icon>
</igx-navbar>

- **constructor**(): IgxNavbarComponent
- **action**: `EventEmitter<IgxNavbarComponent>` — The event that will be thrown when the action is executed,
provides reference to the IgxNavbar component as argument
public actionExc(event){
    alert("Action Execute!");
}
 //..

<igx-navbar (action)="actionExc($event)" title="Sample App" actionButtonIcon="menu">
- **actionButtonIcon**: `string` — Sets the icon of the IgxNavbarComponent.
<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar>
- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated.
<igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu">
- **title**: `string` — Sets the title of the IgxNavbarComponent.
<igx-navbar title="Sample App" actionButtonIcon="menu">
- **titleId**: `string` — Sets the titleId of the IgxNavbarComponent. If not set it will be automatically generated.
<igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu">
- **isActionButtonVisible**: `boolean` — Returns whether the IgxNavbarComponent action button is visible, true/false.
 @ViewChild("MyChild")
public navBar: IgxNavbarComponent;
ngAfterViewInit(){
    let actionButtonVisibile = this.navBar.isActionButtonVisible;
}
- **isTitleContentVisible**: `boolean`

### [IgxNavbarTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavbarTitleDirective)

- **constructor**(): IgxNavbarTitleDirective

### [IgxNavDrawerItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavDrawerItemDirective)

- **constructor**(): IgxNavDrawerItemDirective
- **active**: `boolean` — Styles a navigation drawer item as selected.
If not set, active will have default value false.
- **disabled**: `boolean` — Disables a navigation drawer item.
If not set, disabled will have default value false.
- **isHeader**: `boolean` — Styles a navigation drawer item as a group header.
If not set, isHeader will have default value false.

### [IgxNavDrawerMiniTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavDrawerMiniTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxNavDrawerMiniTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxNavDrawerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavDrawerTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxNavDrawerTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxNavigationCloseDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavigationCloseDirective)
Directive that can close targets through provided NavigationService.

Usage:
<button type="button" igxNavClose="ID">Close</button>

Where the ID matches the ID of compatible IToggleView component.

- **constructor**(nav: IgxNavigationService): IgxNavigationCloseDirective
- **state**: `IgxNavigationService`
- **closeNavigationDrawer**(): void

### [IgxNavigationDrawerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavigationDrawerComponent)
**Ignite UI for Angular Navigation Drawer** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)

The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar.

Example:
<igx-nav-drawer id="navigation" [isOpen]="true">
  <ng-template igxDrawer>
    <nav>
      <span igxDrawerItem [isHeader]="true">Email</span>
      <span igxDrawerItem igxRipple>Inbox</span>
      <span igxDrawerItem igxRipple>Deleted</span>
      <span igxDrawerItem igxRipple>Sent</span>
    </nav>
  </ng-template>
</igx-nav-drawer>

- **constructor**(elementRef: ElementRef<any>, _state: IgxNavigationService, renderer: Renderer2, _touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxNavigationDrawerComponent
- **closed**: `EventEmitter<any>` — Event fired when the Navigation Drawer has closed.

<igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>
- **closing**: `EventEmitter<any>` — Event fired as the Navigation Drawer is about to close.

<igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>
- **disableAnimation**: `boolean` — Enables/disables the animation, when toggling the drawer. Set to false by default.
html
<igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
- **enableGestures**: `boolean` — Enables the use of touch gestures to manipulate the drawer:
- swipe/pan from edge to open, swipe-toggle and pan-drag.

// get
let gesturesEnabled = this.navdrawer.enableGestures;


<!--set-->
<igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>
- **id**: `string` — ID of the component

// get
let myNavDrawerId = this.navdrawer.id;


<!--set-->
 <igx-nav-drawer id='navdrawer'></igx-nav-drawer>
- **miniWidth**: `string` — Width of the drawer in its mini state.

// get
let navDrawerMiniWidth = this.navdrawer.miniWidth;


<!--set-->
<igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
- **opened**: `EventEmitter<any>` — Event fired when the Navigation Drawer has opened.

<igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>
- **opening**: `EventEmitter<any>` — Event fired as the Navigation Drawer is about to open.

 <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>
- **pin**: `boolean` — When pinned the drawer is relatively positioned instead of sitting above content.
May require additional layout styling.

// get
let navDrawerIsPinned = this.navdrawer.pin;


<!--set-->
<igx-nav-drawer [pin]='false'></igx-nav-drawer>
- **pinChange**: `EventEmitter<boolean>` — Pinned state change output for two-way binding.

<igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>
- **pinThreshold**: `number` — Minimum device width required for automatic pin to be toggled.
Default is 1024, can be set to a falsy value to disable this behavior.

// get
let navDrawerPinThreshold = this.navdrawer.pinThreshold;


<!--set-->
<igx-nav-drawer [pinThreshold]='1024'></igx-nav-drawer>
- **position**: `string` — Position of the Navigation Drawer. Can be "left"(default) or "right".

// get
let myNavDrawerPosition = this.navdrawer.position;


<!--set-->
<igx-nav-drawer [position]="'left'"></igx-nav-drawer>
- **isOpen**: `boolean` — State of the drawer.

// get
let navDrawerIsOpen = this.navdrawer.isOpen;


<!--set-->
<igx-nav-drawer [isOpen]='false'></igx-nav-drawer>


Two-way data binding.
<!--set-->
<igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer>
- **width**: `string`
- **close**(): void — Close the Navigation Drawer. Has no effect if already closed.

this.navdrawer.close();
- **open**(): void — Open the Navigation Drawer. Has no effect if already opened.

this.navdrawer.open();
- **toggle**(): void — Toggle the open state of the Navigation Drawer.

this.navdrawer.toggle();

### [IgxNavigationService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavigationService)
Common service to be injected between components where those implementing common
ToggleView interface can register and toggle directives can call their methods.
TODO: Track currently active? Events?

- **constructor**(): IgxNavigationService
- **add**(id: string, navItem: IToggleView): void
- **close**(id: string, args: any[]): any
- **get**(id: string): IToggleView
- **open**(id: string, args: any[]): any
- **remove**(id: string): void
- **toggle**(id: string, args: any[]): any

### [IgxNavigationToggleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNavigationToggleDirective)
Directive that can toggle targets through provided NavigationService.

Usage:
<button type="button" igxNavToggle="ID">Toggle</button>

Where the ID matches the ID of compatible IToggleView component.

- **constructor**(nav: IgxNavigationService): IgxNavigationToggleDirective
- **state**: `IgxNavigationService`
- **toggleNavigationDrawer**(): void

### [IgxNumberFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNumberFilteringOperand)
Provides filtering operations for numbers


### [IgxNumberSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxNumberSummaryOperand)

- **constructor**(): IgxNumberSummaryOperand
- **operate**(data: any[], allData: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static methods and returns IgxSummaryResult[].
interface IgxSummaryResult {
  key: string;
  label: string;
  summaryResult: any;
}

Can be overridden in the inherited classes to provide customization for the summary.
class CustomNumberSummary extends IgxNumberSummaryOperand {
  constructor() {
    super();
  }
  public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
    const result = super.operate(data, allData, fieldName, groupRecord);
    result.push({
      key: "avg",
      label: "Avg",
      summaryResult: IgxNumberSummaryOperand.average(data)
    });
    result.push({
      key: 'mdn',
      label: 'Median',
      summaryResult: this.findMedian(data)
    });
    return result;
  }
}
this.grid.getColumnByName('ColumnName').summaries = CustomNumberSummary;
- static **average**(data: any[]): number — Returns the average numeric value in the data provided data records.
If filtering is applied, returns the average numeric value in the filtered data records.
IgxSummaryOperand.average(data);
- static **max**(data: any[]): number — Returns the maximum numeric value in the provided data records.
If filtering is applied, returns the maximum value in the filtered data records.
IgxNumberSummaryOperand.max(data);
- static **min**(data: any[]): number — Returns the minimum numeric value in the provided data records.
If filtering is applied, returns the minimum value in the filtered data records.
IgxNumberSummaryOperand.min(data);
- static **sum**(data: any[]): number — Returns the sum of the numeric values in the provided data records.
If filtering is applied, returns the sum of the numeric values in the data records.
IgxNumberSummaryOperand.sum(data);

### [IgxOverlayOutletDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxOverlayOutletDirective)
Mark an element as an igxOverlay outlet container.
Directive instance is exported as overlay-outlet to be assigned to templates variables:
<div igxOverlayOutlet #outlet="overlay-outlet"></div>

- **constructor**(element: ElementRef<HTMLElement>): IgxOverlayOutletDirective
- **element**: `ElementRef<HTMLElement>`

### [IgxOverlayService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxOverlayService)
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main)
The overlay service allows users to show components on overlay div above all other elements in the page.

- **constructor**(_appRef: ApplicationRef, document: any, _zone: NgZone, platformUtil: PlatformUtil, animationService: AnimationService): IgxOverlayService
- **animationStarting**: `EventEmitter<OverlayAnimationEventArgs>` — Emitted just before the overlay animation start.
animationStarting(event: OverlayAnimationEventArgs){
    const animationStarting = event;
}
- **closed**: `EventEmitter<OverlayEventArgs>` — Emitted after the overlay content is closed and all animations are finished.
closed(event: OverlayEventArgs){
    const closed = event;
}
- **closing**: `EventEmitter<OverlayClosingEventArgs>` — Emitted just before the overlay content starts to close.
closing(event: OverlayCancelableEventArgs){
    const closing = event;
}
- **contentAppended**: `EventEmitter<OverlayEventArgs>` — Emitted after the content is appended to the overlay, and before animations are started.
contentAppended(event: OverlayEventArgs){
    const contentAppended = event;
}
- **contentAppending**: `EventEmitter<OverlayEventArgs>` — Emitted before the content is appended to the overlay.
contentAppending(event: OverlayEventArgs){
    const contentAppending = event;
}
- **opened**: `EventEmitter<OverlayEventArgs>` — Emitted after the overlay content is opened and all animations are finished.
opened(event: OverlayEventArgs){
    const opened = event;
}
- **opening**: `EventEmitter<OverlayCancelableEventArgs>` — Emitted just before the overlay content starts to open.
opening(event: OverlayCancelableEventArgs){
    const opening = event;
}
- **attach**(element: ElementRef<any>, settings?: OverlaySettings): string — Generates Id. Provide this Id when call show(id) method
- **attach**(component: Type$1<any>, settings?: OverlayCreateSettings): string — Generates Id. Provide this Id when call show(id) method

Note created instance is in root scope, prefer the viewContainerRef overload when local injection context is needed.
- **attach**(component: Type$1<any>, viewContainerRef: ViewContainerRef, settings?: OverlaySettings): string — Generates an Id. Provide this Id when calling the show(id) method
- **detach**(id: string): void — Remove overlay with the provided id.
- **detachAll**(): void — Remove all the overlays.
this.overlay.detachAll();
- **hide**(id: string, event?: Event): void — Hides the component with the ID provided as a parameter.
this.overlay.hide(id);
- **hideAll**(): void — Hides all the components and the overlay.
this.overlay.hideAll();
- **reposition**(id: string): void — Repositions the component with ID provided as a parameter.
- **setOffset**(id: string, deltaX: number, deltaY: number, offsetMode?: OffsetMode): void — Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values
- **show**(id: string, settings?: OverlaySettings): void — Shows the overlay for provided id.
- static **createAbsoluteOverlaySettings**(position?: AbsolutePosition, outlet?: ElementRef<any> | IgxOverlayOutletDirective): OverlaySettings — Creates overlay settings with global or container position strategy and preset position settings
- static **createRelativeOverlaySettings**(target: HTMLElement | Point, position?: RelativePosition, strategy?: RelativePositionStrategy): OverlaySettings — Creates overlay settings with auto, connected or elastic position strategy and preset position settings

### [IgxPageNavigationComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPageNavigationComponent)

- **constructor**(paginator: IgxPaginatorComponent): IgxPageNavigationComponent
- **paginator**: `IgxPaginatorComponent`
- **role**: `string` — Sets the role attribute of the element.

### [IgxPageSizeSelectorComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPageSizeSelectorComponent)

- **constructor**(paginator: IgxPaginatorComponent): IgxPageSizeSelectorComponent
- **paginator**: `IgxPaginatorComponent`

### [IgxPaginatorComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPaginatorComponent)
Paginator component description

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef): IgxPaginatorComponent
- **pageChange**: `EventEmitter<number>` — Emitted after the current page is changed.
- **paging**: `EventEmitter<IPageCancellableEventArgs>` — Emitted before paging is performed.
- **pagingDone**: `EventEmitter<IPageEventArgs>` — Emitted after paging is performed.
- **perPageChange**: `EventEmitter<number>` — Emitted when perPage property value of the paginator is changed.
- **totalPages**: `number` — Total pages calculated from totalRecords and perPage
- **isFirstPage**: `boolean` — Returns if the current page is the first page.
const lastPage = this.paginator.isFirstPage;
- **isLastPage**: `boolean` — Returns if the current page is the last page.
const lastPage = this.paginator.isLastPage;
- **nativeElement**: `any`
- **overlaySettings**: `OverlaySettings` — Sets custom OverlaySettings.
<igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>
- **page**: `number` — Gets/Sets the current page of the paginator.
The default is 0.
let page = this.paginator.page;
- **perPage**: `number` — Gets/Sets the number of visible items per page in the paginator.
The default is 15.
let itemsPerPage = this.paginator.perPage;
- **resourceStrings**: `IPaginatorResourceStrings` — An accessor that returns the resource strings.
- **selectOptions**: `number[]` — Sets custom options in the select of the paginator
let options = this.paginator.selectOptions;
- **totalRecords**: `number` — Sets the total records.
let totalRecords = this.paginator.totalRecords;
- **nextPage**(): void — Goes to the next page of the IgxPaginatorComponent, if the paginator is not already at the last page.
this.paginator.nextPage();
- **paginate**(val: number): void — Goes to the desired page index.
this.paginator.paginate(1);
- **previousPage**(): void — Goes to the previous page of the IgxPaginatorComponent, if the paginator is not already at the first page.
this.paginator.previousPage();

### [IgxPaginatorContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPaginatorContentDirective)

- **constructor**(): IgxPaginatorContentDirective

### [IgxPaginatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPaginatorDirective)

- **constructor**(template: TemplateRef<any>): IgxPaginatorDirective
- **template**: `TemplateRef<any>`

### [IgxPickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPickerActionsDirective)
IgxPickerActionsDirective can be used to re-template the dropdown/dialog action buttons.

- **constructor**(template: TemplateRef<any>): IgxPickerActionsDirective
- **template**: `TemplateRef<any>`

### [IgxPickerClearComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPickerClearComponent)
Templates the default clear icon in the picker.

- **constructor**(): IgxPickerClearComponent

### [IgxPickerToggleComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPickerToggleComponent)
Templates the default toggle icon in the picker.

- **constructor**(): IgxPickerToggleComponent
- **clicked**: `EventEmitter<any>`
- **onClick**(event: MouseEvent): void

### [IgxPivotAggregate](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotAggregate)

- **constructor**(): IgxPivotAggregate
- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for base aggregation.
IgxPivotAggregate.aggregators();
- static **count**(members: number[]): number — Counts all the records in the data source.
If filtering is applied, counts only the filtered records.
IgxSummaryOperand.count(dataSource);

### [IgxPivotDataSelectorComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotDataSelectorComponent)
Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI

- **constructor**(renderer: Renderer2, cdr: ChangeDetectorRef): IgxPivotDataSelectorComponent
- **animationSettings**: `any`
- **columnsExpanded**: `boolean` — Gets/sets whether the columns panel is expanded
Get
 const columnsPanelState: boolean = this.dataSelector.columnsExpanded;

Set
<igx-pivot-data-selector [grid]="grid1" [columnsExpanded]="columnsPanelState"></igx-pivot-data-selector>


Two-way data binding:
<igx-pivot-data-selector [grid]="grid1" [(columnsExpanded)]="columnsPanelState"></igx-pivot-data-selector>
- **columnsExpandedChange**: `EventEmitter<boolean>` — Emitted when the columns panel is expanded or collapsed.
- **filtersExpanded**: `boolean` — Gets/sets whether the filters panel is expanded
Get
 const filtersPanelState: boolean = this.dataSelector.filtersExpanded;

Set
<igx-pivot-data-selector [grid]="grid1" [filtersExpanded]="filtersPanelState"></igx-pivot-data-selector>


Two-way data binding:
<igx-pivot-data-selector [grid]="grid1" [(filtersExpanded)]="filtersPanelState"></igx-pivot-data-selector>
- **filtersExpandedChange**: `EventEmitter<boolean>` — Emitted when the filters panel is expanded or collapsed.
- **rowsExpanded**: `boolean` — Gets/sets whether the rows panel is expanded
Get
 const rowsPanelState: boolean = this.dataSelector.rowsExpanded;

Set
<igx-pivot-data-selector [grid]="grid1" [rowsExpanded]="rowsPanelState"></igx-pivot-data-selector>


Two-way data binding:
<igx-pivot-data-selector [grid]="grid1" [(rowsExpanded)]="rowsPanelState"></igx-pivot-data-selector>
- **rowsExpandedChange**: `EventEmitter<boolean>` — Emitted when the rows panel is expanded or collapsed.
- **valuesExpanded**: `boolean` — Gets/sets whether the values panel is expanded
Get
 const valuesPanelState: boolean = this.dataSelector.valuesExpanded;

Set
<igx-pivot-data-selector [grid]="grid1" [valuesExpanded]="valuesPanelState"></igx-pivot-data-selector>


Two-way data binding:
<igx-pivot-data-selector [grid]="grid1" [(valuesExpanded)]="valuesPanelState"></igx-pivot-data-selector>
- **valuesExpandedChange**: `EventEmitter<boolean>` — Emitted when the values panel is expanded or collapsed.
- **grid**: `PivotGridType` — Returns the grid.

### [IgxPivotDateAggregate](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotDateAggregate)

- **constructor**(): IgxPivotDateAggregate
- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for date aggregation.
IgxPivotDateAggregate.aggregators();
- static **earliest**(members: any[]): any — Returns the earliest date value in the data records.
If filtering is applied, returns the latest date value in the filtered data records.
IgxPivotDateAggregate.earliest(data);
- static **latest**(members: any[]): any — Returns the latest date value in the data records.
If filtering is applied, returns the latest date value in the filtered data records.
IgxPivotDateAggregate.latest(data);

### [IgxPivotDateDimension](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotDateDimension)
Configuration of a pivot dimension.

- **constructor**(inBaseDimension: IPivotDimension, inOptions: IPivotDateDimensionOptions): IgxPivotDateDimension
- **dataType**: `GridColumnDataType` — Gets/Sets data type
- **defaultOptions**: `any` — Default options.
- **displayName**: `string` — Display name to show instead of the field name of this value. *
- **enabled**: `boolean` — Enables/Disables a particular dimension from pivot structure.
- **baseDimension**: `IPivotDimension` — Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values.
Having base dimension set is required in order for the Date Dimensions to show.
- **options**: `IPivotDateDimensionOptions` — Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc.
- **resourceStrings**: `IGridResourceStrings`

### [IgxPivotGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotGridComponent)
Pivot Grid provides a way to present and manipulate data in a pivot table view.

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxPivotColumnResizingService, gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxPivotGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxPivotGridComponent
- **autoGenerateConfig**: `boolean` — Gets/Sets whether to auto-generate the pivot configuration based on the provided data.
- **dimensionInit**: `EventEmitter<IPivotDimension>` — Emitted when the dimension is initialized.
- **dimensionsChange**: `EventEmitter<IDimensionsChange>` — Emitted when the dimension collection is changed via the grid chip area.
- **dimensionsSortingExpressionsChange**: `EventEmitter<ISortingExpression<any>[]>` — Emitted when a dimension is sorted.
- **emptyPivotGridTemplate**: `TemplateRef<void>` — Gets/Sets a custom template when pivot grid is empty.
- **pivotConfigurationChange**: `EventEmitter<IPivotConfigurationChangedEventArgs>` — Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
- **rowDimensionHeaderTemplate**: `TemplateRef<IgxColumnTemplateContext>`
- **valueChipTemplate**: `TemplateRef<IgxPivotGridValueTemplateContext>` — Gets/Sets a custom template for the value chips.
- **valueInit**: `EventEmitter<IPivotValue>` — Emitted when the value is initialized.
- **valuesChange**: `EventEmitter<IValuesChange>` — Emitted when the values collection is changed via the grid chip area.
- **allDimensions**: `IPivotDimension[]` — An array of all dimensions (rows and columns) in the pivot grid.
it includes hierarchical level, filters and sorting, dimensional level, etc.
- **allowAdvancedFiltering**: `boolean`
- **allowFiltering**: `boolean` — Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered
- **batchEditing**: `boolean`
- **data**: `any[]` — Returns an array of data set to the component.
let data = this.grid.data;
- **defaultExpandState**: `boolean` — Gets/Sets the default expand state for all rows.
- **dimensionsSortingExpressions**: `ISortingExpression<any>[]` — Gets the sorting expressions generated for the dimensions.
- **dragIndicatorIconTemplate**: `TemplateRef<any>` — The template for drag indicator icons. Could be of any type
- **filterMode**: `FilterMode` — The filter mode for the grid. It can be quick filter of excel-style filter
- **hideRowSelectors**: `boolean`
- **id**: `string` — Represents the unique identifier of the grid.
- **pagingMode**: `GridPagingMode` — Represents the paging of the grid. It can be either 'Local' or 'Remote'
- Local: Default value; The grid will paginate the data source based on the page
- **pinning**: `any` — The configuration for columns and rows pinning in the grid
It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom)
- **pivotConfiguration**: `IPivotConfiguration` — The configuration settings for the pivot grid.
it includes dimension strategy for rows and columns, filters and data keys
- **pivotUI**: `IPivotUISettings` — Specifies whether to show the pivot configuration UI in the grid.
- **pivotValueCloneStrategy**: `IDataCloneStrategy`
- **rowDraggable**: `boolean` — Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged
- **rowEditable**: `boolean` — Indicates whether rows in the grid are editable. If te value is true, the rows can be edited
- **selectedRows**: `any[]` — Gets/Sets the current selection state.
- **shouldGenerate**: `boolean`
- **showSummaryOnCollapse**: `boolean`
- **summaryCalculationMode**: `GridSummaryCalculationMode` — Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'
- **summaryPosition**: `GridSummaryPosition` — Represents the position of summaries: 'top', 'bottom'
- **summaryRowHeight**: `number` — Get/Set IgxSummaryRow height
- **superCompactMode**: `boolean` — Enables a super compact theme for the component.
- **totalRecords**: `number`
- **autoSizeRowDimension**(dimension: IPivotDimension): void — Auto-sizes row dimension cells.
- **filterDimension**(dimension: IPivotDimension, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree): void — Filters a single IPivotDimension.
- **getColumnGroupExpandState**(col: IgxColumnComponent): boolean
- **insertDimensionAt**(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void — Inserts dimension in target collection by type at specified index or at the collection's end.
- **insertValueAt**(value: IPivotValue, index?: number): void — Inserts value at specified index or at the end.
- **moveDimension**(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void — Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.
- **moveValue**(value: IPivotValue, index?: number): void — Move value from its currently at specified index or at the end.
- **notifyDimensionChange**(regenerateColumns: boolean): void — Notifies for dimension change.
- **removeDimension**(dimension: IPivotDimension): void — Removes dimension from its currently collection.
- **removeValue**(value: IPivotValue): void — Removes value from collection.
- **sortDimension**(dimension: IPivotDimension, sortDirection: SortingDirection): void — Sort the dimension and its children in the provided direction.
- **toggleColumn**(col: IgxColumnComponent): void
- **toggleDimension**(dimension: IPivotDimension): void — Toggles the dimension's enabled state on or off.
- **toggleRowGroup**(col: IgxColumnComponent, newState: boolean): void
- **toggleValue**(value: IPivotValue): void — Toggles the value's enabled state on or off.

### [IgxPivotGridRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotGridRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **constructor**(grid: IgxPivotGridComponent, index: number, data?: any): IgxPivotGridRow
- **grid**: `IgxPivotGridComponent` — The grid that contains the row.
- **index**: `number` — The index of the row within the grid
- **data**: `any` — The data passed to the row component.
- **key**: `any` — Gets the row key.
A row in the grid is identified either by:
- primaryKey data value,
- the whole rowData, if the primaryKey is omitted.

let rowKey = row.key;
- **selected**: `boolean` — Optional
Indicates whether the current row is selected
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxPivotNumericAggregate](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotNumericAggregate)

- **constructor**(): IgxPivotNumericAggregate
- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for numeric aggregation.
IgxPivotAggregate.aggregators();
- static **average**(members: number[]): number — Returns the average numeric value in the data provided data records.
If filtering is applied, returns the average numeric value in the filtered data records.
IgxPivotNumericAggregate.average(data);
- static **max**(members: number[]): number — Returns the maximum numeric value in the provided data records.
If filtering is applied, returns the maximum value in the filtered data records.
IgxPivotNumericAggregate.max(data);
- static **min**(members: number[]): number — Returns the minimum numeric value in the provided data records.
If filtering is applied, returns the minimum value in the filtered data records.
IgxPivotNumericAggregate.min(members, data);
- static **sum**(members: number[]): number — Returns the sum of the numeric values in the provided data records.
If filtering is applied, returns the sum of the numeric values in the data records.
IgxPivotNumericAggregate.sum(data);

### [IgxPivotTimeAggregate](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPivotTimeAggregate)

- **constructor**(): IgxPivotTimeAggregate
- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for time aggregation.
IgxPivotTimeAggregate.aggregators();
- static **earliestTime**(members: any[]): any — Returns the earliest time value in the data records. Compare only the time part of the date.
If filtering is applied, returns the earliest time value in the filtered data records.
IgxPivotTimeAggregate.earliestTime(data);
- static **latestTime**(members: any[]): any — Returns the latest time value in the data records. Compare only the time part of the date.
If filtering is applied, returns the latest time value in the filtered data records.
IgxPivotTimeAggregate.latestTime(data);

### [IgxPrependDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxPrependDropStrategy)

- **constructor**(_renderer: Renderer2): IgxPrependDropStrategy
- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void

### [IgxProgressBarGradientDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxProgressBarGradientDirective)

- **constructor**(template: TemplateRef<any>): IgxProgressBarGradientDirective
- **template**: `TemplateRef<any>`

### [IgxProgressBarTextTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxProgressBarTextTemplateDirective)

- **constructor**(template: TemplateRef<any>): IgxProgressBarTextTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxQueryBuilderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxQueryBuilderComponent)
A component used for operating with complex filters by creating or editing conditions
and grouping them using AND/OR logic.
It is used internally in the Advanced Filtering of the Grid.

- **constructor**(iconService: IgxIconService): IgxQueryBuilderComponent
- **disableEntityChange**: `boolean` — Disables subsequent entity changes at the root level after the initial selection.
- **disableReturnFieldsChange**: `boolean` — Disables return fields changes at the root level.
- **expressionTreeChange**: `EventEmitter<IExpressionTree>` — Event fired as the expression tree is changed.

 <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
- **locale**: `string` — Gets the locale of the query builder.
If not set, defaults to application's locale.
- **showEntityChangeDialog**: `boolean` — Gets/sets whether the confirmation dialog should be shown when changing entity.
Default value is true.
- **entities**: `EntityType[]` — Gets the list of entities available for the IgxQueryBuilderComponent.

Each entity describes a logical group of fields that can be used in queries.
An entity can optionally have child entities, allowing nested sub-queries.
- **expressionTree**: `IExpressionTree` — Returns the expression tree.
- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings.
- **canCommit**(): boolean — Returns whether the expression tree can be committed in the current state.
- **commit**(): void — Commits the expression tree in the current state if it is valid. If not throws an exception.
- **discard**(): void — Discards all unsaved changes to the expression tree.
- **onExpressionTreeChange**(tree: IExpressionTree): void

### [IgxQueryBuilderHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxQueryBuilderHeaderComponent)

- **constructor**(): IgxQueryBuilderHeaderComponent
- **showLegend**: `boolean` — Show/hide the legend.
- **title**: `string` — Sets the title of the IgxQueryBuilderHeaderComponent.
- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings.

### [IgxQueryBuilderSearchValueTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxQueryBuilderSearchValueTemplateDirective)
Defines the custom template that will be used for the search value input of condition in edit mode

- **constructor**(template: TemplateRef<any>): IgxQueryBuilderSearchValueTemplateDirective
- **template**: `TemplateRef<any>`

### [IgxRadioComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxRadioComponent)
**Ignite UI for Angular Radio Button** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)

The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.

Example:
<igx-radio>
  Simple radio button
</igx-radio>

- **constructor**(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl): IgxRadioComponent
- **cssClass**: `string` — Returns the class of the radio component.
let radioClass = this.radio.cssClass;
- **disabled**: `boolean` — Sets/gets  the disabled attribute.
Default value is false.
<igx-radio disabled></igx-radio>

let isDisabled =  this.radio.disabled;
- **focused**: `boolean` — Sets/gets whether the radio component is on focus.
Default value is false.
this.radio.focus = true;

let isFocused =  this.radio.focused;
- **invalid**: `boolean` — Sets/gets whether the radio button is invalid.
Default value is false.
<igx-radio invalid></igx-radio>

let isInvalid =  this.radio.invalid;
- **checked**: `boolean`
- **deselect**(): void — Deselects the current radio button.
this.radio.deselect();
- **select**(): void — Selects the current radio button.
this.radio.select();
- **writeValue**(value: any): void — Checks whether the provided value is consistent to the current radio button.
If it is, the checked attribute will have value true;
this.radio.writeValue('radioButtonValue');

### [IgxRadioGroupDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxRadioGroupDirective)
Radio group directive renders set of radio buttons.

- **constructor**(ngControl: NgControl, _directionality: IgxDirectionality, cdr: ChangeDetectorRef): IgxRadioGroupDirective
- readonly **change**: `EventEmitter<IChangeCheckboxEventArgs>` — An event that is emitted after the radio group value is changed.
- **ngControl**: `NgControl`
- **alignment**: `RadioGroupAlignment` — Returns the alignment of the igx-radio-group.
@ViewChild("MyRadioGroup")
public radioGroup: IgxRadioGroupDirective;
ngAfterViewInit(){
   let radioAlignment = this.radioGroup.alignment;
}
- **invalid**: `boolean` — Sets/gets whether the radio group is invalid.
- **name**: `string` — Sets/gets the name attribute of the radio group component. All child radio buttons inherits this name.
- **radioButtons**: `QueryList<IgxRadioComponent>` — Returns reference to the child radio buttons.
- **required**: `boolean` — Sets/gets whether the radio group is required.
- **selected**: `IgxRadioComponent` — Sets/gets the selected child radio button.
- **value**: `any` — Sets/gets the value attribute.
- **ngDoCheck**(): void — A callback method that performs change-detection, invoked
after the default change-detector runs.
See KeyValueDiffers and IterableDiffers for implementing
custom change checking for collections.
- **writeValue**(value: any): void — Sets the "checked" property value on the radio input element.

### [IgxRippleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxRippleDirective)

- **constructor**(builder: AnimationBuilder, elementRef: ElementRef<any>, renderer: Renderer2, zone: NgZone): IgxRippleDirective
- **rippleColor**: `string` — Sets/gets the ripple color.
<button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleColor = this.ripple.rippleColor;
- **rippleDisabled**: `boolean` — Sets/gets whether the ripple is disabled.
Default value is false.
<button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let isRippleDisabled = this.ripple.rippleDisabled;
- **rippleDuration**: `number` — Sets/gets the ripple duration(in milliseconds).
Default value is 600.
<button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleDuration = this.ripple.rippleDuration;
- **rippleTarget**: `string` — Sets/gets the ripple target.
<div  #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleTarget = this.ripple.rippleTarget;

Can set the ripple to activate on a child element inside the parent where igxRipple is defined.
<div #rippleContainer [igxRippleTarget]="'#child"'>
  <button type="button" igxButton id="child">Click</button>
</div>
- **centered**: `boolean`

### [IgxRowDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxRowDirective)

- **constructor**(grid: GridType, selectionService: IgxGridSelectionService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxRowDirective
- **cdr**: `ChangeDetectorRef`
- **disabled**: `boolean` — Sets whether this specific row has disabled functionality for editing and row selection.
Default value is false.
this.grid.selectedRows[0].pinned = true;
- **element**: `ElementRef<HTMLElement>`
- **grid**: `GridType`
- **index**: `number` — The index of the row.

// get the index of the second selected row
let selectedRowIndex = this.grid.selectedRows[1].index;
- **selectionService**: `IgxGridSelectionService`
- **addRowUI**: `any`
- **cells**: `QueryList<CellType>` — Gets the rendered cells in the row component.

// get the cells of the third selected row
let selectedRowCells = this.grid.selectedRows[2].cells;
- **data**: `any` — The data passed to the row component.

// get the row data for the first selected row
let selectedRowData = this.grid.selectedRows[0].data;
- **dataRowIndex**: `number`
- **expanded**: `boolean` — Gets the expanded state of the row.
let isExpanded = row.expanded;
- **inEditMode**: `boolean`
- **key**: `any` — Gets the ID of the row.
A row in the grid is identified either by:
- primaryKey data value,
- the whole data, if the primaryKey is omitted.

let rowID = this.grid.selectedRows[2].key;
- **nativeElement**: `HTMLElement` — The native DOM element representing the row. Could be null in certain environments.

// get the nativeElement of the second selected row
let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement;
- **pinned**: `boolean` — Gets whether the row is pinned.
let isPinned = row.pinned;
- **rowHeight**: `number`
- **selected**: `boolean`
- **virtDirRow**: `IgxGridForOfDirective<ColumnType, ColumnType[]>`
- **beginAddRow**(): void — Spawns the add row UI for the specific row.
- **delete**(): void — Removes the specified row from the grid's data source.
This method emits rowDeleted event.

// delete the third selected row from the grid
this.grid.selectedRows[2].delete();
- **isCellActive**(visibleColumnIndex: any): boolean
- **pin**(): boolean — Pins the specified row.
This method emits rowPinning`rowPinned` event.

// pin the selected row from the grid
this.grid.selectedRows[0].pin();
- **unpin**(): boolean — Unpins the specified row.
This method emits rowPinning`rowPinned` event.

// unpin the selected row from the grid
this.grid.selectedRows[0].unpin();
- **update**(value: any): void — Updates the specified row object and the data source record with the passed value.

// update the second selected row's value
let newValue = "Apple";
this.grid.selectedRows[1].update(newValue);

### [IgxRowIslandComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxRowIslandComponent)
Row island

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, rowIslandAPI: IgxRowIslandAPIService, localeId: string, platform: PlatformUtil): IgxRowIslandComponent
- **gridCreated**: `EventEmitter<IGridCreatedEventArgs>` — Event emitted when a grid is being created based on this row island.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
     <igx-row-island [key]="'childData'" (gridCreated)="gridCreated($event)" #rowIsland>
         <!-- ... -->
     </igx-row-island>
</igx-hierarchical-grid>
- **gridInitialized**: `EventEmitter<IGridCreatedEventArgs>` — Emitted after a grid is being initialized for this row island.
The emitting is done in ngAfterViewInit.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
     <igx-row-island [key]="'childData'" (gridInitialized)="gridInitialized($event)" #rowIsland>
         <!-- ... -->
     </igx-row-island>
</igx-hierarchical-grid>
- **key**: `string` — Sets the key of the row island by which child data would be taken from the row data if such is provided.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
     <igx-row-island [key]="'childData'">
         <!-- ... -->
     </igx-row-island>
</igx-hierarchical-grid>
- **rowIslandAPI**: `IgxRowIslandAPIService`
- **childDataKey**: `string`
- **expandChildren**: `boolean` — Gets if all immediate children of the grids for this IgxRowIslandComponent have been set to be expanded/collapsed.
const expanded = this.rowIsland.expandChildren;
- **paginatorTemplate**: `TemplateRef<IgxGridPaginatorTemplateContext>` — Sets/Gets the paginator template for each child grid created from this row island.
- **toolbarTemplate**: `TemplateRef<IgxGridToolbarTemplateContext>` — Sets/Gets the toolbar template for each child grid created from this row island.

### [IgxSelectComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSelectComponent)
**Ignite UI for Angular Select** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)

The igxSelect provides an input with dropdown list allowing selection of a single item.

Example:
<igx-select #select1 [placeholder]="'Pick One'">
  <label igxLabel>Select Label</label>
  <igx-select-item *ngFor="let item of items" [value]="item.field">
    {{ item.field }}
  </igx-select-item>
</igx-select>

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService, overlayService: IgxOverlayService, _inputGroupType: IgxInputGroupType, _injector: Injector): IgxSelectComponent
- **closed**: `EventEmitter<IBaseEventArgs>` — Emitted after the dropdown is closed

<igx-select (closed)='handleClosed($event)'></igx-select>
- **closing**: `EventEmitter<IBaseCancelableBrowserEventArgs>` — Emitted before the dropdown is closed

<igx-select (closing)='handleClosing($event)'></igx-select>
- **disabled**: `boolean` — Disables the component.
<igx-select [disabled]="'true'"></igx-select>
- **footerTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering the FOOTER for the select items list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.footerTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectFooter>
         <div class="select__footer">
             This is a custom footer
         </div>
     </ng-template>
 </igx-select>
- **headerTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering the HEADER for the select items list

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.headerTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectHeader>
         <div class="select__header">
             This is a custom header
         </div>
     </ng-template>
 </igx-select>
- **opened**: `EventEmitter<IBaseEventArgs>` — Emitted after the dropdown is opened

<igx-select (opened)='handleOpened($event)'></igx-select>
- **opening**: `EventEmitter<IBaseCancelableBrowserEventArgs>` — Emitted before the dropdown is opened

<igx-select opening='handleOpening($event)'></igx-select>
- **overlaySettings**: `OverlaySettings` — Sets custom OverlaySettings IgxSelectComponent.
<igx-select [overlaySettings] = "customOverlaySettings"></igx-select>
- **placeholder**: `any` — Sets input placeholder.
- **toggleIconTemplate**: `TemplateRef<any>` — The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.select.toggleIconTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-select #select>
     ...
     <ng-template igxSelectToggleIcon let-collapsed>
         <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
     </ng-template>
 </igx-select>
- **type**: `IgxInputGroupType` — Sets how the select will be styled.
The allowed values are line, box and border. The input-group default is line.
<igx-select [type]="'box'"></igx-select>
- **value**: `any` — Gets/Sets the component value.

// get
let selectValue = this.select.value;


// set
this.select.value = 'London';

<igx-select [value]="value"></igx-select>
- **inputGroupClick**(event: MouseEvent, overlaySettings?: OverlaySettings): void
- **open**(overlaySettings?: OverlaySettings): void — Opens the select

this.select.open();

### [IgxSelectGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSelectGroupComponent)
The <igx-select-item> is a container intended for row items in
a <igx-select> container.

- **constructor**(): IgxSelectGroupComponent

### [IgxSelectItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSelectItemComponent)
The <igx-drop-down-item> is a container intended for row items in
a <igx-drop-down> container.

- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef<any>, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxSelectItemComponent
- **selected**: `any` — Sets/Gets if the item is the currently selected one in the select

 let mySelectedItem = this.select.selectedItem;
 let isMyItemSelected = mySelectedItem.selected; // true
- **text**: `string` — Gets/Sets the item's text to be displayed in the select component's input when the item is selected.

 //get
 let mySelectedItem = this.dropDown.selectedItem;
 let selectedItemText = mySelectedItem.text;


// set
<igx-select-item [text]="'London'"></igx-select-item>

### [IgxSimpleComboComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSimpleComboComponent)
Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list.

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, platformUtil: PlatformUtil, document: any, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService, formGroupDirective?: FormGroupDirective): IgxSimpleComboComponent
- **selectionChanging**: `EventEmitter<ISimpleComboSelectionChangingEventArgs>` — Emitted when item selection is changing, before the selection completes

<igx-simple-combo (selectionChanging)='handleSelection()'></igx-simple-combo>
- **selection**: `any` — Get current selection state
- **value**: `any` — The value of the combo

// get
let comboValue = this.combo.value;
- **deselect**(): void — Deselect the currently selected item
- **select**(item: any): void — Select a defined item

### [IgxSlideComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSlideComponent)
A slide component that usually holds an image and/or a caption text.
IgxSlideComponent is usually a child component of an IgxCarouselComponent.

<igx-slide [input bindings] >
   <ng-content></ng-content>
</igx-slide>

- **constructor**(elementRef: ElementRef<any>): IgxSlideComponent
- **cssClass**: `string` — Returns the class of the slide component.
let class =  this.slide.cssClass;
- **direction**: `Direction` — Gets/sets the target direction for the slide.
<igx-carousel>
 <igx-slide direction="NEXT"></igx-slide>
<igx-carousel>
- **index**: `number` — Gets/sets the index of the slide inside the carousel.
<igx-carousel>
 <igx-slide index="1"></igx-slide>
<igx-carousel>
- **previous**: `boolean`
- **tab**: `string` — Returns the role of the slide component.
By default is set to tabpanel
- **total**: `number`
- **active**: `boolean` — Gets/sets the active state of the slide.
<igx-carousel>
 <igx-slide [active] ="false"></igx-slide>
<igx-carousel>


Two-way data binding.
<igx-carousel>
 <igx-slide [(active)] ="model.isActive"></igx-slide>
<igx-carousel>
- **nativeElement**: `any` — Returns a reference to the carousel element in the DOM.
let nativeElement =  this.slide.nativeElement;
- **tabIndex**: `number` — Returns the tabIndex of the slide component.
let tabIndex =  this.carousel.tabIndex;
- **ngAfterContentChecked**(): void — A callback method that is invoked immediately after the
default change detector has completed checking all of the directive's
content.

### [IgxSliderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSliderComponent)
**Ignite UI for Angular Slider** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)

The Ignite UI Slider allows selection in a given range by moving the thumb along the track. The track
can be defined as continuous or stepped, and you can choose between single and range slider types.

Example:
<igx-slider id="slider"
           [minValue]="0" [maxValue]="100"
           [continuous]=true [(ngModel)]="volume">
</igx-slider>

- **constructor**(renderer: Renderer2, _el: ElementRef<any>, _cdr: ChangeDetectorRef, _ngZone: NgZone, _dir: IgxDirectionality): IgxSliderComponent
- **dragFinished**: `EventEmitter<number | IRangeSliderValue>` — This event is emitted at the end of every slide interaction.
public change(event){
   alert("The value has been changed!");
}

<igx-slider (dragFinished)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
- **id**: `string` — Sets the value of the id attribute.
If not provided it will be automatically generated.
<igx-slider [id]="'igx-slider-32'" [(ngModel)]="task.percentCompleted" [step]="5" [lowerBound]="20">
- **lowerValueChange**: `EventEmitter<number>` — This event is emitted every time the lower value of a range slider is changed.
public change(value){
   alert(The lower value has been changed to ${value});
}

<igx-slider [(lowerValue)]="model.lowervalue" (lowerValueChange)="change($event)" [step]="5">
- **primaryTickLabels**: `boolean` — show/hide primary tick labels
<igx-slider [primaryTicks]="5" [primaryTickLabels]="false"></igx-slider>
- **secondaryTickLabels**: `boolean` — show/hide secondary tick labels
<igx-slider [secondaryTicks]="5" [secondaryTickLabels]="false"></igx-slider>
- **showTicks**: `boolean` — Show/hide slider ticks
<igx-slier [showTicks]="true" [primaryTicks]="5"></igx-slier>
- **thumbLabelVisibilityDuration**: `number` — Sets the duration visibility of thumbs labels. The default value is 750 milliseconds.
<igx-slider #slider [thumbLabelVisibilityDuration]="3000" [(ngModel)]="task.percentCompleted" [step]="5">
- **tickLabelsOrientation**: `TickLabelsOrientation` — Changes tick labels rotation:
horizontal - The default rotation
toptobottom - Rotates tick labels vertically to 90deg
bottomtotop - Rotate tick labels vertically to -90deg
<igx-slider [primaryTicks]="5" [secondaryTicks]="3" [tickLabelsOrientation]="tickLabelsOrientaiton"></igx-slider>
- **ticksOrientation**: `TicksOrientation` — Changes ticks orientation:
bottom - The default orienation, below the slider track.
top - Above the slider track
mirror - combines top and bottom orientation.
<igx-slider [primaryTicks]="5" [ticksOrientation]="ticksOrientation"></igx-slider>
- **upperValueChange**: `EventEmitter<number>` — This event is emitted every time the upper value of a range slider is changed.
public change(value){
   alert(The upper value has been changed to ${value});
}

<igx-slider [(upperValue)]="model.uppervalue" (upperValueChange)="change($event)" [step]="5">
- **valueChange**: `EventEmitter<ISliderValueChangeEventArgs>` — This event is emitted every time the value is changed.
public change(event){
   alert("The value has been changed!");
}

<igx-slider (valueChange)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
- **context**: `any` — Returns the template context corresponding
to IgxThumbFromTemplateDirective and IgxThumbToTemplateDirective templates.

return {
 $implicit // returns the value of the label,
 labels // returns the labels collection the user has passed.
}
- **continuous**: `boolean` — Returns if the IgxSliderComponent is set as continuous.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let continuous = this.slider.continuous;
}
- **disabled**: `boolean` — Returns if the IgxSliderComponent is disabled.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let isDisabled = this.slider.disabled;
}
- **isRange**: `boolean` — Returns whether the IgxSliderComponent type is RANGE.
 @ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderRange = this.slider.isRange;
}
- **labels**: `string | number | boolean[]` — Enables labelView, by accepting a collection of primitive values with more than one element.
Each element will be equally spread over the slider and it will serve as a thumb label.
Once the property is set, it will precendence over maxValue, minValue, step.
This means that the manipulation for those properties won't be allowed.
- **labelsViewEnabled**: `boolean` — Returns if label view is enabled.
If the labels is set, the view is automatically activated.
@ViewChild("slider")
public slider: IgxSliderComponent;
let labelView = this.slider.labelsViewEnabled;
- **lowerBound**: `number` — Returns the lower boundary of settable values of the IgxSliderComponent.
If not set, will return minValue.
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderLowBound = this.slider.lowerBound;
}
- **lowerLabel**: `string | number | boolean` — Returns the value corresponding the lower label.
@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.lowerLabel;
- **lowerValue**: `number` — Returns the lower value of a RANGE IgxSliderComponent.
@ViewChild("slider")
public slider: IgxSliderComponent;
public lowValue(event){
   let sliderLowValue = this.slider.lowerValue;
}
- **maxValue**: `number` — Returns the maximum displayed track value for the IgxSliderComponent.
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderMax = this.slider.maxValue;
}
- **minValue**: `number` — Returns the minimal displayed track value of the IgxSliderComponent.
 @ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let sliderMin = this.slider.minValue;
}
- **primaryTicks**: `number` — Returns the number of the presented primary ticks.
const primaryTicks = this.slider.primaryTicks;
- **secondaryTicks**: `number` — Returns the number of the presented secondary ticks.
const secondaryTicks = this.slider.secondaryTicks;
- **step**: `number` — Returns the incremental/decremental dragging step of the IgxSliderComponent.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let step = this.slider.step;
}
- **type**: `IgxSliderType` — Gets the type of the IgxSliderComponent.
The slider can be IgxSliderType.SLIDER(default) or IgxSliderType.RANGE.
@ViewChild("slider2")
public slider: IgxSliderComponent;
ngAfterViewInit(){
    let type = this.slider.type;
}
- **upperBound**: `number` — Returns the upper boundary of settable values of the IgxSliderComponent.
If not set, will return maxValue
@ViewChild("slider")
public slider: IgxSliderComponent;
ngAfterViewInit(){
   let sliderUpBound = this.slider.upperBound;
}
- **upperLabel**: `string | number | boolean` — Returns the value corresponding the upper label.
@ViewChild("slider")
public slider: IgxSliderComponent;
let label = this.slider.upperLabel;
- **upperValue**: `number` — Returns the upper value of a RANGE IgxSliderComponent.
Returns value of a SLIDER IgxSliderComponent
 @ViewChild("slider2")
public slider: IgxSliderComponent;
public upperValue(event){
    let upperValue = this.slider.upperValue;
}
- **value**: `number | IRangeSliderValue` — Returns the slider value. If the slider is of type IgxSliderType.SLIDER the returned value is number.
If the slider type is IgxSliderType.RANGE.
The returned value represents an object of lowerValue and upperValue.
@ViewChild("slider2")
public slider: IgxSliderComponent;
public sliderValue(event){
    let sliderVal = this.slider.value;
}
- **ngAfterContentInit**(): void — A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.
- **setValue**(value: number | IRangeSliderValue, triggerChange: boolean): void

### [IgxSnackbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSnackbarComponent)
**Ignite UI for Angular Snackbar** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html)

The Ignite UI Snack Bar provides feedback about an operation with a single-line message, which can
include a link to an action such as Undo.

Example:
<button type="button" igxButton (click)="snackbar.show()">Send message</button>
<div>
  <igx-snackbar #snackbar>
     Message sent
  </igx-snackbar>
</div>

- **actionText**: `string` — Sets/gets the actionText attribute.
<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>
- **animationDone**: `EventEmitter<ToggleViewEventArgs>` — An event that will be emitted when the snackbar animation ends.
Provides reference to the ToggleViewEventArgs interface as an argument.
<igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar>
- **animationStarted**: `EventEmitter<ToggleViewEventArgs>` — An event that will be emitted when the snackbar animation starts.
Provides reference to the ToggleViewEventArgs interface as an argument.
<igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar>
- **clicked**: `EventEmitter<IgxSnackbarComponent>` — An event that will be emitted when the action button is clicked.
Provides reference to the IgxSnackbarComponent as an argument.
<igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>
- **id**: `string` — Sets/gets the id of the snackbar.
If not set, the id of the first snackbar component  will be "igx-snackbar-0";
<igx-snackbar id = "Snackbar1"></igx-snackbar>

let snackbarId = this.snackbar.id;
- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the snackbar.
@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
let currentPosition: PositionSettings = this.snackbar.positionSettings
- **open**(message?: string): void — Shows the snackbar and hides it after the displayTime is over if autoHide is set to true.
this.snackbar.open();
- **toggle**(): void — Opens or closes the snackbar, depending on its current state.

this.snackbar.toggle();

### [IgxSorting](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSorting)
Represents a class implementing the IGridSortingStrategy interface.
It provides sorting functionality for grid data based on sorting expressions.

- **constructor**(): IgxSorting
- **sort**(data: any[], expressions: ISortingExpression<any>[], grid?: GridType): any[] — Sorts the provided data based on the given sorting expressions.
data: The array of data to be sorted.
expressions: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc.
grid: (Optional) The instance of the grid where the sorting is applied.
Returns a new array with the data sorted according to the sorting expressions.

### [IgxSplitterComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSplitterComponent)
Provides a framework for a simple layout, splitting the view horizontally or vertically
into multiple smaller resizable and collapsible areas.

- **constructor**(document: any, elementRef: ElementRef<any>, zone: NgZone): IgxSplitterComponent
- **document**: `any`
- **nonCollapsible**: `boolean` — Sets the visibility of the handle and expanders in the splitter bar.
False by default
- **panes**: `QueryList<IgxSplitterPaneComponent>` — Gets the list of splitter panes.
- **resizeEnd**: `EventEmitter<ISplitterBarResizeEventArgs>` — Event fired when resizing of panes ends.
- **resizeStart**: `EventEmitter<ISplitterBarResizeEventArgs>` — Event fired when resizing of panes starts.
- **resizing**: `EventEmitter<ISplitterBarResizeEventArgs>` — Event fired when resizing of panes is in progress.
- **type**: `SplitterType` — Gets/Sets the splitter orientation.
- **onMoveEnd**(delta: number): void

### [IgxSplitterPaneComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSplitterPaneComponent)
Represents individual resizable/collapsible panes.

- **constructor**(el: ElementRef<any>): IgxSplitterPaneComponent
- **collapsedChange**: `EventEmitter<boolean>` — Event fired when collapsed state of pane is changed.
- **resizable**: `boolean` — Gets/Sets whether pane is resizable.
- **collapsed**: `boolean`
- **dragSize**: `any`
- **maxSize**: `string` — Gets/Set the maximum allowed size of the current pane.
- **minSize**: `string` — Gets/Sets the minimum allowed size of the current pane.
- **order**: `number`
- **size**: `string` — Gets/Sets the size of the current pane.
 *
- **toggle**(): void — Toggles the collapsed state of the pane.

### [IgxStepActiveIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepActiveIndicatorDirective)
Allows a custom element to be added as an active step indicator.

- **constructor**(): IgxStepActiveIndicatorDirective

### [IgxStepCompletedIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepCompletedIndicatorDirective)
Allows a custom element to be added as a complete step indicator.

- **constructor**(): IgxStepCompletedIndicatorDirective

### [IgxStepComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepComponent)
The IgxStepComponent is used within the igx-stepper element and it holds the content of each step.
It also supports custom indicators, title and subtitle.

- **constructor**(stepper: IgxStepper, cdr: ChangeDetectorRef, renderer: Renderer2, platform: PlatformUtil, stepperService: IgxStepperService, animationService: AnimationService, element: ElementRef<HTMLElement>, dir: IgxDirectionality): IgxStepComponent
- **activeChange**: `EventEmitter<boolean>` — Emitted when the step's active property changes. Can be used for two-way binding.

<igx-step [(active)]="this.isActive">
</igx-step>


const step: IgxStepComponent = this.stepper.step[0];
step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e))
- **cdr**: `ChangeDetectorRef`
- **completed**: `boolean` — Get/Set whether the step is completed.
- **id**: `string` — Get/Set the id of the step component.
Default value is "igx-step-0";
<igx-step id="my-first-step"></igx-step>

const stepId = this.step.id;
- **optional**: `boolean` — Get/Set whether the step is optional.
- **renderer**: `Renderer2`
- **stepper**: `IgxStepper`
- **active**: `boolean`
- **disabled**: `boolean`
- **index**: `number` — Get the step index inside of the stepper.

const step = this.stepper.steps[1];
const stepIndex: number = step.index;
- **isValid**: `boolean` — Get/Set whether the step is valid.
<igx-step [isValid]="form.form.valid">
     ...
     <div igxStepContent>
         <form #form="ngForm">
             ...
         </form>
     </div>
</igx-step>
- **tabIndex**: `number`

### [IgxStepContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepContentDirective)
Allows a custom element to be added as a step content.

- **constructor**(step: IgxStep, stepperService: IgxStepperService, elementRef: ElementRef<HTMLElement>): IgxStepContentDirective
- **defaultClass**: `boolean`
- **elementRef**: `ElementRef<HTMLElement>`
- **id**: `string`
- **role**: `string`
- **stepId**: `string`
- **tabIndex**: `number`

### [IgxStepIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepIndicatorDirective)
Allows a custom element to be added as a step indicator.

- **constructor**(): IgxStepIndicatorDirective

### [IgxStepInvalidIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepInvalidIndicatorDirective)
Allows a custom element to be added as an invalid step indicator.

- **constructor**(): IgxStepInvalidIndicatorDirective

### [IgxStepperComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepperComponent)
IgxStepper provides a wizard-like workflow by dividing content into logical steps.

- **constructor**(cdr: ChangeDetectorRef, animationService: AnimationService, stepperService: IgxStepperService, element: ElementRef<HTMLElement>): IgxStepperComponent
- **activeStepChanged**: `EventEmitter<IStepChangedEventArgs>` — Emitted when the active step is changed.
- **activeStepChanging**: `EventEmitter<IStepChangingEventArgs>` — Emitted when the stepper's active step is changing.

<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>


public handleActiveStepChanging(event: IStepChangingEventArgs) {
 if (event.newIndex < event.oldIndex) {
     event.cancel = true;
 }
}
- **contentTop**: `boolean` — Get/Set whether the content is displayed above the steps.
- **stepType**: `IgxStepType` — Get/Set the type of the steps.

this.stepper.stepType = IgxStepType.Indicator;
- **titlePosition**: `IgxStepperTitlePosition` — Get/Set the position of the steps title.
- **animationDuration**: `number` — Get/Set the animation duration.
<igx-stepper [animationDuration]="500">
<igx-stepper>
- **horizontalAnimationType**: `HorizontalAnimationType` — Get/Set the animation type of the stepper when the orientation direction is horizontal.
- **linear**: `boolean` — Get/Set whether the stepper is linear.
- **orientation**: `IgxStepperOrientation` — Get/Set the stepper orientation.

this.stepper.orientation = IgxStepperOrientation.Vertical;
- **steps**: `IgxStepComponent[]` — Get all steps.

const steps: IgxStepComponent[] = this.stepper.steps;
- **verticalAnimationType**: `VerticalAnimationType` — Get/Set the animation type of the stepper when the orientation direction is vertical.
- **navigateTo**(index: number): void — Activates the step at a given index.

this.stepper.navigateTo(1);
- **next**(): void — Activates the next enabled step.

this.stepper.next();
- **prev**(): void — Activates the previous enabled step.

this.stepper.prev();
- **reset**(): void — Resets the stepper to its initial state i.e. activates the first step.

### [IgxStepSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepSubtitleDirective)
Allows a custom element to be added as a step subtitle.

- **constructor**(): IgxStepSubtitleDirective
- **defaultClass**: `boolean`

### [IgxStepTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStepTitleDirective)
Allows a custom element to be added as a step title.

- **constructor**(): IgxStepTitleDirective
- **defaultClass**: `boolean`

### [IgxStringFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxStringFilteringOperand)
Provides filtering operations for strings

- static **applyIgnoreCase**(a: string, ignoreCase: boolean): string — Applies case sensitivity on strings if provided

### [IgxSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSummaryOperand)

- **constructor**(): IgxSummaryOperand
- **operate**(data: any[], _allData: any[], _fieldName?: string, _groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static count method and returns IgxSummaryResult[].
interface IgxSummaryResult {
  key: string;
  label: string;
  summaryResult: any;
}

Can be overridden in the inherited classes to provide customization for the summary.
class CustomSummary extends IgxSummaryOperand {
  constructor() {
    super();
  }
  public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
    const result = [];
    result.push({
      key: "test",
      label: "Test",
      summaryResult: IgxSummaryOperand.count(data)
    });
    return result;
  }
}
this.grid.getColumnByName('ColumnName').summaries = CustomSummary;
- static **count**(data: any[]): number — Counts all the records in the data source.
If filtering is applied, counts only the filtered records.
IgxSummaryOperand.count(dataSource);

### [IgxSummaryRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSummaryRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **grid**: `GridType` — The grid that contains the row.
- **index**: `number` — Returns the row index.
- **isSummaryRow**: `boolean` — Returns always true, because this is in instance of an IgxGroupByRow.
- **summaries**: `Map<string, IgxSummaryResult[]>` — Optional
A map of column field names to the summary results for the row.
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxSummaryTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSummaryTemplateDirective)

- **constructor**(template: TemplateRef<IgxSummaryTemplateContext>): IgxSummaryTemplateDirective
- **template**: `TemplateRef<IgxSummaryTemplateContext>`
- static **ngTemplateContextGuard**(_directive: IgxSummaryTemplateDirective, context: unknown): context

### [IgxSwitchComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxSwitchComponent)
The Switch component is a binary choice selection component.

- **constructor**(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl): IgxSwitchComponent
- **cssClass**: `string` — Returns the class of the switch component.
- **disabled**: `boolean` — Sets/gets the disabled attribute.
Default value is false.
- **focused**: `boolean` — Sets/gets whether the switch component is on focus.
Default value is false.
- **invalid**: `boolean` — Sets/gets whether the switch component is invalid.
Default value is false.
- **checked**: `boolean`

### [IgxTabContentComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabContentComponent)


### [IgxTabHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabHeaderComponent)


### [IgxTabHeaderIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabHeaderIconDirective)

- **constructor**(): IgxTabHeaderIconDirective

### [IgxTabHeaderLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabHeaderLabelDirective)

- **constructor**(): IgxTabHeaderLabelDirective

### [IgxTabItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabItemComponent)


### [IgxTabsComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTabsComponent)
Tabs component is used to organize or switch between similar data sets.

- **constructor**(animationService: AnimationService, cdr: ChangeDetectorRef, ngZone: NgZone, dir: IgxDirectionality, platform: PlatformUtil): IgxTabsComponent
- **activation**: `"auto" | "manual"` — Determines the tab activation.
When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed.
When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.
Defaults is auto.
- **tabAlignment**: `string` — Gets/Sets the tab alignment. Defaults to start.

### [IgxTextHighlightDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTextHighlightDirective)

- **constructor**(element: ElementRef<any>, service: IgxTextHighlightService, renderer: Renderer2): IgxTextHighlightDirective
- **activeCssClass**: `string` — Determines the CSS class of the active highlight element.
This allows the developer to provide custom CSS to customize the highlight.

<div
  igxTextHighlight
  [activeCssClass]="activeHighlightClass">
</div>
- **column**: `any` — The identifier of the column on which the directive is currently on.

<div
  igxTextHighlight
  [column]="0">
</div>
- **cssClass**: `string` — Determines the CSS class of the highlight elements.
This allows the developer to provide custom CSS to customize the highlight.

<div
  igxTextHighlight
  [cssClass]="myClass">
</div>
- **groupName**: `string` — Identifies the highlight within a unique group.
This allows it to have several different highlight groups,
with each of them having their own active highlight.

<div
  igxTextHighlight
  [groupName]="myGroupName">
</div>
- **metadata**: `Map<string, any>` — A map that contains all additional conditions, that you need to activate a highlighted
element. To activate the condition, you will have to add a new metadata key to
the metadata property of the IActiveHighlightInfo interface.
- **row**: `any` — The identifier of the row on which the directive is currently on.

<div
  igxTextHighlight
  [row]="0">
</div>
- **value**: `any` — The underlying value of the element that will be highlighted.

// get
const elementValue = this.textHighlight.value;


<!--set-->
<div
  igxTextHighlight
  [value]="newValue">
</div>
- **activateIfNecessary**(): void — Activates the highlight if it is on the currently active row and column.
- **clearHighlight**(): void — Clears any existing highlight.
- **highlight**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number — Clears the existing highlight and highlights the searched text.
Returns how many times the element contains the searched text.
- **observe**(): void — Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM.
Should be used only when necessary as using many observers may lead to performance degradation.

### [IgxTextHighlightService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTextHighlightService)

- **constructor**(): IgxTextHighlightService
- **highlightGroupsMap**: `Map<string, IActiveHighlightInfo>`
- **onActiveElementChanged**: `EventEmitter<string>`
- **clearActiveHighlight**(groupName: any): void — Clears any existing highlight.
- **destroyGroup**(groupName: string): void — Destroys a highlight group.
- **setActiveHighlight**(groupName: string, highlight: IActiveHighlightInfo): void — Activates the highlight at a given index.
(if such index exists)

### [IgxTextSelectionDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTextSelectionDirective)

- **constructor**(element: ElementRef<any>): IgxTextSelectionDirective
- **selected**: `boolean` — Determines whether the input element could be selected through the directive.

<!--set-->
<input
  type="text"
  id="firstName"
  [igxTextSelection]="true">
</input>

<input
  type="text"
  id="lastName"
  igxTextSelection
  [selected]="true">
</input>
- **nativeElement**: `any` — Returns the nativeElement of the element where the directive was applied.

<input
  type="text"
  id="firstName"
  igxTextSelection>
</input>


@ViewChild('firstName',
 {read: IgxTextSelectionDirective})
public inputElement: IgxTextSelectionDirective;

public getNativeElement() {
 return this.inputElement.nativeElement;
}
- **trigger**(): void — Triggers the selection of the element if it is marked as selectable.

<input
  type="text"
  id="firstName"
  igxTextSelection>
</input>


@ViewChild('firstName',
 {read: IgxTextSelectionDirective})
public inputElement: IgxTextSelectionDirective;

public triggerElementSelection() {
 this.inputElement.trigger();
}

### [IgxThumbFromTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxThumbFromTemplateDirective)
Template directive that allows you to set a custom template representing the lower label value of the IgxSliderComponent

<igx-slider>
 <ng-template igxSliderThumbFrom let-value let-labels>{{value}}</ng-template>
</igx-slider>

- **constructor**(): IgxThumbFromTemplateDirective

### [IgxThumbToTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxThumbToTemplateDirective)
Template directive that allows you to set a custom template representing the upper label value of the IgxSliderComponent

<igx-slider>
 <ng-template igxSliderThumbTo let-value let-labels>{{value}}</ng-template>
</igx-slider>

- **constructor**(): IgxThumbToTemplateDirective

### [IgxTickLabelTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTickLabelTemplateDirective)
Template directive that allows you to set a custom template, represeting primary/secondary tick labels of the IgxSliderComponent

- **constructor**(): IgxTickLabelTemplateDirective

### [IgxTimeFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTimeFilteringOperand)


### [IgxTimePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTimePickerComponent)

- **constructor**(element: ElementRef<any>, _localeId: string, _inputGroupType: IgxInputGroupType, _injector: Injector, platform: PlatformUtil, cdr: ChangeDetectorRef): IgxTimePickerComponent
- **displayFormat**: `string` — The format used when editable input is not focused. Defaults to the inputFormat if not set.
- **formatter**: `any` — Gets/Sets a custom formatter function on the selected or passed date.
- **headerOrientation**: `PickerHeaderOrientation` — Sets the orientation of the picker's header.
- **id**: `string` — Sets the value of the id attribute.
<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>
- **inputFormat**: `string` — The expected user input format and placeholder.
- **mode**: `PickerInteractionMode` — Gets/Sets the interaction mode - dialog or drop down.
- **selected**: `EventEmitter<Date>` — Emitted after a selection has been done.
- **spinLoop**: `boolean` — Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached.
By default it's set to true.
<igx-time-picker [spinLoop]="false"></igx-time-picker>
- **validationFailed**: `EventEmitter<IgxTimePickerValidationFailedEventArgs>` — Emitted when the user types/spins invalid time in the time-picker editor.
- **valueChange**: `EventEmitter<string | Date>` — Emitted when the picker's value changes.
- **cancelButtonLabel**: `string` — An accessor that returns the label of cancel button.
- **collapsed**: `boolean` — Gets if the dropdown/dialog is collapsed

let isCollapsed = this.timePicker.collapsed;
- **itemsDelta**: `Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">`
- **maxValue**: `string | Date`
- **minValue**: `string | Date`
- **okButtonLabel**: `string` — An accessor that returns the label of ok button.
- **resourceStrings**: `ITimePickerResourceStrings` — An accessor that returns the resource strings.
- **value**: `string | Date` — The currently selected value / time from the drop-down/dialog
- **clear**(): void — Clears the time picker value if it is a string or resets the time to 00:00:00 if the value is a Date object.
- **close**(): void — Closes the dropdown/dialog.
<igx-time-picker #timePicker></igx-time-picker>

@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
picker.close();
- **decrement**(datePart?: DatePart, delta?: number): void — Decrement a specified DatePart
- **increment**(datePart?: DatePart, delta?: number): void — Increment a specified DatePart.
- **open**(settings?: OverlaySettings): void — Opens the picker's dialog UI.
- **select**(date: string | Date): void — Selects time from the igxTimePicker.
- **toggle**(settings?: OverlaySettings): void

### [IgxTimeSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTimeSummaryOperand)

- **constructor**(): IgxTimeSummaryOperand
- **operate**(data: any[], allData: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[]
- static **earliestTime**(data: any[]): any — Returns the earliest time value in the data records. Compare only the time part of the date.
If filtering is applied, returns the earliest time value in the filtered data records.
IgxTimeSummaryOperand.earliestTime(data);
- static **latestTime**(data: any[]): any — Returns the latest time value in the data records. Compare only the time part of the date.
If filtering is applied, returns the latest time value in the filtered data records.
IgxTimeSummaryOperand.latestTime(data);

### [IgxToastComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxToastComponent)
**Ignite UI for Angular Toast** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)

The Ignite UI Toast provides information and warning messages that are non-interactive and cannot
be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page.

Example:
<button type="button" igxButton (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">
     Notification displayed
</igx-toast>

- **constructor**(_element: ElementRef<any>, cdr: ChangeDetectorRef, navService: IgxNavigationService, overlayService: IgxOverlayService): IgxToastComponent
- **id**: `string` — Sets/gets the id of the toast.
If not set, the id will have value "igx-toast-0".
<igx-toast id = "my-first-toast"></igx-toast>

let toastId = this.toast.id;
- **role**: `string` — Sets/gets the role attribute.
If not set, role will have value "alert".
<igx-toast [role] = "'notify'"></igx-toast>

let toastRole = this.toast.role;
- **element**: `any` — Gets the nativeElement of the toast.
let nativeElement = this.toast.element;
- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the toast.
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
let currentPosition: PositionSettings = this.toast.positionSettings
- **open**(message?: string, settings?: PositionSettings): void — Shows the toast.
If autoHide is enabled, the toast will hide after displayTime is over.

this.toast.open();
- **toggle**(): void — Opens or closes the toast, depending on its current state.

this.toast.toggle();

### [IgxToggleActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxToggleActionDirective)

- **constructor**(element: ElementRef<any>, navigationService: IgxNavigationService): IgxToggleActionDirective
- **outlet**: `ElementRef<any> | IgxOverlayOutletDirective` — Determines where the toggle element overlay should be attached.

<!--set-->
<div igxToggleAction [igxToggleOutlet]="outlet"></div>

Where outlet in an instance of IgxOverlayOutletDirective or an ElementRef
- **overlaySettings**: `OverlaySettings` — Provide settings that control the toggle overlay positioning, interaction and scroll behavior.
const settings: OverlaySettings = {
     closeOnOutsideClick: false,
     modal: false
 }

---
<!--set-->
<div igxToggleAction [overlaySettings]="settings"></div>

### [IgxToggleDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxToggleDirective)
Common interface for Components with show and collapse functionality

- **appended**: `EventEmitter<ToggleViewEventArgs>` — Emits an event after the toggle element is appended to the overlay container.

onAppended() {
 alert("Content appended!");
}


<div
  igxToggle
  (appended)='onToggleAppended()'>
</div>
- **closed**: `EventEmitter<ToggleViewEventArgs>` — Emits an event after the toggle container is closed.

onToggleClosed(event) {
 alert("Toggle closed!");
}


<div
  igxToggle
  (closed)='onToggleClosed($event)'>
</div>
- **closing**: `EventEmitter<ToggleViewCancelableEventArgs>` — Emits an event before the toggle container is closed.

onToggleClosing(event) {
 alert("Toggle closing!");
}


<div
 igxToggle
 (closing)='onToggleClosing($event)'>
</div>
- **id**: `string` — Identifier which is registered into IgxNavigationService

let myToggleId = this.toggle.id;
- **opened**: `EventEmitter<ToggleViewEventArgs>` — Emits an event after the toggle container is opened.

onToggleOpened(event) {
   alert("Toggle opened!");
}


<div
  igxToggle
  (opened)='onToggleOpened($event)'>
</div>
- **opening**: `EventEmitter<ToggleViewCancelableEventArgs>` — Emits an event before the toggle container is opened.

onToggleOpening(event) {
 alert("Toggle opening!");
}


<div
  igxToggle
  (opening)='onToggleOpening($event)'>
</div>
- **hiddenWebkitClass**: `boolean`
- **overlayId**: `string` — Returns the id of the overlay the content is rendered in.
this.myToggle.overlayId;
- **close**(event?: Event): void — Closes the toggle.

this.myToggle.close();
- **open**(overlaySettings?: OverlaySettings): void — Opens the toggle.

this.myToggle.open();
- **reposition**(): void — Repositions the toggle.
this.myToggle.reposition();
- **setOffset**(deltaX: number, deltaY: number, offsetMode?: OffsetMode): void — Offsets the content along the corresponding axis by the provided amount with optional
offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set
- **toggle**(overlaySettings?: OverlaySettings): void — Opens or closes the toggle, depending on its current state.

this.myToggle.toggle();

### [IgxTooltipDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTooltipDirective)
**Ignite UI for Angular Tooltip** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)

The Ignite UI for Angular Tooltip directive is used to mark an HTML element in the markup as one that should behave as a tooltip.
The tooltip is used in combination with the Ignite UI for Angular Tooltip Target by assigning the exported tooltip reference to the
respective target's selector property.

Example:
<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

- **context**: `any` — Gets/sets any tooltip related data.
The 'context' can be used for storing any information that is necessary
to access when working with the tooltip.

// get
let tooltipContext = this.tooltip.context;


// set
this.tooltip.context = "Tooltip's context";
- **id**: `string` — Identifier for the tooltip.
If this is property is not explicitly set, it will be automatically generated.

let tooltipId = this.tooltip.id;
- **role**: `string` — Get the role attribute of the tooltip.

let tooltipRole = this.tooltip.role;

### [IgxTooltipTargetDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTooltipTargetDirective)
**Ignite UI for Angular Tooltip Target** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)

The Ignite UI for Angular Tooltip Target directive is used to mark an HTML element in the markup as one that has a tooltip.
The tooltip target is used in combination with the Ignite UI for Angular Tooltip by assigning the exported tooltip reference to the
target's selector property.

Example:
<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

- **constructor**(_element: ElementRef<any>, _navigationService: IgxNavigationService, _viewContainerRef: ViewContainerRef): IgxTooltipTargetDirective
- **hideDelay**: `number` — Gets/sets the amount of milliseconds that should pass before hiding the tooltip.

// get
let tooltipHideDelay = this.tooltipTarget.hideDelay;


<!--set-->
<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [hideDelay]="1500">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
- **showDelay**: `number` — Gets/sets the amount of milliseconds that should pass before showing the tooltip.

// get
let tooltipShowDelay = this.tooltipTarget.showDelay;


<!--set-->
<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [showDelay]="1500">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
- **tooltipDisabled**: `boolean` — Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false)
While setting this property to 'true' will disable the user interactions that shows/hides the tooltip,
the developer will still be able to show/hide the tooltip through the API.

// get
let tooltipDisabledValue = this.tooltipTarget.tooltipDisabled;


<!--set-->
<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
- **tooltipHide**: `EventEmitter<ITooltipHideEventArgs>` — Emits an event when the tooltip that is associated with this target starts hiding.
This event is fired before the start of the countdown to hiding the tooltip.

tooltipHiding(args: ITooltipHideEventArgs) {
   alert("Tooltip started hiding!");
}


<button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipHide)='tooltipHiding($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
- **tooltipShow**: `EventEmitter<ITooltipShowEventArgs>` — Emits an event when the tooltip that is associated with this target starts showing.
This event is fired before the start of the countdown to showing the tooltip.

tooltipShowing(args: ITooltipShowEventArgs) {
   alert("Tooltip started showing!");
}


<button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipShow)='tooltipShowing($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
- **nativeElement**: `any` — Gets the respective native element of the directive.

let tooltipTargetElement = this.tooltipTarget.nativeElement;
- **tooltipHidden**: `boolean` — Indicates if the tooltip that is is associated with this target is currently hidden.

let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;
- **hideTooltip**(): void — Hides the tooltip by respecting the 'hideDelay' property.

this.tooltipTarget.hideTooltip();
- **showTooltip**(): void — Shows the tooltip by respecting the 'showDelay' property.

this.tooltipTarget.showTooltip();

### [IgxTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTransactionService)

- **constructor**(): IgxTransactionService<T, S>
- **canRedo**: `boolean`
- **canUndo**: `boolean`
- **enabled**: `boolean` — Returns whether transaction is enabled for this service
- **add**(transaction: T, recordRef?: any): void — Adds provided  transaction with recordRef if any
- **clear**(id?: any): void — Clears all transactions
- **commit**(data: any[], id?: any): void — Applies all transactions over the provided data
- **endPending**(commit: boolean): void — Clears all pending transactions and aggregated pending state. If commit is set to true
commits pending states as single transaction
- **getAggregatedChanges**(mergeChanges: boolean): T[] — Returns aggregated changes from all transactions
- **getAggregatedValue**(id: any, mergeChanges: boolean): any — Returns value of the required id including all uncommitted changes
- **getState**(id: any, pending: boolean): S — Returns the state of the record with provided id
- **getTransactionLog**(id?: any): T[] — Returns all recorded transactions in chronological order
- **redo**(): void — Applies the last undone transaction if any
- **undo**(): void — Remove the last transaction if any

### [IgxTreeComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTreeComponent)
IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.

- **constructor**(navService: IgxTreeNavigationService, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, element: ElementRef<HTMLElement>, platform: PlatformUtil): IgxTreeComponent
- **activeNodeChanged**: `EventEmitter<IgxTreeNode<any>>` — Emitted when the active node is changed.
- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that branches should use when expanding/collpasing.

<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>


const animationSettings: ToggleAnimationSettings = {
     openAnimation: growVerIn,
     closeAnimation: growVerOut
};

this.tree.animationSettings = animationSettings;
- **cssClass**: `string`
- **expandIndicator**: `TemplateRef<any>` — A custom template to be used for the expand indicator of nodes
<igx-tree>
 <ng-template igxTreeExpandIndicator let-expanded>
     <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
 </ng-template>
</igx-tree>
- **nodeCollapsed**: `EventEmitter<ITreeNodeToggledEventArgs>` — Emitted when a node is collapsed, after it finishes
- **nodeCollapsing**: `EventEmitter<ITreeNodeTogglingEventArgs>` — Emitted when a node is collapsing, before it finishes

<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>


public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
 const collapsedNode: IgxTreeNode<any> = event.node;
 if (collapsedNode.alwaysOpen) {
     event.cancel = true;
 }
}
- **nodeExpanded**: `EventEmitter<ITreeNodeToggledEventArgs>` — Emitted when a node is expanded, after it finishes

<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>


public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 console.log("Node is expanded: ", expandedNode.data);
}
- **nodeExpanding**: `EventEmitter<ITreeNodeTogglingEventArgs>` — Emitted when a node is expanding, before it finishes

<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>


public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 if (expandedNode.disabled) {
     event.cancel = true;
 }
}
- **nodeSelection**: `EventEmitter<ITreeNodeSelectionEvent>` — Emitted when the node selection is changed through interaction

<igx-tree (nodeSelection)="handleNodeSelection($event)">
</igx-tree>


public handleNodeSelection(event: ITreeNodeSelectionEvent) {
 const newSelection: IgxTreeNode<any>[] = event.newSelection;
 const added: IgxTreeNode<any>[] = event.added;
 console.log("New selection will be: ", newSelection);
 console.log("Added nodes: ", event.added);
}
- **singleBranchExpand**: `boolean` — Get/Set how the tree should handle branch expansion.
If set to true, only a single branch can be expanded at a time, collapsing all others

<igx-tree [singleBranchExpand]="true">
...
</igx-tree>


const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;
- **toggleNodeOnClick**: `boolean` — Get/Set if nodes should be expanded/collapsed when clicking over them.

<igx-tree [toggleNodeOnClick]="true">
...
</igx-tree>


const tree: IgxTree = this.tree;
this.tree.toggleNodeOnClick = false;
- **rootNodes**: `IgxTreeNodeComponent<any>[]` — Returns all **root level** nodes

const tree: IgxTree = this.tree;
const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes;
- **selection**: `IgxTreeSelectionType` — Gets/Sets tree selection mode
- **collapseAll**(nodes?: IgxTreeNode<any>[]): void — Collapses all of the passed nodes.
If no nodes are passed, collapses ALL nodes
- **deselectAll**(nodes?: IgxTreeNodeComponent<any>[]): void — Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection.
- **expandAll**(nodes?: IgxTreeNode<any>[]): void — Expands all of the passed nodes.
If no nodes are passed, expands ALL nodes
- **findNodes**(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNodeComponent<any>[] — Returns all of the nodes that match the passed searchTerm.
Accepts a custom comparer function for evaluating the search term against the nodes.

### [IgxTreeGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTreeGridComponent)
**Ignite UI for Angular Tree Grid** -
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)

The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and
provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding.

Example:
<igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-tree-grid>

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxHierarchicalTransactionFactory, _elementRef: ElementRef<HTMLElement>, _zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>): IgxTreeGridComponent
- **cascadeOnDelete**: `boolean` — Sets whether child records should be deleted when their parent gets deleted.
By default it is set to true and deletes all children along with the parent.
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
</igx-tree-grid>
- **childDataKey**: `string` — Sets the child data key of the IgxTreeGridComponent.
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
- **foreignKey**: `string` — Sets the foreign key of the IgxTreeGridComponent.
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>
- **hasChildrenKey**: `string` — Sets the key indicating whether a row has children.
This property is only used for load on demand scenarios.
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
               [loadChildrenOnDemand]="loadChildren"
               [hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>
- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated.
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
- **loadChildrenOnDemand**: `any` — Sets a callback for loading child rows on demand.
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren">
</igx-tree-grid>

public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, children => done(children));
}
- **processedRecords**: `Map<any, ITreeGridRecord>` — Returns a map of all processed (filtered and sorted) ITreeGridRecords.
// gets the processed record with primaryKey=2
const states = this.grid.processedRecords.get(2);
- **processedRootRecords**: `ITreeGridRecord[]` — Returns an array of processed (filtered and sorted) root ITreeGridRecords.
// gets the processed root record with index=2
const states = this.grid.processedRootRecords[2];
- **records**: `Map<any, ITreeGridRecord>` — Returns a map of all ITreeGridRecords.
// gets the record with primaryKey=2
const states = this.grid.records.get(2);
- **rootRecords**: `ITreeGridRecord[]` — Returns an array of the root level ITreeGridRecords.
// gets the root record with index=2
const states = this.grid.rootRecords[2];
- **data**: `any[]` — Gets/Sets the array of data that populates the component.
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
- **expansionDepth**: `number` — Sets the count of levels to be expanded in the IgxTreeGridComponent. By default it is
set to Infinity which means all levels would be expanded.
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
- **rowLoadingIndicatorTemplate**: `TemplateRef<void>` — Optional
The template for row loading indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **selectedCells**: `CellType[]` — Returns an array of the selected IgxGridCells.
- **addRow**(data: any, parentRowID?: any): void — Creates a new IgxTreeGridRowComponent with the given data. If a parentRowID is not specified, the newly created
row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
the specified parentRowID. If the parentRowID does not exist, an error would be thrown.
const record = {
    ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
    Name: this.newRecord
};
this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.
- **beginAddRowByIndex**(index: number, asChild?: boolean): void — Enters add mode by spawning the UI with the context of the specified row by index.
- **collapseAll**(): void — Collapses all rows.

this.grid.collapseAll();
- **expandAll**(): void — Expands all rows.
this.grid.expandAll();
- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getRowByIndex**(index: number): RowType — Returns the IgxTreeGridRow by index.
- **getRowByKey**(key: any): RowType — Returns the RowType object by the specified primary key.
- **getSelectedData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].
- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id.
- **unpinRow**(rowID: any): boolean — Unpin the row by its id.

### [IgxTreeGridRow](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTreeGridRow)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **children**: `RowType[]` — Optional
Contains the child rows of the current row, if there are any.
- **data**: `any` — The data passed to the row component.

let selectedRowData = this.grid.selectedRows[0].data;
- **disabled**: `boolean` — Optional
Indicates whether the current row is disabled
- **expanded**: `boolean` — Optional
Indicates whether the current row is expanded.
The value is true, if the row is expanded and false, if it is collapsed
- **hasChildren**: `boolean` — Optional
Indicates whether the current row has any child rows
- **parent**: `RowType` — Optional
Contains the parent row of the current row, if it has one.
If the parent row exist, it means that the current row is a child row
- **pinned**: `boolean` — Optional
Indicates whether the current row is pinned.
- **treeRow**: `ITreeGridRecord` — Optional
Represents the hierarchical record associated with the row (for tree grids).
It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc.
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxTreeNodeComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxTreeNodeComponent)
The tree node component represents a child node of the tree component or another tree node.
Usage:

 <igx-tree>
 ...
   <igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)">
     {{ data.FirstName }} {{ data.LastName }}
   </igx-tree-node>
 ...
 </igx-tree>

- **constructor**(tree: IgxTree, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, navService: IgxTreeNavigationService, cdr: ChangeDetectorRef, animationService: AnimationService, element: ElementRef<HTMLElement>, parentNode: IgxTreeNode<any>): IgxTreeNodeComponent<T>
- **data**: `T` — The data entry that the node is visualizing.
- **expandedChange**: `EventEmitter<boolean>` — Emitted when the node's expanded property changes.

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
     </igx-tree-node>
</igx-tree>


const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
- **loading**: `boolean` — To be used for load-on-demand scenarios in order to specify whether the node is loading data.
- **parentNode**: `IgxTreeNode<any>`
- **selectedChange**: `EventEmitter<boolean>` — Emitted when the node's selected property changes.

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
     </igx-tree-node>
</igx-tree>


const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
- **tree**: `IgxTree`
- **active**: `boolean`
- **children**: `IgxTreeNode<any>[]` — Return the child nodes of the node (if any)
- **disabled**: `boolean` — Gets/Sets the disabled state of the node
- **expanded**: `boolean` — Get/set whether the node is expanded

<igx-tree>
 ...
 <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
     {{ node.label }}
 </igx-tree-node>
</igx-tree>


const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const expanded = node.expanded;
node.expanded = true;
- **level**: `number` — The depth of the node, relative to the root

<igx-tree>
 ...
 <igx-tree-node #node>
     My level is {{ node.level }}
 </igx-tree-node>
</igx-tree>


const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
const level: number = node.level;
- **path**: `IgxTreeNode<any>[]` — Retrieves the full path to the node incuding itself

const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const path: IgxTreeNode<any>[] = node.path;
- **resourceStrings**: `ITreeResourceStrings` — An accessor that returns the resource strings.
- **selected**: `boolean` — Get/set whether the node is selected. Supporst two-way binding.

<igx-tree>
 ...
 <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
     {{ node.label }}
 </igx-tree-node>
</igx-tree>


const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const selected = node.selected;
node.selected = true;
- **collapse**(): void — Collapses the node, triggering animation

<igx-tree>
     <igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.collapse()">Collapse Node</button>


const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.collapse();
- **expand**(): void — Expands the node, triggering animation

<igx-tree>
     <igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.expand()">Expand Node</button>


const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.expand();
- **toggle**(): void — Toggles the node expansion state, triggering animation

<igx-tree>
     <igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.toggle()">Toggle Node</button>


const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.toggle();

### [IgxYearsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/IgxYearsViewComponent)

- **constructor**(el: ElementRef<any>, dayInterval: DayInterval): IgxYearsViewComponent
- **el**: `ElementRef<any>`
- **standalone**: `boolean`
- **yearFormat**: `any` — Gets the year format option of the years view.
let yearFormat = this.yearsView.yearFormat.

### [ITreeGridAggregation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ITreeGridAggregation)

- **constructor**(): ITreeGridAggregation
- **aggregate**: `any`
- **field**: `string`

### [NoopFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/NoopFilteringStrategy)

- **constructor**(): NoopFilteringStrategy
- **filter**(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[]
- static **instance**(): NoopFilteringStrategy

### [NoopPivotDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/NoopPivotDimensionsStrategy)
Interface describing Pivot data processing for dimensions.
Should contain a process method and return records hierarchy based on the provided dimensions.

- **constructor**(): NoopPivotDimensionsStrategy
- **process**(collection: any[], _: IPivotDimension[], __: IPivotValue[]): any[]
- static **instance**(): NoopPivotDimensionsStrategy

### [NoOpScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/NoOpScrollStrategy)
Empty scroll strategy. Does nothing.

- **constructor**(): NoOpScrollStrategy
- **attach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **detach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **initialize**(): void — Initializes the strategy. Should be called once

### [NoopSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/NoopSortingStrategy)
Represents a class implementing the IGridSortingStrategy interface with a no-operation sorting strategy.
It performs no sorting and returns the data as it is.

- **sort**(data: any[]): any[] — data: The array of data to be sorted. Could be of any type.
expressions: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc.
grid: (Optional) The instance of the grid where the sorting is applied.
Returns a new array with the data sorted according to the sorting expressions.
- static **instance**(): NoopSortingStrategy

### [PivotColumnDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/PivotColumnDimensionsStrategy)
Interface describing Pivot data processing for dimensions.
Should contain a process method and return records hierarchy based on the provided dimensions.

- **constructor**(): PivotColumnDimensionsStrategy
- **process**(collection: IPivotGridRecord[], columns: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys: IPivotKeys): any[]
- static **instance**(): PivotRowDimensionsStrategy | PivotColumnDimensionsStrategy

### [PivotRowDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/PivotRowDimensionsStrategy)
Interface describing Pivot data processing for dimensions.
Should contain a process method and return records hierarchy based on the provided dimensions.

- **constructor**(): PivotRowDimensionsStrategy
- **process**(collection: any, rows: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys: IPivotKeys): IPivotGridRecord[]
- static **instance**(): PivotRowDimensionsStrategy

### [Point](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/Point)

- **constructor**(x: number, y: number): Point
- **x**: `number`
- **y**: `number`

### [ScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ScrollStrategy)
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll).
Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService.

- **constructor**(): ScrollStrategy
- **attach**(): void — Attaches the strategy
settings.scrollStrategy.attach();
- **detach**(): void — Detaches the strategy
settings.scrollStrategy.detach();
- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): any — Initializes the strategy. Should be called once

### [ThemeToken](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/ThemeToken)

- **constructor**(t?: IgxTheme): ThemeToken
- **subject**: `BehaviorSubject<IgxTheme>`
- **preferToken**: `boolean`
- **theme**: `IgxTheme`
- **onChange**(callback: any): Subscription
- **set**(theme: IgxTheme): void

### [TreeGridFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/TreeGridFilteringStrategy)

- **constructor**(hierarchicalFilterFields?: string[]): TreeGridFilteringStrategy
- **hierarchicalFilterFields**: `string[]`
- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>

### [TreeGridFormattedValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/TreeGridFormattedValuesFilteringStrategy)

- **constructor**(fields?: string[]): TreeGridFormattedValuesFilteringStrategy

### [TreeGridMatchingRecordsOnlyFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/classes/TreeGridMatchingRecordsOnlyFilteringStrategy)

- **constructor**(hierarchicalFilterFields?: string[]): TreeGridMatchingRecordsOnlyFilteringStrategy
- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]

## Interfaces

### [Action](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/Action)

- **recordRef**: `any`
- **transaction**: `T`

### [AutocompleteOverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/AutocompleteOverlaySettings)

- **outlet?**: `ElementRef<any> | IgxOverlayOutletDirective` — Set the outlet container to attach the overlay to
- **positionStrategy?**: `IPositionStrategy` — Position strategy to use with this settings
- **scrollStrategy?**: `IScrollStrategy` — Scroll strategy to use with this settings

### [AutocompleteSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/AutocompleteSelectionChangingEventArgs)
Interface that encapsulates onItemSelection event arguments - new value and cancel selection.

- **value**: `string` — New value selected from the drop down

### [BannerCancelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/BannerCancelEventArgs)


### [BannerEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/BannerEventArgs)

- **event?**: `Event`

### [CancelableBrowserEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/CancelableBrowserEventArgs)

- **event?**: `Event` — Browser event

### [CancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/CancelableEventArgs)

- **cancel**: `boolean` — Provides the ability to cancel the event.

### [CarouselAnimationSettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/CarouselAnimationSettings)

- **enterAnimation**: `AnimationReferenceMetadata`
- **leaveAnimation**: `AnimationReferenceMetadata`

### [CellType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/CellType)
Interface representing a cell in the grid. It is essentially the blueprint to a cell object.
Contains definitions of properties and methods, relevant to a cell

- **active**: `boolean` — Indicates whether the cell is currently active (focused).
- **cellID?**: `any` — Optional; The cellID is the unique key, used to identify the cell
- **column**: `ColumnType` — Represents the column that the cell belongs to.
- **editable**: `boolean` — Indicates whether the cell can be edited.
- **editMode**: `boolean` — Indicates whether the cell is currently in edit mode.
- **editValue**: `any` — The value to display when the cell is in edit mode.
- **grid**: `GridType` — Represents the grid instance containing the cell
- **id?**: `any` — Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell.
- **nativeElement?**: `HTMLElement` — Represents the native HTML element of the cell itself
- **readonly?**: `boolean`
- **row**: `RowType` — Represents the row that the cell belongs to
- **selected**: `boolean` — Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is.
- **title?**: `any` — An optional title to display for the cell
- **update**: `any` — A method definition to update the value of the cell.
- **validation?**: `IGridValidationState` — Optional; An object representing the validation state of the cell.
Whether it's valid or invalid, and if it has errors
- **value**: `any` — The current value of the cell.
- **visibleColumnIndex?**: `number` — The index of the column that the cell belongs to. It counts only the visible (not hidden) columns
- **width**: `string` — The CSS width of the cell as a string.
- **activate?**: `any`
- **calculateSizeToFit?**: `any`
- **onClick?**: `any`
- **onDoubleClick?**: `any`
- **setEditMode?**: `any`

### [ColumnType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ColumnType)
Represents a column in the GridType. It is essentially the blueprint to a column object.
Contains definitions of properties and methods, relevant to a column

- **additionalTemplateContext**: `any`
- **applySelectableClass**: `boolean`
- **calcWidth**: `any` — Custom CSS styling, applied to every column
calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth
- **children**: `QueryList<ColumnType>` — A list containing all the child columns under this column (if any).
- **colEnd**: `number`
- **collapsible?**: `boolean` — Optional
Indicated whether the column can be collapsed. If the value is true, the column can be collapsed
It is used in tree grid and for navigation
- **collapsibleIndicatorTemplate?**: `TemplateRef<any>` — The template reference for the collapsible indicator of the column.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **colStart**: `number`
- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns.
- **columnLayout**: `boolean`
- **columnLayoutChild**: `boolean`
- **dataType**: `GridColumnDataType` — Represents the type of data for the column:
string, number, boolean, currency, date, time, etc.
- **disabledSummaries?**: `string[]`
- **disableHiding**: `boolean` — Indicates whether a column can be hidden. If the value is true, the column cannot be hidden
- **disablePinning**: `boolean` — Indicates whether a column can be pinned. If the value is true, the column cannot be pinned
- **editable**: `boolean` — Indicated whether the column can be edited. If the value is true, the column can be edited
- **editorOptions**: `IColumnEditorOptions` — Sets properties on the default column editors
- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded
- **filterable**: `boolean` — Indicates whether a column can be filtered. If the value is true, the column can be filtered
- **filterCellTemplate**: `TemplateRef<any>` — Represents a custom template for filtering
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **filteringExpressionsTree**: `FilteringExpressionsTree` — The filtering expressions for the column.
The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc.
- **filteringIgnoreCase**: `boolean`
- **grid**: `GridType` — Represents the instance of the parent GridType that contains this column.
- **groupable**: `boolean` — Indicates whether a column can be put in a group. If the value is true, the column can be put in a group
- **groupingComparer**: `any` — Represents a method with custom grouping comparator to determine the members of the group.
- **hasNestedPath**: `boolean`
- **hasSummary**: `boolean`
- **header?**: `string` — Optional
Represents the header text of the column
- **headerClasses**: `any` — Represents custom CSS classes applied to the header element. When added, they take different styling
- **headerGroupClasses**: `any` — Represents custom CSS classes applied to the header group. When added, they take different styling
- **headerGroupStyles**: `any` — Represents custom CSS styles applied to the header group. When added, they take different styling
- **headerStyles**: `any` — Represents custom CSS styles applied to the header element. When added, they take different styling
- **headerTemplate**: `TemplateRef<any>` — The template reference for the custom header of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible
- **index**: `number` — The index of the column within the grid.
Includes the hidden columns when counting
- **inlineEditorTemplate**: `TemplateRef<any>` — The template reference for the custom inline editor of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **isFirstPinned**: `boolean` — Indicates whether the current column is the first for the grid to be pinned.
If the value is false, there are columns, that have been pinned before the current
- **isLastPinned**: `boolean` — Indicates whether the current column is the last to be pinned.
If the value is false, there are columns, that have been pinned after the current
- **level**: `number` — Represents the hierarchical level of the column in the column layout
- **maxWidth**: `string`
- **maxWidthPercent**: `number`
- **maxWidthPx**: `number`
- **minWidth**: `string`
- **minWidthPercent**: `number`
- **minWidthPx**: `number`
- **parent?**: `ColumnType` — Optional
The immediate parent (right above) column of this column (if any).
If there is no parent, that means the current column is the root parent
- **pinned**: `boolean` — Indicates if the column is currently pinned. If the value is true, the column is pinned
- **pipeArgs**: `IColumnPipeArgs` — Optional arguments for any pipe applied to the field.
- **resizable**: `boolean` — Specifies whether the column can be resized. If the value is true, the column can be resized
- **resolvedWidth**: `string`
- **rowEnd**: `number`
- **rowStart**: `number`
- **searchable**: `boolean` — Specifies whether the data of the column can be searched. If the value is true, the column data can be searched
- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected
- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected
- **sortable**: `boolean` — Indicates whether a column can be sorted. If the value is true, the column can be sorted.
- **sortingIgnoreCase**: `boolean` — Indicates whether the search should match results, no matter the case of the letters (upper and lower)
If the value is false, the result will depend on the case (example: E will not match e)
If the value is true, the result will not depend on the case (example: E will match e)
- **sortStrategy**: `ISortingStrategy` — The sorting strategy used for sorting this column.
The interface contains a method sort that sorts the provided data based on the given sorting expressions
- **summaries**: `any`
- **summaryTemplate**: `TemplateRef<any>` — The template reference for a summary of the column
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **title**: `string` — The title of the column, used for accessibility purposes
- **topLevelParent?**: `ColumnType` — Optional
The root parent of this column (if any).
If there is no root parent, that means the current column is the root parent
- **validators**: `any[]`
- **visibleIndex**: `number` — The index of the column within the grid.
Does not include the hidden columns when counting
- **width**: `string`
- **childColumns**: `any`
- **getAutoSize**: `any`
- **getCellWidth**: `any`
- **getGridTemplate**: `any`
- **getResizableColUnderEnd**: `any`
- **move**: `any`
- **pin**: `any`
- **populateVisibleIndexes?**: `any`
- **toggleVisibility**: `any`
- **unpin**: `any`

### [DatePartDeltas](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/DatePartDeltas)
Delta values used for spin actions.

- **date?**: `number`
- **fractionalSeconds?**: `number`
- **hours?**: `number`
- **minutes?**: `number`
- **month?**: `number`
- **seconds?**: `number`
- **year?**: `number`

### [DateRange](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/DateRange)
Represents a range between two dates.

- **end**: `string | Date`
- **start**: `string | Date`

### [DateRangeDescriptor](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/DateRangeDescriptor)

- **dateRange?**: `Date[]`
- **type**: `DateRangeType`

### [DimensionValueType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/DimensionValueType)

- **children**: `Map<string, string | DimensionValueType>`
- **value**: `string`

### [EntityType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/EntityType)
Describes an entity in the QueryBuilder.
An entity represents a logical grouping of fields and can have nested child entities.

- **childEntities?**: `EntityType[]` — Optional child entities.
This allows building hierarchical or nested query structures.
- **fields**: `FieldType[]` — The list of fields that belong to this entity.
- **name**: `string` — The name of the entity.
Typically used as an identifier in expressions.

### [FamilyMeta](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/FamilyMeta)

- **className**: `string`
- **prefix?**: `string`
- **type**: `IconType`

### [FieldType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/FieldType)
Describes a field that can be used in the Grid and QueryBuilder components.

- **dataType**: `DataType` — The data type of the field.
- **defaultDateTimeFormat?**: `string` — Default date/time format for Date/Time fields.
- **defaultTimeFormat?**: `string` — Default time format for Date/Time fields.
- **editorOptions?**: `IFieldEditorOptions` — Options for the editor associated with this field.
- **field**: `string` — The internal field name, used in expressions and queries.
- **filters?**: `IgxFilteringOperand` — Optional filtering operands that apply to this field.
- **header?**: `string` — Optional column header for UI display purposes.
- **label?**: `string` — Display label for the field.
- **pipeArgs?**: `IFieldPipeArgs` — Optional arguments for any pipe applied to the field.
- **formatter?**: `any`

### [FlatGridType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/FlatGridType)
An interface describing a Flat Grid type. It is essentially the blueprint to a grid kind
Contains definitions of properties and methods, relevant to a grid kind
Extends from GridType

- **groupingExpansionState**: `IGroupByExpandState[]`
- **groupingExpressions**: `IGroupingExpression[]`
- **groupingExpressionsChange**: `EventEmitter<IGroupingExpression[]>`
- **clearGrouping**: `any`
- **groupBy**: `any`
- **toggleGroup**: `any`

### [GridSelectionRange](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/GridSelectionRange)
Represents a range selection between certain rows and columns of the grid.
Range selection can be made either through drag selection or through keyboard selection.

- **columnEnd**: `string | number` — The identifier or index of the ending column of the selection range.
It can be either a string representing the column's field name or a numeric index.
- **columnStart**: `string | number` — The identifier or index of the starting column of the selection range.
It can be either a string representing the column's field name or a numeric index.
- **rowEnd**: `number` — The index of the ending row of the selection range.
- **rowStart**: `number` — The index of the starting row of the selection range.

### [GridServiceType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/GridServiceType)
Represents the service interface for interacting with the grid.

- **cms**: `IgxColumnMovingService` — A service responsible for handling column moving within the grid. It contains a reference to the column, its icon, and indicator for cancelation.
- **crudService**: `any` — Represents the type of the CRUD service (Create, Read, Update, Delete) operations on the grid data.
- **grid**: `GridType` — The reference to the parent GridType that contains the service.
- **addRowToData**: `any`
- **clear_groupby?**: `any`
- **clear_sort**: `any`
- **deleteRowById**: `any`
- **expand_path_to_record?**: `any`
- **filterDataByExpressions**: `any`
- **get_all_data**: `any`
- **get_cell_by_index**: `any`
- **get_cell_by_key**: `any`
- **get_cell_by_visible_index**: `any`
- **get_column_by_name**: `any`
- **get_data**: `any`
- **get_groupBy_record_id?**: `any`
- **get_pin_row_event_args**: `any`
- **get_rec_by_id**: `any`
- **get_rec_id_by_index**: `any`
- **get_rec_index_by_id**: `any`
- **get_row_by_index**: `any`
- **get_row_by_key**: `any`
- **get_row_expansion_state**: `any`
- **get_row_id**: `any`
- **get_row_index_in_data**: `any`
- **get_selected_children?**: `any`
- **get_summary_data**: `any`
- **getChildGrid?**: `any`
- **getChildGrids?**: `any`
- **getParentRowId?**: `any`
- **getRowData**: `any`
- **prepare_sorting_expression**: `any`
- **registerChildRowIsland?**: `any`
- **remove_grouping_expression?**: `any`
- **row_deleted_transaction**: `any`
- **set_grouprow_expansion_state?**: `any`
- **set_row_expansion_state**: `any`
- **sort**: `any`
- **sort_multiple**: `any`
- **sortDataByExpressions**: `any`
- **unsetChildRowIsland?**: `any`
- **update_cell**: `any`
- **update_row**: `any`

### [GridSVGIcon](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/GridSVGIcon)

- **name**: `string`
- **value**: `string`

### [GridType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/GridType)
Interface representing a grid type. It is essentially the blueprint to a grid object.
Contains definitions of properties and methods, relevant to a grid
Extends IGridDataBindable

- **_baseFontSize?**: `number` — The default font size, calculated for each element
- **_filteredSortedUnpinnedData**: `any[]`
- **_filteredUnpinnedData**: `any[]`
- **_totalRecords**: `number`
- **activeNodeChange**: `EventEmitter<IActiveNodeChangeEventArgs>`
- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree`
- **advancedFilteringExpressionsTreeChange**: `EventEmitter<IFilteringExpressionsTree>`
- **allowAdvancedFiltering**: `boolean`
- **allowFiltering**: `boolean` — Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered
- **batchEditing**: `boolean`
- **batchEditingChange?**: `EventEmitter<boolean>`
- **calcHeight**: `number` — CSS styling calculated for an element: calcHeight, calcWidth, outerWidth
- **calcWidth**: `number`
- **cascadeOnDelete?**: `boolean`
- **cdr**: `ChangeDetectorRef` — Provides change detection functionality.
A change-detection tree collects all views that are to be checked for changes.
The property cannot be changed (readonly)
- **cellClick**: `EventEmitter<IGridCellEventArgs>`
- **cellEdit**: `EventEmitter<IGridEditEventArgs>`
- **cellEditDone**: `EventEmitter<IGridEditDoneEventArgs>`
- **cellEditEnter**: `EventEmitter<IGridEditEventArgs>`
- **cellEditExit**: `EventEmitter<IGridEditDoneEventArgs>`
- **cellSelection**: `GridSelectionMode` — Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'
- **childDataKey?**: `any`
- **childLayoutKeys?**: `any[]`
- **childLayoutList?**: `QueryList<any>`
- **columnInDrag**: `any` — Indicates if the column of the grid is in drag mode
- **columnList**: `QueryList<ColumnType>` — An unmodifiable list, containing all the columns of the grid.
- **columnMoving**: `EventEmitter<IColumnMovingEventArgs>`
- **columnMovingEnd**: `EventEmitter<IColumnMovingEndEventArgs>`
- **columnMovingStart**: `EventEmitter<IColumnMovingStartEventArgs>`
- **columnPin**: `EventEmitter<IPinColumnCancellableEventArgs>`
- **columnPinned**: `EventEmitter<IPinColumnEventArgs>`
- **columnResized**: `EventEmitter<IColumnResizeEventArgs>`
- **columns**: `ColumnType[]`
- **columnSelection**: `GridSelectionMode` — Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'
- **columnSelectionChanging**: `EventEmitter<IColumnSelectionEventArgs>`
- **columnVisibilityChanged**: `EventEmitter<IColumnVisibilityChangedEventArgs>`
- **columnVisibilityChanging**: `EventEmitter<IColumnVisibilityChangingEventArgs>`
- **columnWidthSetByUser**: `boolean` — Indicates whether the width of the column is set by the user, or is configured automatically.
- **contextMenu**: `EventEmitter<IGridContextMenuEventArgs>`
- **currencyPositionLeft**: `boolean` — Indicates whether the currency symbol is positioned to the left of values.
- **dataCloneStrategy**: `IDataCloneStrategy` — Strategy, used for cloning the provided data. The type has one method, that takes any type of data
- **dataRowList**: `any`
- **dataView**: `any[]`
- **dataWithAddedInTransactionRows**: `any[]`
- **defaultHeaderGroupMinWidth**: `any` — Minimal width for headers
- **defaultRowHeight**: `number`
- **defaultSummaryHeight**: `number`
- **disableTransitions**: `boolean` — Indicates whether transitions are disabled for the grid.
- **doubleClick**: `EventEmitter<IGridCellEventArgs>`
- **dragIndicatorIconBase**: `any` — The base drag indicator icon. Could be of any type
- **dragIndicatorIconTemplate**: `any` — The template for drag indicator icons. Could be of any type
- **excelStyleHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The template for header icon
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **expansionDepth?**: `number`
- **expansionStates**: `Map<any, boolean>`
- **filteredSortedData**: `any[]`
- **filtering**: `EventEmitter<IFilteringEventArgs>`
- **filteringDone**: `EventEmitter<IFilteringExpressionsTree>`
- **filteringExpressionsTree**: `IFilteringExpressionsTree`
- **filteringExpressionsTreeChange**: `EventEmitter<IFilteringExpressionsTree>`
- **filteringLogic**: `FilteringLogic`
- **filteringPipeTrigger**: `number`
- **filterMode**: `FilterMode` — The filter mode for the grid. It can be quick filter of excel-style filter
- **filterStrategy**: `IFilteringStrategy`
- **firstEditableColumnIndex**: `number`
- **flatData?**: `any[]`
- **foreignKey?**: `any`
- **formGroupCreated**: `EventEmitter<IGridFormGroupCreatedEventArgs>`
- **getHeaderCellWidth**: `any` — Property, that gets the header cell inner width for auto-sizing.
- **gridAPI**: `GridServiceType` — Represents the grid service type providing API methods for the grid
- **gridKeydown**: `EventEmitter<IGridKeydownEventArgs>`
- **groupByRowSelectorTemplate?**: `TemplateRef<IgxGroupByRowSelectorTemplateContext>` — Optional
The template for the group row selector.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **groupingExpansionState?**: `IGroupByExpandState[]`
- **groupingExpressions?**: `IGroupingExpression[]`
- **groupingExpressionsChange?**: `EventEmitter<IGroupingExpression[]>`
- **groupingFlatResult?**: `any[]`
- **groupingMetadata?**: `any[]`
- **groupingResult?**: `any[]`
- **groupRowTemplate?**: `TemplateRef<IgxGroupByRowTemplateContext>` — Optional
The template for group-by rows.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **groupsExpanded?**: `boolean`
- **groupsRecords?**: `IGroupByRecord[]`
- **groupStrategy?**: `IGridGroupingStrategy`
- **hasChildrenKey?**: `any`
- **hasDetails**: `boolean`
- **hasExpandableChildren?**: `boolean` — Optional
Indicates whether the grid has expandable children (hierarchical and tree grid)
- **hasPinnedRecords**: `boolean`
- **hasVisibleColumns**: `boolean` — Indicates whether the grid has columns that are shown
- **headerCollapsedIndicatorTemplate**: `TemplateRef<IgxGridTemplateContext>` — The template for header collapsed indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **headerExpandedIndicatorTemplate**: `TemplateRef<IgxGridTemplateContext>` — The template for header expanded indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **headerFeaturesWidth**: `number`
- **headSelectorBaseAriaLabel**: `string`
- **headSelectorTemplate**: `TemplateRef<IgxHeadSelectorTemplateContext>` — The template for the header selector.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **hiddenColumnsCount**: `number` — Represents the count of only the hidden (not visible) columns
- **highlightedRowID?**: `any`
- **iconTemplate?**: `TemplateRef<any>` — Optional
The template for grid icons.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **id**: `string` — Represents the unique identifier of the grid.
- **isCellSelectable**: `boolean` — Indicates whether cells are selectable in the grid
- **isLoading**: `boolean`
- **isMultiRowSelectionEnabled**: `boolean` — Indicates whether it is allowed to select more than one row in the grid
- **isPinningToStart**: `boolean` — Indicates whether the grid's element is pinned to the start of the grid
- **isRowPinningToTop**: `boolean`
- **isRowSelectable**: `boolean` — Indicates whether the grid's rows can be selected
- **lastChildGrid?**: `GridType`
- **lastEditableColumnIndex**: `number`
- **lastSearchInfo**: `ISearchInfo` — Represents the last search in the grid
It contains the search text (the user has entered), the match and some settings for the search
- **loadChildrenOnDemand?**: `any`
- **loadingRows?**: `Set<any>`
- **locale**: `string` — Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.
- **localeChange**: `EventEmitter<boolean>`
- **maxLevelHeaderDepth**: `number`
- **moving**: `boolean` — Indicates whether the grid is currently in a moving state.
- **multiRowLayoutRowSize**: `number`
- **nativeElement**: `HTMLElement` — Represents the native HTML element itself
- **navigation**: `any`
- **outerWidth**: `number`
- **outlet**: `any`
- **pagingMode**: `GridPagingMode` — Represents the paging of the grid. It can be either 'Local' or 'Remote'
- Local: Default value; The grid will paginate the data source based on the page
- **parent?**: `GridType`
- **parentVirtDir**: `any`
- **pinnedColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are pinned
- **pinnedColumnsCount**: `number` — Represents the count of only the pinned columns
- **pinnedRecords**: `any[]`
- **pinnedRecordsCount**: `number`
- **pinnedRows**: `any[]`
- **pinnedWidth**: `number` — The width of pinned element
- **pinning**: `IPinningConfig` — The configuration for columns and rows pinning in the grid
It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom)
- **pipeTrigger**: `number`
- **primaryKey**: `string` — Represents the unique primary key used for identifying rows in the grid
- **processedExpandedFlatData?**: `any[]`
- **processedRecords?**: `Map<any, ITreeGridRecord>`
- **processedRootRecords?**: `ITreeGridRecord[]`
- **rangeSelected**: `EventEmitter<GridSelectionRange>`
- **records?**: `Map<any, ITreeGridRecord>`
- **rendered$**: `Observable<boolean>`
- **renderedRowHeight**: `number` — The height of the visible rows in the grid.
- **resizeNotify**: `Subject<void>`
- **resourceStrings**: `IGridResourceStrings`
- **rootGrid?**: `GridType`
- **rootRecords?**: `ITreeGridRecord[]`
- **rootSummariesEnabled**: `boolean`
- **rowAdd**: `EventEmitter<IRowDataCancelableEventArgs>`
- **rowAdded**: `EventEmitter<IRowDataEventArgs>`
- **rowAddedNotifier**: `Subject<IRowDataEventArgs>`
- **rowClick**: `EventEmitter<IGridRowEventArgs>`
- **rowCollapsedIndicatorTemplate**: `TemplateRef<IgxGridRowTemplateContext>` — The template for collapsed row indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **rowDelete**: `EventEmitter<IRowDataCancelableEventArgs>`
- **rowDeleted**: `EventEmitter<IRowDataEventArgs>`
- **rowDeletedNotifier**: `Subject<IRowDataEventArgs>`
- **rowDragEnd**: `EventEmitter<IRowDragEndEventArgs>`
- **rowDraggable**: `boolean` — Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged
- **rowDragging**: `boolean` — Indicates whether a row is currently being dragged
- **rowDragStart**: `EventEmitter<IRowDragStartEventArgs>`
- **rowEdit**: `EventEmitter<IGridEditEventArgs>`
- **rowEditable**: `boolean` — Indicates whether rows in the grid are editable. If te value is true, the rows can be edited
- **rowEditDone**: `EventEmitter<IGridEditDoneEventArgs>`
- **rowEditEnter**: `EventEmitter<IGridEditEventArgs>`
- **rowEditExit**: `EventEmitter<IGridEditDoneEventArgs>`
- **rowEditingOverlay**: `IgxToggleDirective`
- **rowEditTabs**: `any`
- **rowExpandedIndicatorTemplate**: `TemplateRef<IgxGridRowTemplateContext>` — The template for expanded row indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **rowHeight**: `number` — The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling
- **rowList**: `any`
- **rowLoadingIndicatorTemplate?**: `TemplateRef<any>` — Optional
The template for row loading indicators.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **rowSelection**: `GridSelectionMode` — Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'
- **rowSelectionChanging**: `EventEmitter<IRowSelectionEventArgs>`
- **rowSelectorTemplate**: `TemplateRef<IgxRowSelectorTemplateContext>` — The template for row selectors.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **rowToggle**: `EventEmitter<IRowToggleEventArgs>`
- **scrollSize**: `number`
- **selected**: `EventEmitter<IGridCellEventArgs>`
- **selectedCells?**: `CellType[]`
- **selectedRows**: `any[]`
- **selectionService**: `any` — The service handling selection in the grid. Selecting, deselecting elements
- **selectRowOnClick**: `boolean`
- **showExpandAll?**: `boolean` — Optional
Indicates whether collapsed grid elements should be expanded
- **showRowSelectors**: `boolean` — Indicates whether the selectors of the rows are visible
- **sortAscendingHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The template for ascending sort header icons.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **sortDescendingHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The template for descending sort header icons.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **sortHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The template for sort header icons.
It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views
- **sortingExpressions**: `ISortingExpression<any>[]`
- **sortingExpressionsChange**: `EventEmitter<ISortingExpression<any>[]>`
- **sortingOptions**: `ISortingOptions`
- **sortStrategy**: `IGridSortingStrategy`
- **summariesMargin**: `number` — The CSS margin of the summaries
- **summariesRowList**: `any`
- **summaryCalculationMode**: `GridSummaryCalculationMode` — Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'
- **summaryPipeTrigger**: `number`
- **summaryPosition**: `GridSummaryPosition` — Represents the position of summaries: 'top', 'bottom'
- **summaryRowHeight**: `number`
- **tbody**: `any`
- **toolbarExporting**: `EventEmitter<IGridToolbarExportEventArgs>`
- **totalRowsCountAfterFilter**: `number`
- **transactions**: `TransactionService<Transaction, State>` — Represents the transaction service for the grid.
- **treeGroupArea?**: `any`
- **uniqueColumnValuesStrategy**: `any` — Property, that provides a callback for loading unique column values on demand.
If this property is provided, the unique values it generates will be used by the Excel Style Filtering
- **unpinnedColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are not pinned
- **unpinnedRecords**: `any[]`
- **unpinnedWidth**: `number` — The width of unpinned element
- **updateOnRender?**: `boolean`
- **validation**: `IgxGridValidationService` — Represents the validation service for the grid. The type contains properties and methods (logic) for validating records
- **validationStatusChange**: `EventEmitter<IGridValidationStatusEventArgs>`
- **validationTrigger**: `GridValidationTrigger` — The trigger for grid validation. It's value can either be change or blur
- **verticalScrollContainer**: `any`
- **virtualizationState**: `IForOfState` — Represents the state of virtualization for the grid. It has an owner, start index and chunk size
- **visibleColumns**: `ColumnType[]` — An array of columns, but it counts only the ones visible (not hidden) in the view
- **clearCellSelection**: `any`
- **clearGrouping?**: `any`
- **clearSort**: `any`
- **closeRowEditingOverlay**: `any`
- **collapseRow**: `any`
- **columnToVisibleIndex**: `any`
- **createColumnsList?**: `any`
- **createFilterDropdown**: `any`
- **createRow?**: `any`
- **deleteRow**: `any`
- **deleteRowById**: `any`
- **deselectAllColumns**: `any`
- **deselectAllRows**: `any`
- **deselectColumns**: `any`
- **deselectRows**: `any`
- **generateRowPath?**: `any`
- **getChildGrids?**: `any`
- **getColumnByName**: `any`
- **getColumnByVisibleIndex**: `any`
- **getDefaultExpandState**: `any`
- **getDragGhostCustomTemplate**: `any`
- **getEmptyRecordObjectFor**: `any`
- **getHeaderGroupWidth**: `any`
- **getInitialPinnedIndex**: `any`
- **getNextCell**: `any`
- **getPossibleColumnWidth**: `any`
- **getPreviousCell**: `any`
- **getRowByIndex?**: `any`
- **getRowByKey?**: `any`
- **getSelectedRanges**: `any`
- **getUnpinnedIndexById**: `any`
- **getVisibleContentHeight**: `any`
- **groupBy?**: `any`
- **hasVerticalScroll**: `any`
- **isChildGridRecord?**: `any`
- **isColumnGrouped**: `any`
- **isDetailRecord**: `any`
- **isExpandedGroup**: `any`
- **isGhostRecord**: `any`
- **isGroupByRecord**: `any`
- **isHierarchicalRecord?**: `any`
- **isRecordPinned**: `any`
- **isRecordPinnedByViewIndex**: `any`
- **isSummaryRow**: `any`
- **isTreeRow?**: `any`
- **moveColumn**: `any`
- **navigateTo**: `any`
- **notifyChanges**: `any`
- **openAdvancedFilteringDialog**: `any`
- **openRowOverlay**: `any`
- **pinRow**: `any`
- **preventHeaderScroll?**: `any`
- **reflow**: `any`
- **refreshSearch**: `any`
- **repositionRowEditingOverlay**: `any`
- **resetColumnCollections**: `any`
- **resetHorizontalVirtualization**: `any`
- **resolveOutlet?**: `any`
- **selectAllRows**: `any`
- **selectColumns**: `any`
- **selectedColumns**: `any`
- **selectRange**: `any`
- **selectRows**: `any`
- **setFilteredData**: `any`
- **setFilteredSortedData**: `any`
- **setUpPaginator**: `any`
- **showSnackbarFor**: `any`
- **sort**: `any`
- **toggleAll?**: `any`
- **toggleAllGroupRows?**: `any`
- **toggleGroup?**: `any`
- **trackColumnChanges**: `any`
- **triggerPipes**: `any`
- **unpinRow**: `any`
- **updateCell**: `any`
- **updateColumns**: `any`
- **updateRow**: `any`

### [HeaderType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/HeaderType)
Interface representing a header cell in the grid. It is essentially the blueprint to a header cell object.
Contains definitions of properties, relevant to the header

- **column**: `ColumnType` — The column that the header cell represents.
- **nativeElement**: `HTMLElement` — Represents the native HTML element of the cell itself
- **selectable**: `boolean` — Indicates whether the cell can be selected
- **selected**: `boolean` — Indicates whether the cell is currently selected
- **sortDirection**: `SortingDirection` — Represents the sorting direction of the column (ascending, descending or none).
- **sorted**: `boolean` — Indicates whether the column is currently sorted.
- **title**: `boolean` — Indicates whether the column header is a title cell.

### [HierarchicalGridType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/HierarchicalGridType)
An interface describing a Hierarchical Grid type. It is essentially the blueprint to a grid kind
Contains definitions of properties and methods, relevant to a grid kind
Extends from GridType

- **childLayoutKeys**: `any[]`

### [HierarchicalTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/HierarchicalTransactionService)

- **commit**: `any`

### [IAccordionCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IAccordionCancelableEventArgs)

- **owner**: `IgxAccordionComponent` — Provides reference to the owner component.
- **panel**: `IgxExpansionPanelBase` — Provides a reference to the IgxExpansionPanelComponent which is currently expanding/collapsing.

### [IAccordionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IAccordionEventArgs)

- **owner**: `IgxAccordionComponent` — Provides reference to the owner component.
- **panel**: `IgxExpansionPanelBase` — Provides a reference to the IgxExpansionPanelComponent which was expanded/collapsed.

### [IActionStripResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IActionStripResourceStrings)

- **igx_action_strip_button_more_title?**: `string`

### [IActiveHighlightInfo](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IActiveHighlightInfo)
An interface describing information for the active highlight.

- **column?**: `any` — The column of the highlight.
- **index**: `number` — The index of the highlight.
- **metadata?**: `Map<string, any>` — Additional, custom checks to perform prior an element highlighting.
- **row?**: `any` — The row of the highlight.

### [IActiveNodeChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IActiveNodeChangeEventArgs)
Emitted when the active node is changed

- **column**: `number` — Represents the column index of the active node
- **level?**: `number` — Optional
Represents the hierarchical level of the active node
- **row**: `number` — Represents the row index of the active node
- **tag**: `GridKeydownTargetType` — Represents the type of the active node.
The GridKeydownTargetType is an enum or that specifies the possible target types

### [IBannerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IBannerResourceStrings)

- **igx_banner_button_dismiss?**: `string`

### [IBaseChipEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IBaseChipEventArgs)

- **originalEvent**: `KeyboardEvent | MouseEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs`
- **owner**: `IgxChipComponent` — Provides reference to the owner component.

### [IBaseChipsAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IBaseChipsAreaEventArgs)

- **originalEvent**: `KeyboardEvent | MouseEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs`
- **owner**: `IgxChipsAreaComponent`

### [IBaseSearchInfo](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IBaseSearchInfo)

- **caseSensitive**: `boolean`
- **content**: `string`
- **exactMatch**: `boolean`
- **matchCount**: `number`
- **searchText**: `string`

### [IButtonEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IButtonEventArgs)

- **button**: `IgxButtonDirective`

### [IButtonGroupEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IButtonGroupEventArgs)

- **button**: `IgxButtonDirective`
- **index**: `number`
- **owner**: `IgxButtonGroupComponent` — Provides reference to the owner component.

### [ICachedViewLoadedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ICachedViewLoadedEventArgs)

- **oldContext**: `any`

### [ICalendarResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ICalendarResourceStrings)

- **igx_calendar_first_picker_of?**: `string`
- **igx_calendar_multi_selection?**: `string`
- **igx_calendar_next_month?**: `string`
- **igx_calendar_next_year?**: `string`
- **igx_calendar_next_years?**: `string`
- **igx_calendar_previous_month?**: `string`
- **igx_calendar_previous_year?**: `string`
- **igx_calendar_previous_years?**: `string`
- **igx_calendar_range_end?**: `string`
- **igx_calendar_range_label_end?**: `string`
- **igx_calendar_range_label_start?**: `string`
- **igx_calendar_range_placeholder?**: `string`
- **igx_calendar_range_selection?**: `string`
- **igx_calendar_range_start?**: `string`
- **igx_calendar_select_date?**: `string`
- **igx_calendar_select_month?**: `string`
- **igx_calendar_select_year?**: `string`
- **igx_calendar_selected_month_is?**: `string`
- **igx_calendar_single_selection?**: `string`
- **igx_calendar_singular_multi_selection?**: `string`
- **igx_calendar_singular_range_selection?**: `string`
- **igx_calendar_singular_single_selection?**: `string`

### [ICarouselResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ICarouselResourceStrings)

- **igx_carousel_next_slide?**: `string`
- **igx_carousel_of?**: `string`
- **igx_carousel_previous_slide?**: `string`
- **igx_carousel_slide?**: `string`

### [ICellPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ICellPosition)
The event is triggered when getting the current position of a certain cell

- **rowIndex**: `number` — It returns the position (index) of the row, the cell is in
- **visibleColumnIndex**: `number` — It returns the position (index) of the column, the cell is in
Counts only the visible (non hidden) columns

### [IChangeCheckboxEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChangeCheckboxEventArgs)

- **checked**: `boolean`
- **value?**: `any`

### [IChangeProgressEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChangeProgressEventArgs)

- **currentValue**: `number`
- **previousValue**: `number`

### [IChipClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipClickEventArgs)

- **cancel**: `boolean`

### [IChipEnterDragAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipEnterDragAreaEventArgs)

- **dragChip**: `IgxChipComponent`

### [IChipKeyDownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipKeyDownEventArgs)

- **cancel**: `boolean`
- **originalEvent**: `KeyboardEvent`

### [IChipResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipResourceStrings)

- **igx_chip_remove?**: `string`
- **igx_chip_select?**: `string`

### [IChipsAreaReorderEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipsAreaReorderEventArgs)

- **chipsArray**: `IgxChipComponent[]`

### [IChipsAreaSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipsAreaSelectEventArgs)

- **newSelection**: `IgxChipComponent[]`

### [IChipSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IChipSelectEventArgs)

- **cancel**: `boolean`
- **selected**: `boolean`

### [IClipboardOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IClipboardOptions)
An interface describing settings for clipboard options

- **copyFormatters**: `boolean` — Apply the columns formatters (if any) on the data in the clipboard output.
- **copyHeaders**: `boolean` — Include the columns headers in the clipboard output.
- **enabled**: `boolean` — Enables/disables the copy behavior
- **separator**: `string` — The separator used for formatting the copy output. Defaults to \t.

### [IColumnEditorOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnEditorOptions)


### [IColumnExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnExportingEventArgs)
columnExporting event arguments
this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
// set args properties here
});

- **cancel**: `boolean` — Skip the exporting column when set to true
- **columnIndex**: `number` — Contains the exporting column index
- **field**: `string` — Contains the exporting column field name
- **grid?**: `GridType` — A reference to the grid owner.
- **header**: `string` — Contains the exporting column header
- **skipFormatter**: `boolean` — Export the column's data without applying its formatter, when set to true

### [IColumnInfo](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnInfo)

- **columnGroup?**: `string | ColumnType`
- **columnGroupParent?**: `string | ColumnType`
- **columnSpan?**: `number`
- **currencyCode?**: `string`
- **dataType?**: `GridColumnDataType`
- **dateFormat?**: `string`
- **digitsInfo?**: `string`
- **displayFormat?**: `string`
- **exportIndex?**: `number`
- **field**: `string`
- **formatter?**: `any`
- **header**: `string`
- **headerType?**: `ExportHeaderType`
- **level?**: `number`
- **pinnedIndex?**: `number`
- **rowSpan?**: `number`
- **skip**: `boolean`
- **skipFormatter?**: `boolean`
- **startIndex?**: `number`

### [IColumnList](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnList)

- **columns**: `IColumnInfo[]`
- **columnWidths**: `number[]`
- **indexOfLastPinnedColumn**: `number`
- **maxLevel?**: `number`
- **maxRowLevel?**: `number`

### [IColumnMovingEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnMovingEndEventArgs)
Represents event arguments related to the end of a column moving operation in a grid

- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **source**: `ColumnType` — The source of the event represents the column that is being moved.
The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties
- **target**: `ColumnType` — The target of the event represents the column, the source is being moved to.
The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties

### [IColumnMovingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnMovingEventArgs)
Represents event arguments related to a column moving operation in a grid

- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **source**: `ColumnType` — Represents the column that is being moved.
The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties

### [IColumnMovingStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnMovingStartEventArgs)
Represents event arguments related to the start of a column moving operation in a grid.

- **source**: `ColumnType` — Represents the column that is being moved.
The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties

### [IColumnPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnPipeArgs)


### [IColumnResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnResizeEventArgs)
The event arguments when a column is being resized

- **column**: `ColumnType` — Represents the information of the column that is being resized
- **newWidth**: `string` — Represents the new width, the column is being resized to
- **prevWidth**: `string` — Represents the old width of the column before the resizing

### [IColumnResizingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnResizingEventArgs)
The event arguments when a column is being resized
It contains information about the column, it's old and new width
The event can be canceled


### [IColumnSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnSelectionEventArgs)
The event arguments when the selection state of a column is being changed
The event is cancelable

- **added**: `string[]` — Represents an array of all added columns
Whenever a column has been selected, the array is "refreshed" with the selected columns
- **event?**: `Event` — Represents the original event, that has triggered the selection change
selecting, deselecting
- **newSelection**: `string[]` — Represents the newly selected columns
- **oldSelection**: `string[]` — Represents an array of columns, that have already been selected
- **removed**: `string[]` — Represents an array of all columns, removed from the selection
Whenever a column has been deselected, the array is "refreshed" with the columns, that have been previously selected, but are no longer

### [IColumnSelectionState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnSelectionState)
Represents the state of the columns in the grid.

- **field**: `string` — Represents the field name of the selected column, if any. Can be null if no column is selected.
- **range**: `string[]` — An array of strings representing the ranges of selected columns in the grid.

### [IColumnState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnState)

- **colEnd?**: `number`
- **collapsible?**: `boolean`
- **colStart?**: `number`
- **columnGroup**: `boolean`
- **columnLayout?**: `boolean`
- **dataType**: `GridColumnDataType`
- **disableHiding**: `boolean`
- **disablePinning**: `boolean`
- **editable**: `boolean`
- **expanded?**: `boolean`
- **field**: `string`
- **filterable**: `boolean`
- **filteringIgnoreCase**: `boolean`
- **groupable**: `boolean`
- **hasSummary**: `boolean`
- **header**: `string`
- **headerClasses**: `string`
- **headerGroupClasses**: `string`
- **hidden**: `boolean`
- **key**: `string`
- **maxWidth**: `string`
- **parent?**: `any`
- **parentKey**: `string`
- **pinned**: `boolean`
- **resizable**: `boolean`
- **rowEnd?**: `number`
- **rowStart?**: `number`
- **searchable**: `boolean`
- **sortable**: `boolean`
- **sortingIgnoreCase**: `boolean`
- **visibleWhenCollapsed?**: `boolean`
- **width**: `any`

### [IColumnToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnToggledEventArgs)
Event emitted when a checkbox in the checkbox
list of an IgxColumnActions component is clicked.

- **checked**: `boolean` — The checked state after the action.
- **column**: `ColumnType` — The column that is toggled.

### [IColumnVisibilityChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnVisibilityChangedEventArgs)
The event arguments after a column's visibility is changed.

- **column**: `any` — Represents the column the event originated from
- **newValue**: `boolean` — The new hidden state that the column will have, if operation is successful.
Will be true when hiding and false when showing.

### [IColumnVisibilityChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IColumnVisibilityChangingEventArgs)
The event arguments when a column's visibility is changed.
The event is cancelable
It contains information about the column and the it's visibility after the operation (will be true when hiding and false when showing)


### [IComboFilteringOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IComboFilteringOptions)
The filtering criteria to be applied on data search

- **caseSensitive?**: `boolean` — Defines filtering case-sensitivity
- **filteringKey?**: `string` — Defines optional key to filter against complex list items. Default to displayKey if provided.

### [IComboItemAdditionEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IComboItemAdditionEvent)

- **addedItem**: `any`
- **newCollection**: `any[]`
- **oldCollection**: `any[]`

### [IComboResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IComboResourceStrings)

- **igx_combo_addCustomValues_placeholder?**: `string`
- **igx_combo_aria_label_no_options?**: `string`
- **igx_combo_aria_label_options?**: `string`
- **igx_combo_clearItems_placeholder?**: `string`
- **igx_combo_empty_message?**: `string`
- **igx_combo_filter_search_placeholder?**: `string`

### [IComboSearchInputEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IComboSearchInputEventArgs)
Event emitted when the igx-combo's search input changes

- **searchText**: `string` — The text that has been typed into the search input

### [IComboSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IComboSelectionChangingEventArgs)
Event emitted when an igx-combo's selection is changing

- **added**: `any[]` — An array containing the items that will be added to the selection (if any)
- **displayText**: `string` — The text that will be displayed in the combo text box
- **event?**: `Event` — The user interaction that triggered the selection change
- **newSelection**: `any[]` — An array containing the items that will be selected after this event
- **newValue**: `any[]` — An array containing the values that will be selected after this event
- **oldSelection**: `any[]` — An array containing the items that are currently selected
- **oldValue**: `any[]` — An array containing the values that are currently selected
- **removed**: `any[]` — An array containing the items that will be removed from the selection (if any)

### [IconFamily](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IconFamily)

- **meta**: `FamilyMeta`
- **name**: `string`

### [IconMeta](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IconMeta)

- **family**: `string`
- **name**: `string`
- **type?**: `IconType`

### [ICsvExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ICsvExportEndedEventArgs)

- **csvData?**: `string`

### [IDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDataCloneStrategy)

- **clone**: `any`

### [IDateParts](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDateParts)
Interface describing Date object in parts

- **day**: `number`
- **hours**: `number`
- **milliseconds**: `number`
- **minutes**: `number`
- **month**: `number`
- **seconds**: `number`
- **year**: `number`

### [IDatePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDatePickerResourceStrings)

- **igx_date_picker_change_date?**: `string`
- **igx_date_picker_choose_date?**: `string`

### [IDatePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDatePickerValidationFailedEventArgs)
Provides information about date picker reference and its previously valid value
when onValidationFailed event is fired.

- **currentValue**: `string | Date`
- **prevValue**: `string | Date`

### [IDateRangePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDateRangePickerResourceStrings)

- **igx_date_range_picker_date_separator?**: `string`
- **igx_date_range_picker_done_button?**: `string`

### [IDialogCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDialogCancellableEventArgs)


### [IDialogEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDialogEventArgs)

- **dialog**: `IgxDialogComponent`
- **event**: `Event`

### [IDimensionsChange](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDimensionsChange)
Event emitted when dimension collection for rows, columns of filters is changed.

- **dimensionCollectionType**: `PivotDimensionType` — The dimension list type - Row, Column or Filter.
- **dimensions**: `IPivotDimension[]` — The new list of dimensions.

### [IDragBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDragBaseEventArgs)

- **originalEvent**: `PointerEvent | MouseEvent | TouchEvent` — Reference to the original event that caused the interaction with the element.
Can be PointerEvent, TouchEvent or MouseEvent.
- **owner**: `IgxDragDirective` — The owner igxDrag directive that triggered this event.
- **pageX**: `number` — The current position of the pointer on X axis when the event was triggered.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **pageY**: `number` — The current position of the pointer on Y axis when the event was triggered.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **startX**: `number` — The initial position of the pointer on X axis when the dragged element began moving
- **startY**: `number` — The initial position of the pointer on Y axis when the dragged element began moving

### [IDragCustomTransitionArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDragCustomTransitionArgs)

- **delay?**: `number`
- **duration?**: `number`
- **timingFunction?**: `string`

### [IDragGhostBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDragGhostBaseEventArgs)

- **cancel**: `boolean` — Set if the ghost creation/destruction should be canceled.
- **ghostElement**: `any` — Instance to the ghost element that is created when dragging starts.
- **owner**: `IgxDragDirective` — The owner igxDrag directive that triggered this event.

### [IDragMoveEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDragMoveEventArgs)

- **nextPageX**: `number` — The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element X movement.
- **nextPageY**: `number` — The new pageX position of the pointer that the igxDrag will use. It can be overridden to limit dragged element Y movement.

### [IDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDragStartEventArgs)

- **cancel**: `boolean` — Set if the the dragging should be canceled.

### [IDropBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDropBaseEventArgs)

- **drag**: `IgxDragDirective` — The igxDrag directive instanced on an element that entered the area of the igxDrop element
- **dragData**: `any` — The data contained for the draggable element in igxDrag directive.
- **offsetX**: `number` — The current position of the pointer on X axis relative to the container that initializes the igxDrop.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **offsetY**: `number` — The current position of the pointer on Y axis relative to the container that initializes the igxDrop.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **originalEvent**: `any` — Reference to the original event that caused the draggable element to enter the igxDrop element.
Can be PointerEvent, TouchEvent or MouseEvent.
- **owner**: `IgxDropDirective` — The owner igxDrop directive that triggered this event.
- **pageX**: `number` — The current position of the pointer on X axis when the event was triggered.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **pageY**: `number` — The current position of the pointer on Y axis when the event was triggered.
Note: The browser might trigger the event with some delay and pointer would be already inside the igxDrop.
- **startX**: `number` — The initial position of the pointer on X axis when the dragged element began moving
- **startY**: `number` — The initial position of the pointer on Y axis when the dragged element began moving

### [IDropDownNavigationDirective](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDropDownNavigationDirective)
Interface for an instance of IgxDropDownNavigationDirective

- **target**: `any`
- **handleKeyDown**: `any`
- **onArrowDownKeyDown**: `any`
- **onArrowUpKeyDown**: `any`
- **onEndKeyDown**: `any`
- **onHomeKeyDown**: `any`

### [IDropDroppedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDropDroppedEventArgs)

- **cancel**: `boolean` — Specifies if the default drop logic related to the event should be canceled.

### [IDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IDropStrategy)

- **dropAction**: `any`

### [IExcelExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IExcelExportEndedEventArgs)

- **xlsx?**: `Object`

### [IExpansionPanelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IExpansionPanelEventArgs)

- **event**: `Event`

### [IExportRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IExportRecord)

- **data**: `any`
- **dimensionKeys?**: `string[]`
- **hidden?**: `boolean`
- **hierarchicalOwner?**: `string`
- **level**: `number`
- **owner?**: `string | GridType`
- **rawData?**: `any`
- **references?**: `IColumnInfo[]`
- **summaryKey?**: `string`
- **type**: `ExportRecordType`

### [IExpressionTree](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IExpressionTree)

- **entity?**: `string`
- **fieldName?**: `string`
- **filteringOperands**: `IFilteringExpression | IExpressionTree[]`
- **operator**: `FilteringLogic`
- **returnFields?**: `string[]`

### [IFieldEditorOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFieldEditorOptions)

- **dateTimeFormat?**: `string` — A custom input format string used for the built-in editors of date/time columns.
See the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time

### [IFieldPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFieldPipeArgs)

- **currencyCode?**: `string` — The currency code of type string, default value undefined
- **digitsInfo?**: `string` — Decimal representation options, specified by a string in the following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.
- **display?**: `string` — Allow us to display currency 'symbol' or 'code' or 'symbol-narrow' or our own string.
The value is of type string. By default is set to 'symbol'
- **format?**: `string` — The date/time components that a date column will display, using predefined options or a custom format string.
- **timezone?**: `string` — A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation.
- **weekStart?**: `number` — The first week day to be displayed in calendar when filtering or editing a date column

### [IFieldValidationState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFieldValidationState)
Interface representing the validation state of a field in the grid.
-field: The name of the field (property) being validated.

- **field**: `string`

### [IFilteringEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringEventArgs)
Represents event arguments related to filtering operations
The event is cancelable

- **filteringExpressions**: `IFilteringExpressionsTree` — Represents the filtering expressions applied to the grid.
The expression contains information like filtering operands and operator, an expression or condition, etc.

### [IFilteringExpression](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringExpression)
Represents filtering expressions.

- **condition?**: `IFilteringOperation`
- **conditionName?**: `string`
- **fieldName**: `string`
- **ignoreCase?**: `boolean`
- **searchTree?**: `IExpressionTree`
- **searchVal?**: `any`

### [IFilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringExpressionsTree)

- **filteringOperands**: `IFilteringExpression | IFilteringExpressionsTree[]`
- **find?**: `any`
- **findIndex?**: `any`
- **type?**: `FilteringExpressionsTreeType`

### [IFilteringOperation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringOperation)
Interface describing filtering operations

- **hidden?**: `boolean`
- **iconName**: `string`
- **isNestedQuery?**: `boolean`
- **isUnary**: `boolean`
- **logic?**: `any`
- **name**: `string`

### [IFilteringState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringState)

- **advancedExpressionsTree?**: `IFilteringExpressionsTree`
- **expressionsTree**: `IFilteringExpressionsTree`
- **strategy?**: `IFilteringStrategy`

### [IFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFilteringStrategy)

- **filter**: `any`
- **getFilterItems**: `any`

### [IFormattedParts](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFormattedParts)

- **combined**: `string`
- **literal?**: `string`
- **value**: `string`

### [IFormattingOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFormattingOptions)

- **day?**: `"numeric" | "2-digit"`
- **month?**: `"numeric" | "2-digit" | "short" | "long" | "narrow"`
- **weekday?**: `"short" | "long" | "narrow"`
- **year?**: `"numeric" | "2-digit"`

### [IFormattingViews](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IFormattingViews)

- **day?**: `boolean`
- **month?**: `boolean`
- **year?**: `boolean`

### [IForOfDataChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IForOfDataChangeEventArgs)


### [IForOfDataChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IForOfDataChangingEventArgs)

- **containerSize**: `number`
- **state**: `IForOfState`

### [IForOfState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IForOfState)

- **chunkSize?**: `number`
- **startIndex?**: `number`

### [IGridCellEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridCellEventArgs)
Represents an event argument related to grid cell interactions.

- **cell**: `CellType` — Represents the grid cell that triggered the event.
- **event**: `Event` — Represents the original event that occurred
Examples of such events include: selecting, clicking, double clicking, etc.

### [IGridClipboardEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridClipboardEvent)
The event arguments when data from a grid is being copied.

- **cancel**: `boolean` — cancel returns whether an external event has intercepted the copying
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **data**: `any[]` — data can be of any type and refers to the data that is being copied/stored to the clipboard

### [IGridContextMenuEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridContextMenuEventArgs)
Represents an event argument for the grid contextMenu output


### [IGridCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridCreatedEventArgs)

- **grid**: `IgxHierarchicalGridComponent`
- **owner**: `IgxRowIslandComponent` — Provides reference to the owner component.
- **parentID**: `any`
- **parentRowData?**: `any`

### [IGridDataBindable](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridDataBindable)

- **data**: `any[]`
- **filteredData**: `any`

### [IGridEditDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridEditDoneEventArgs)
Represents event arguments related to grid editing completion.

- **cellID?**: `any`
- **column?**: `ColumnType` — Optional
Represents the column information of the edited cell
- **event?**: `Event` — Optional
Represents the original event, that has triggered the edit
- **isAddRow?**: `boolean` — Optional
Indicates if the editing consists of adding a new row
- **newValue?**: `any` — Optional
Represents the value, that is being entered in the edited cell
When there is no newValue and the event has ended, the value of the cell returns to the oldValue
- **oldValue**: `any` — Represents the previous (before editing) value of the edited cell.
It's used when the event has been stopped/exited.
- **owner?**: `GridType` — Optional
Represents the grid instance that owns the edit event.
- **primaryKey**: `any`
- **rowData**: `any` — rowData represents the updated/committed data of the row after the edit (newValue)
The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled
- **rowID**: `any`
- **rowKey**: `any`
- **valid?**: `boolean` — Optional
Indicates if the new value would be valid.
It can be set to return the result of the methods for validation of the grid

### [IGridEditEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridEditEventArgs)
Represents event arguments related to grid editing.
The event is cancelable
It contains information about the row and the column, as well as the old and nwe value of the element/cell


### [IGridFormGroupCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridFormGroupCreatedEventArgs)
Interface representing the event arguments when a form group is created in the grid.
- formGroup: The form group that is created.
- owner: The grid instance that owns the form group.

- **formGroup**: `FormGroup<any>`
- **owner**: `GridType`

### [IGridGroupingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridGroupingStrategy)
Represents a grouping strategy for the grid data, extending the Sorting Strategy interface (contains a sorting method).

- **groupBy**: `any`

### [IGridKeydownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridKeydownEventArgs)
Represents an event, emitted when keydown is triggered over element inside grid's body
This event is fired only if the key combination is supported in the grid.

- **cancel**: `boolean` — The event is cancelable
cancel returns whether the event has been intercepted and stopped
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **event**: `Event` — Represents the original event, that occurred.
- **target**: `any` — Represents the information and details of the object itself
- **targetType**: `GridKeydownTargetType` — The targetType represents the type of the targeted object. For example a cell or a row

### [IGridResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridResourceStrings)

- **igx_grid_actions_add_child_label?**: `string`
- **igx_grid_actions_add_label?**: `string`
- **igx_grid_actions_delete_label?**: `string`
- **igx_grid_actions_edit_label?**: `string`
- **igx_grid_actions_jumpDown_label?**: `string`
- **igx_grid_actions_jumpUp_label?**: `string`
- **igx_grid_actions_pin_label?**: `string`
- **igx_grid_actions_unpin_label?**: `string`
- **igx_grid_add_row_label?**: `string`
- **igx_grid_advanced_filter_add_condition?**: `string`
- **igx_grid_advanced_filter_add_condition_root?**: `string`
- **igx_grid_advanced_filter_add_group?**: `string`
- **igx_grid_advanced_filter_add_group_root?**: `string`
- **igx_grid_advanced_filter_and_group?**: `string`
- **igx_grid_advanced_filter_and_label?**: `string`
- **igx_grid_advanced_filter_column_placeholder?**: `string`
- **igx_grid_advanced_filter_create_and_group?**: `string`
- **igx_grid_advanced_filter_create_or_group?**: `string`
- **igx_grid_advanced_filter_delete?**: `string`
- **igx_grid_advanced_filter_delete_filters?**: `string`
- **igx_grid_advanced_filter_dialog_checkbox_text?**: `string`
- **igx_grid_advanced_filter_dialog_message?**: `string`
- **igx_grid_advanced_filter_dialog_title?**: `string`
- **igx_grid_advanced_filter_drop_ghost_text?**: `string`
- **igx_grid_advanced_filter_end_group?**: `string`
- **igx_grid_advanced_filter_from_label?**: `string`
- **igx_grid_advanced_filter_initial_text?**: `string`
- **igx_grid_advanced_filter_or_group?**: `string`
- **igx_grid_advanced_filter_or_label?**: `string`
- **igx_grid_advanced_filter_query_value_placeholder?**: `string`
- **igx_grid_advanced_filter_select_entity?**: `string`
- **igx_grid_advanced_filter_select_return_field_single?**: `string`
- **igx_grid_advanced_filter_switch_group?**: `string`
- **igx_grid_advanced_filter_title?**: `string`
- **igx_grid_advanced_filter_ungroup?**: `string`
- **igx_grid_advanced_filter_value_placeholder?**: `string`
- **igx_grid_complex_filter?**: `string`
- **igx_grid_email_validation_error?**: `string`
- **igx_grid_emptyFilteredGrid_message?**: `string`
- **igx_grid_emptyGrid_message?**: `string`
- **igx_grid_excel_add_to_filter?**: `string`
- **igx_grid_excel_apply?**: `string`
- **igx_grid_excel_blanks?**: `string`
- **igx_grid_excel_boolean_filter?**: `string`
- **igx_grid_excel_cancel?**: `string`
- **igx_grid_excel_currency_filter?**: `string`
- **igx_grid_excel_custom_dialog_add?**: `string`
- **igx_grid_excel_custom_dialog_clear?**: `string`
- **igx_grid_excel_custom_dialog_header?**: `string`
- **igx_grid_excel_custom_filter?**: `string`
- **igx_grid_excel_date_filter?**: `string`
- **igx_grid_excel_deselect?**: `string`
- **igx_grid_excel_filter_clear?**: `string`
- **igx_grid_excel_filter_moving_header?**: `string`
- **igx_grid_excel_filter_moving_left?**: `string`
- **igx_grid_excel_filter_moving_left_short?**: `string`
- **igx_grid_excel_filter_moving_right?**: `string`
- **igx_grid_excel_filter_moving_right_short?**: `string`
- **igx_grid_excel_filter_sorting_asc?**: `string`
- **igx_grid_excel_filter_sorting_asc_short?**: `string`
- **igx_grid_excel_filter_sorting_desc?**: `string`
- **igx_grid_excel_filter_sorting_desc_short?**: `string`
- **igx_grid_excel_filter_sorting_header?**: `string`
- **igx_grid_excel_hide?**: `string`
- **igx_grid_excel_matches_count?**: `string`
- **igx_grid_excel_no_matches?**: `string`
- **igx_grid_excel_number_filter?**: `string`
- **igx_grid_excel_pin?**: `string`
- **igx_grid_excel_search_placeholder?**: `string`
- **igx_grid_excel_select?**: `string`
- **igx_grid_excel_select_all?**: `string`
- **igx_grid_excel_select_all_search_results?**: `string`
- **igx_grid_excel_show?**: `string`
- **igx_grid_excel_text_filter?**: `string`
- **igx_grid_excel_unpin?**: `string`
- **igx_grid_filter?**: `string`
- **igx_grid_filter_after?**: `string`
- **igx_grid_filter_all?**: `string`
- **igx_grid_filter_at?**: `string`
- **igx_grid_filter_at_after?**: `string`
- **igx_grid_filter_at_before?**: `string`
- **igx_grid_filter_before?**: `string`
- **igx_grid_filter_condition_placeholder?**: `string`
- **igx_grid_filter_contains?**: `string`
- **igx_grid_filter_doesNotContain?**: `string`
- **igx_grid_filter_doesNotEqual?**: `string`
- **igx_grid_filter_empty?**: `string`
- **igx_grid_filter_endsWith?**: `string`
- **igx_grid_filter_equals?**: `string`
- **igx_grid_filter_false?**: `string`
- **igx_grid_filter_greaterThan?**: `string`
- **igx_grid_filter_greaterThanOrEqualTo?**: `string`
- **igx_grid_filter_in?**: `string`
- **igx_grid_filter_lastMonth?**: `string`
- **igx_grid_filter_lastYear?**: `string`
- **igx_grid_filter_lessThan?**: `string`
- **igx_grid_filter_lessThanOrEqualTo?**: `string`
- **igx_grid_filter_nextMonth?**: `string`
- **igx_grid_filter_nextYear?**: `string`
- **igx_grid_filter_not_at?**: `string`
- **igx_grid_filter_notEmpty?**: `string`
- **igx_grid_filter_notIn?**: `string`
- **igx_grid_filter_notNull?**: `string`
- **igx_grid_filter_null?**: `string`
- **igx_grid_filter_operator_and?**: `string`
- **igx_grid_filter_operator_or?**: `string`
- **igx_grid_filter_row_boolean_placeholder?**: `string`
- **igx_grid_filter_row_close?**: `string`
- **igx_grid_filter_row_date_placeholder?**: `string`
- **igx_grid_filter_row_placeholder?**: `string`
- **igx_grid_filter_row_reset?**: `string`
- **igx_grid_filter_row_time_placeholder?**: `string`
- **igx_grid_filter_startsWith?**: `string`
- **igx_grid_filter_thisMonth?**: `string`
- **igx_grid_filter_thisYear?**: `string`
- **igx_grid_filter_today?**: `string`
- **igx_grid_filter_true?**: `string`
- **igx_grid_filter_yesterday?**: `string`
- **igx_grid_groupByArea_deselect_message?**: `string`
- **igx_grid_groupByArea_message?**: `string`
- **igx_grid_groupByArea_select_message?**: `string`
- **igx_grid_hiding_check_all_label?**: `string`
- **igx_grid_hiding_uncheck_all_label?**: `string`
- **igx_grid_max_length_validation_error?**: `string`
- **igx_grid_max_validation_error?**: `string`
- **igx_grid_min_length_validation_error?**: `string`
- **igx_grid_min_validation_error?**: `string`
- **igx_grid_pattern_validation_error?**: `string`
- **igx_grid_pinned_row_indicator?**: `string`
- **igx_grid_pinning_check_all_label?**: `string`
- **igx_grid_pinning_uncheck_all_label?**: `string`
- **igx_grid_pivot_aggregate_avg?**: `string`
- **igx_grid_pivot_aggregate_count?**: `string`
- **igx_grid_pivot_aggregate_date_earliest?**: `string`
- **igx_grid_pivot_aggregate_date_latest?**: `string`
- **igx_grid_pivot_aggregate_max?**: `string`
- **igx_grid_pivot_aggregate_min?**: `string`
- **igx_grid_pivot_aggregate_sum?**: `string`
- **igx_grid_pivot_aggregate_time_earliest?**: `string`
- **igx_grid_pivot_aggregate_time_latest?**: `string`
- **igx_grid_pivot_column_drop_chip?**: `string`
- **igx_grid_pivot_date_dimension_total?**: `string`
- **igx_grid_pivot_empty_column_drop_area?**: `string`
- **igx_grid_pivot_empty_filter_drop_area?**: `string`
- **igx_grid_pivot_empty_message?**: `string`
- **igx_grid_pivot_empty_row_drop_area?**: `string`
- **igx_grid_pivot_empty_value_drop_area?**: `string`
- **igx_grid_pivot_filter_drop_chip?**: `string`
- **igx_grid_pivot_row_drop_chip?**: `string`
- **igx_grid_pivot_selector_columns?**: `string`
- **igx_grid_pivot_selector_filters?**: `string`
- **igx_grid_pivot_selector_panel_empty?**: `string`
- **igx_grid_pivot_selector_rows?**: `string`
- **igx_grid_pivot_selector_values?**: `string`
- **igx_grid_pivot_value_drop_chip?**: `string`
- **igx_grid_required_validation_error?**: `string`
- **igx_grid_row_edit_btn_cancel?**: `string`
- **igx_grid_row_edit_btn_done?**: `string`
- **igx_grid_row_edit_text?**: `string`
- **igx_grid_snackbar_addrow_actiontext?**: `string`
- **igx_grid_snackbar_addrow_label?**: `string`
- **igx_grid_summary_average?**: `string`
- **igx_grid_summary_count?**: `string`
- **igx_grid_summary_earliest?**: `string`
- **igx_grid_summary_latest?**: `string`
- **igx_grid_summary_max?**: `string`
- **igx_grid_summary_min?**: `string`
- **igx_grid_summary_sum?**: `string`
- **igx_grid_toolbar_actions_filter_prompt?**: `string`
- **igx_grid_toolbar_advanced_filtering_button_label?**: `string`
- **igx_grid_toolbar_advanced_filtering_button_tooltip?**: `string`
- **igx_grid_toolbar_exporter_button_label?**: `string`
- **igx_grid_toolbar_exporter_button_tooltip?**: `string`
- **igx_grid_toolbar_exporter_csv_entry_text?**: `string`
- **igx_grid_toolbar_exporter_excel_entry_text?**: `string`
- **igx_grid_toolbar_hiding_button_tooltip?**: `string`
- **igx_grid_toolbar_hiding_title?**: `string`
- **igx_grid_toolbar_pinning_button_tooltip?**: `string`
- **igx_grid_toolbar_pinning_title?**: `string`

### [IGridRowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridRowEventArgs)
Represents an event argument related to grid row interactions.

- **event**: `Event` — Represents the original event that occurred
Examples of such events include: selecting, clicking, double clicking, etc.
- **row**: `RowType` — Represents the grid row that triggered the event.

### [IGridScrollEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridScrollEventArgs)
Event emitted when a grid is scrolled.

- **direction**: `string` — The scroll direction - vertical or horizontal.
- **event**: `Event` — The original browser scroll event.
- **scrollPosition**: `number` — The new scroll position

### [IGridSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridSortingStrategy)
Represents a sorting strategy for the grid data
Contains a single method sort that sorts the provided data based on the given sorting expressions

- **sort**: `any`

### [IGridState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridState)

- **advancedFiltering?**: `IFilteringExpressionsTree`
- **cellSelection?**: `GridSelectionRange[]`
- **columns?**: `IColumnState[]`
- **columnSelection?**: `string[]`
- **expansion?**: `any[]`
- **filtering?**: `IFilteringExpressionsTree`
- **groupBy?**: `IGroupingState`
- **id?**: `string`
- **moving?**: `boolean`
- **paging?**: `IPagingState`
- **pinningConfig?**: `IPinningConfig`
- **pivotConfiguration?**: `IPivotConfiguration`
- **rowIslands?**: `IGridStateCollection[]`
- **rowPinning?**: `any[]`
- **rowSelection?**: `any[]`
- **sorting?**: `ISortingExpression<any>[]`

### [IGridStateCollection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridStateCollection)

- **id**: `string`
- **parentRowID**: `any`
- **state**: `IGridState`

### [IGridStateOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridStateOptions)

- **advancedFiltering?**: `boolean`
- **cellSelection?**: `boolean`
- **columns?**: `boolean`
- **columnSelection?**: `boolean`
- **expansion?**: `boolean`
- **filtering?**: `boolean`
- **groupBy?**: `boolean`
- **moving?**: `boolean`
- **paging?**: `boolean`
- **pinningConfig?**: `boolean`
- **pivotConfiguration?**: `boolean`
- **rowIslands?**: `boolean`
- **rowPinning?**: `boolean`
- **rowSelection?**: `boolean`
- **sorting?**: `boolean`

### [IGridToolbarExportEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridToolbarExportEventArgs)
Represents the arguments for the grid toolbar export event.
It provides information about the grid instance, exporter service, export options,
and allows the event to be canceled.

- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **exporter**: `IgxBaseExporter` — The exporter is a base service.
The type (an abstract class IgxBaseExporter) has it's own properties and methods
It is used to define the format and options of the export, the exported element
and methods for preparing the data from the elements for exporting
- **grid**: `GridType` — grid represents a reference to the instance of the grid te event originated from
- **options**: `IgxExporterOptionsBase` — Represents the different settings, that can be given to an export
The type (an abstract class IgxExporterOptionsBase) has properties for column settings
(whether they should be ignored) as well as method for generating a file name

### [IGridValidationState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridValidationState)
Interface representing the validation state of a grid.
- status: The validation status ('VALID' or 'INVALID').
- errors: The validation errors if any.

- **errors?**: `ValidationErrors`
- **status**: `ValidationStatus`

### [IGridValidationStatusEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGridValidationStatusEventArgs)
Interface representing the event arguments for the grid validation status change event.
- status: The validation status ('VALID' or 'INVALID').
- owner: The grid instance that owns the validation state.

- **owner**: `GridType`
- **status**: `ValidationStatus`

### [IGroupByExpandState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupByExpandState)

- **expanded**: `boolean`
- **hierarchy**: `IGroupByKey[]`

### [IGroupByKey](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupByKey)

- **fieldName**: `string`
- **value**: `any`

### [IGroupByRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupByRecord)

- **column?**: `ColumnType`
- **expression**: `ISortingExpression<any>`
- **groupParent**: `IGroupByRecord`
- **groups?**: `IGroupByRecord[]`
- **height**: `number`
- **level**: `number`
- **records**: `GroupedRecords`
- **value**: `any`

### [IGroupingDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupingDoneEventArgs)

- **expressions**: `ISortingExpression<any> | ISortingExpression<any>[]`
- **groupedColumns**: `IgxColumnComponent | IgxColumnComponent[]`
- **ungroupedColumns**: `IgxColumnComponent | IgxColumnComponent[]`

### [IGroupingExpression](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupingExpression)

- **groupingComparer?**: `any`

### [IGroupingState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IGroupingState)

- **defaultExpanded**: `boolean`
- **expansion**: `IGroupByExpandState[]`
- **expressions**: `IGroupingExpression[]`

### [IgxCellTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxCellTemplateContext)

- **$implicit**: `any`
- **additionalTemplateContext**: `any`
- **cell**: `CellType`
- **defaultErrorTemplate?**: `TemplateRef<any>`
- **formControl?**: `FormControl<any>`

### [IgxColumnTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxColumnTemplateContext)

- **$implicit**: `ColumnType`
- **column**: `ColumnType`

### [IgxDateTimeEditorEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxDateTimeEditorEventArgs)

- **newValue?**: `Date`
- **oldValue?**: `Date`
- **userInput**: `string`

### [IgxDragCustomEventDetails](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxDragCustomEventDetails)

- **originalEvent**: `any`
- **owner**: `IgxDragDirective`
- **pageX**: `number`
- **pageY**: `number`
- **startX**: `number`
- **startY**: `number`

### [IgxExporterEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxExporterEvent)

- **cancel**: `boolean`
- **exporter**: `IgxBaseExporter`
- **grid**: `GridType`
- **options**: `IgxExporterOptions`

### [IgxFilterItem](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxFilterItem)

- **children?**: `IgxFilterItem[]`
- **label?**: `string`
- **value**: `any`

### [IgxGridEmptyTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridEmptyTemplateContext)

- **$implicit**: `undefined`

### [IgxGridHeaderTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridHeaderTemplateContext)

- **$implicit**: `HeaderType`

### [IgxGridMasterDetailContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridMasterDetailContext)

- **$implicit**: `any`
- **index**: `number`

### [IgxGridPaginatorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridPaginatorTemplateContext)

- **$implicit**: `GridType`

### [IgxGridRowDragGhostContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridRowDragGhostContext)

- **$implicit**: `any`
- **data**: `any`
- **grid**: `GridType`

### [IgxGridRowEditActionsTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridRowEditActionsTemplateContext)

- **$implicit**: `any`

### [IgxGridRowEditTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridRowEditTemplateContext)

- **$implicit**: `undefined`
- **endEdit**: `any`
- **rowChangesCount**: `number`

### [IgxGridRowEditTextTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridRowEditTextTemplateContext)

- **$implicit**: `number`

### [IgxGridRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridRowTemplateContext)

- **$implicit**: `RowType`

### [IgxGridTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridTemplateContext)

- **$implicit**: `GridType`

### [IgxGridToolbarTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGridToolbarTemplateContext)

- **$implicit**: `GridType`

### [IgxGroupByRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGroupByRowSelectorTemplateContext)

- **$implicit**: `IgxGroupByRowSelectorTemplateDetails`

### [IgxGroupByRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGroupByRowSelectorTemplateDetails)

- **groupRow**: `IGroupByRecord`
- **selectedCount**: `number`
- **totalCount**: `number`

### [IgxGroupByRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxGroupByRowTemplateContext)

- **$implicit**: `IGroupByRecord`

### [IgxHeadSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxHeadSelectorTemplateContext)

- **$implicit**: `IgxHeadSelectorTemplateDetails`

### [IgxHeadSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxHeadSelectorTemplateDetails)

- **deselectAll?**: `any`
- **selectAll?**: `any`
- **selectedCount**: `number`
- **totalCount**: `number`

### [IgxIconLoadedEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxIconLoadedEvent)
Event emitted when a SVG icon is loaded through
a HTTP request.

- **family**: `string` — The font-family for the icon. Defaults to material.
- **name**: `string` — Name of the icon
- **value?**: `string` — The actual SVG text, if any

### [IgxPivotGridValueTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxPivotGridValueTemplateContext)

- **$implicit**: `IPivotValue`

### [IgxRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxRowSelectorTemplateContext)

- **$implicit**: `IgxRowSelectorTemplateDetails`

### [IgxRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxRowSelectorTemplateDetails)

- **deselect?**: `any`
- **index**: `number`
- **key**: `any`
- **rowID**: `any`
- **select?**: `any`
- **selected**: `boolean`

### [IgxSummaryResult](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxSummaryResult)

- **defaultFormatting?**: `boolean` — Apply default formatting based on the grid column type.
const result: IgxSummaryResult = {
  key: 'key',
  label: 'label',
  defaultFormatting: true
}
- **key**: `string`
- **label**: `string`
- **summaryResult**: `any`

### [IgxSummaryTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxSummaryTemplateContext)

- **$implicit**: `IgxSummaryResult[]`

### [IgxTimePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxTimePickerValidationFailedEventArgs)

- **currentValue**: `string | Date`
- **previousValue**: `string | Date`

### [IgxTree](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxTree)

- **activeNodeChanged**: `EventEmitter<IgxTreeNode<any>>`
- **animationSettings**: `ToggleAnimationSettings`
- **expandIndicator**: `TemplateRef<any>`
- **nodeCollapsed**: `EventEmitter<ITreeNodeToggledEventArgs>`
- **nodeCollapsing**: `EventEmitter<ITreeNodeTogglingEventArgs>`
- **nodeExpanded**: `EventEmitter<ITreeNodeToggledEventArgs>`
- **nodeExpanding**: `EventEmitter<ITreeNodeTogglingEventArgs>`
- **nodeSelection**: `EventEmitter<ITreeNodeSelectionEvent>`
- **selection**: `IgxTreeSelectionType`
- **singleBranchExpand**: `boolean`
- **toggleNodeOnClick**: `boolean`
- **collapseAll**: `any`
- **deselectAll**: `any`
- **expandAll**: `any`
- **findNodes**: `any`

### [IgxTreeNode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IgxTreeNode)

- **active**: `boolean`
- **data**: `T`
- **disabled**: `boolean`
- **expanded**: `boolean`
- **expandedChange**: `EventEmitter<boolean>`
- **level**: `number`
- **loading**: `boolean`
- **parentNode?**: `IgxTreeNode<any>`
- **path**: `IgxTreeNode<any>[]`
- **selected**: `boolean`
- **selectedChange**: `EventEmitter<boolean>`
- **collapse**: `any`
- **expand**: `any`
- **toggle**: `any`

### [IInputResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IInputResourceStrings)

- **igx_input_file_placeholder?**: `string`
- **igx_input_upload_button?**: `string`

### [IListItemClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IListItemClickEventArgs)
Interface for the listItemClick igxList event arguments

- **direction**: `IgxListPanState`
- **event**: `Event`
- **item**: `IgxListItemComponent`

### [IListItemPanningEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IListItemPanningEventArgs)
Interface for the listItemPanning igxList event arguments

- **direction**: `IgxListPanState`
- **item**: `IgxListItemComponent`
- **keepItem**: `boolean`

### [IListResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IListResourceStrings)

- **igx_list_loading?**: `string`
- **igx_list_no_items?**: `string`

### [IMaskEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IMaskEventArgs)
The IgxMaskModule provides the IgxMaskDirective inside your application.

- **formattedValue**: `string`
- **rawValue**: `string`

### [IMultiRowLayoutNode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IMultiRowLayoutNode)

- **colEnd**: `number`
- **colStart**: `number`
- **columnVisibleIndex**: `number`
- **rowEnd**: `number`
- **rowStart**: `number`

### [IPageCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPageCancellableEventArgs)

- **current**: `number`
- **next**: `number`

### [IPageEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPageEventArgs)

- **current**: `number`
- **previous**: `number`

### [IPaginatorResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPaginatorResourceStrings)

- **igx_paginator_first_page_button_text?**: `string`
- **igx_paginator_label?**: `string`
- **igx_paginator_last_page_button_text?**: `string`
- **igx_paginator_next_page_button_text?**: `string`
- **igx_paginator_pager_text?**: `string`
- **igx_paginator_previous_page_button_text?**: `string`

### [IPagingState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPagingState)

- **index**: `number`
- **metadata?**: `any`
- **recordsPerPage**: `number`

### [IPanStateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPanStateChangeEventArgs)
Interface for the panStateChange igxList event arguments

- **item**: `IgxListItemComponent`
- **newState**: `IgxListPanState`
- **oldState**: `IgxListPanState`

### [IPathSegment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPathSegment)
Interface representing a segment of a path in a hierarchical grid.

- **rowID**: `any` — The unique identifier of the row within the segment.
- **rowIslandKey**: `string` — The key representing the row's 'hierarchical level.
- **rowKey**: `any`

### [IPinColumnCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPinColumnCancellableEventArgs)
The event arguments before a column's pin state is changed.
insertAtIndexspecifies at which index in the pinned/unpinned area the column is inserted.
Can be changed in the columnPin event.
isPinned returns the actual pin state of the column. When pinning/unpinning is successful,
the value of isPinned will change accordingly when read in the "-ing" and "-ed" event.


### [IPinColumnEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPinColumnEventArgs)
The event arguments after a column's pin state is changed.
insertAtIndexspecifies at which index in the pinned/unpinned area the column was inserted.
isPinned returns the actual pin state of the column after the operation completed.

- **column**: `ColumnType`
- **insertAtIndex**: `number` — If pinned, specifies at which index in the pinned area the column is inserted.
If unpinned, specifies at which index in the unpinned area the column is inserted.
- **isPinned**: `boolean` — Returns the actual pin state of the column.
If pinning/unpinning is successful, value of isPinned will change accordingly when read in the "-ing" and "-ed" event.

### [IPinningConfig](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPinningConfig)
An interface describing settings for row/column pinning position.

- **columns?**: `ColumnPinningPosition`
- **rows?**: `RowPinningPosition`

### [IPinRowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPinRowEventArgs)
Event emitted when a row's pin state changes.
The event is cancelable

- **insertAtIndex?**: `number` — The index at which to pin the row in the pinned rows collection.
- **isPinned**: `boolean` — Whether or not the row is pinned or unpinned.
- **row?**: `RowType`
- **rowID**: `any` — The ID of the row, that was pinned/unpinned.
ID is either the primaryKey value or the data record instance.
- **rowKey**: `any`

### [IPivotAggregator](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotAggregator)
Interface describing a IPivotAggregator class.
Used for specifying custom aggregator lists.

- **aggregator?**: `any` — Aggregator function can be a custom implementation of PivotAggregation, or
use predefined ones from IgxPivotAggregate and its variants.
- **aggregatorName?**: `PivotAggregationType` — Aggregation name that will be used from a list of predefined aggregations.
If not set will use the specified aggregator function.
- **key**: `string` — Aggregation unique key.
- **label**: `string` — Aggregation label to show in the UI.

### [IPivotConfiguration](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotConfiguration)
Configuration of the pivot grid.

- **columns**: `IPivotDimension[]` — A list of the columns.
- **columnStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the columns.
- **filters?**: `IPivotDimension[]` — Dimensions to be displayed in the filter area.
- **pivotKeys?**: `IPivotKeys` — Pivot data keys used for data generation. Can be used for custom remote scenarios where the data is pre-populated.
- **rows**: `IPivotDimension[]` — A list of the rows.
- **rowStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the rows.
- **values**: `IPivotValue[]` — A list of the values.

### [IPivotConfigurationChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotConfigurationChangedEventArgs)
Event emitted when pivot configuration is changed.

- **pivotConfiguration**: `IPivotConfiguration` — The new configuration.

### [IPivotDateDimensionOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotDateDimensionOptions)

- **fullDate?**: `boolean` — Enabled/Disables dimensions for the full date provided
- **months?**: `boolean` — Enables/Disables dimensions per month from provided periods.
- **quarters?**: `boolean`
- **total?**: `boolean` — Enables/Disables total value of all periods.
- **years?**: `boolean` — Enables/Disables dimensions per year from provided periods.

### [IPivotDimension](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotDimension)
Configuration of a pivot dimension.

- **childLevel?**: `IPivotDimension` — Allows defining a hierarchy when multiple sub groups need to be extracted from single member.
- **dataType?**: `GridColumnDataType` — The dataType of the related data field.
- **displayName?**: `string` — Display name to show instead of the field name of this value. *
- **enabled**: `boolean` — Enables/Disables a particular dimension from pivot structure.
- **filter?**: `IFilteringExpressionsTree` — A predefined or defined via the igxPivotSelector filter expression tree for the current dimension to be applied in the filter pipe.
- **horizontalSummary?**: `boolean`
- **level?**: `number` — Level of the dimension.
- **memberFunction?**: `any` — Function that extracts the value
- **memberName**: `string` — Unique member to extract related data field value or the result of the memberFunction.
- **sortable?**: `boolean` — Enable/disable sorting for a particular dimension. True by default.
- **sortDirection?**: `SortingDirection` — The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension.
- **width?**: `string` — The width of the dimension cells to be rendered.Can be pixel, % or "auto".

### [IPivotDimensionData](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotDimensionData)
Interface describing the pivot dimension data.
Contains additional information needed to render dimension headers.

- **column**: `ColumnType` — Associated column definition.
- **dimension**: `IPivotDimension` — Associated dimension definition.
- **isChild?**: `boolean` — Whether this a child dimension.
- **prevDimensions**: `IPivotDimension[]` — List of previous dimension groups.

### [IPivotDimensionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotDimensionStrategy)
Interface describing Pivot data processing for dimensions.
Should contain a process method and return records hierarchy based on the provided dimensions.

- **process**: `any`

### [IPivotGridColumn](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotGridColumn)
Interface describing the Pivot column data.
 Contains information on the related column dimensions and their values.

- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the column.*
- **dimensionValues**: `Map<string, string>` — Gets/Sets the group value associated with the related column dimension by its memberName. *
- **field**: `string`
- **value**: `IPivotValue`

### [IPivotGridGroupRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotGridGroupRecord)

- **height?**: `number`
- **rowSpan?**: `number`

### [IPivotGridHorizontalGroup](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotGridHorizontalGroup)

- **colSpan?**: `number`
- **colStart?**: `number`
- **dimensions?**: `IPivotDimension[]`
- **records?**: `IPivotGridRecord[]`
- **rootDimension?**: `IPivotDimension`
- **rowSpan?**: `number`
- **rowStart?**: `number`
- **value?**: `string`

### [IPivotGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotGridRecord)

- **aggregationValues**: `Map<string, any>` — Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.*
- **children?**: `Map<string, IPivotGridRecord[]>` — List of children records in case any row dimension member contain a hierarchy. Each dimension member contains its own hierarchy, which you can get by its memberName. *
- **dataIndex?**: `number` — The index of the record in the total view
- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the record.*
- **dimensionValues**: `Map<string, string>` — Gets/Sets the group value associated with the related row dimension by its memberName. *
- **level?**: `number` — Record level*
- **records?**: `any[]` — List of original data records associated with the current pivoted data. *
- **totalRecordDimensionName?**: `string` — If set, it specifies the name of the dimension, that has total record enabled.

### [IPivotKeys](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotKeys)
Interface describing the Pivot data keys used for data generation.
 Can be used for custom remote scenarios where the data is pre-populated.

- **aggregations**: `string` — Field that stores aggregation values.
- **children**: `string` — Field that stores children for hierarchy building.
- **columnDimensionSeparator**: `string` — Separator used when generating the unique column field values.
- **level**: `string` — Field that stores dimension level based on its hierarchy.
- **records**: `string` — Field that stores reference to the original data records.
- **rowDimensionSeparator**: `string` — Separator used when generating the unique row field values.

### [IPivotUISettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotUISettings)

- **horizontalSummariesPosition?**: `PivotSummaryPosition`
- **rowLayout?**: `PivotRowLayoutType`
- **showConfiguration?**: `boolean`
- **showRowHeaders?**: `boolean`

### [IPivotValue](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPivotValue)
Configuration of a pivot value aggregation.

- **aggregate**: `IPivotAggregator` — Active aggregator definition with key, label and aggregator.
- **aggregateList?**: `IPivotAggregator[]` — List of aggregates to show in aggregate drop-down.
- **dataType?**: `GridColumnDataType` — Enables a data type specific template of the cells
- **displayName?**: `string` — Display name to show instead of member for the column header of this value. *
- **enabled**: `boolean` — Enables/Disables a particular value from pivot aggregation.
- **formatter?**: `any` — Applies display format to cell values.
- **member**: `string` — Unique member to extract related data field value for aggregations.
- **styles?**: `any` — Allow conditionally styling of the IgxPivotGrid cells.

### [IPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IPositionStrategy)
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-position)
Position strategies determine where to display the component in the provided IgxOverlayService.

- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay
- **clone**: `any`
- **position**: `any`

### [IQueryBuilderResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IQueryBuilderResourceStrings)

- **igx_query_builder_add_condition?**: `string`
- **igx_query_builder_add_condition_root?**: `string`
- **igx_query_builder_add_group?**: `string`
- **igx_query_builder_add_group_root?**: `string`
- **igx_query_builder_all_fields?**: `string`
- **igx_query_builder_and_group?**: `string`
- **igx_query_builder_and_label?**: `string`
- **igx_query_builder_column_placeholder?**: `string`
- **igx_query_builder_condition_placeholder?**: `string`
- **igx_query_builder_date_placeholder?**: `string`
- **igx_query_builder_datetime_placeholder?**: `string`
- **igx_query_builder_delete?**: `string`
- **igx_query_builder_delete_filters?**: `string`
- **igx_query_builder_details?**: `string`
- **igx_query_builder_dialog_cancel?**: `string`
- **igx_query_builder_dialog_checkbox_text?**: `string`
- **igx_query_builder_dialog_confirm?**: `string`
- **igx_query_builder_dialog_message?**: `string`
- **igx_query_builder_dialog_title?**: `string`
- **igx_query_builder_drop_ghost_text?**: `string`
- **igx_query_builder_end_group?**: `string`
- **igx_query_builder_filter_after?**: `string`
- **igx_query_builder_filter_all?**: `string`
- **igx_query_builder_filter_at?**: `string`
- **igx_query_builder_filter_at_after?**: `string`
- **igx_query_builder_filter_at_before?**: `string`
- **igx_query_builder_filter_before?**: `string`
- **igx_query_builder_filter_contains?**: `string`
- **igx_query_builder_filter_doesNotContain?**: `string`
- **igx_query_builder_filter_doesNotEqual?**: `string`
- **igx_query_builder_filter_empty?**: `string`
- **igx_query_builder_filter_endsWith?**: `string`
- **igx_query_builder_filter_equals?**: `string`
- **igx_query_builder_filter_false?**: `string`
- **igx_query_builder_filter_greaterThan?**: `string`
- **igx_query_builder_filter_greaterThanOrEqualTo?**: `string`
- **igx_query_builder_filter_in?**: `string`
- **igx_query_builder_filter_lastMonth?**: `string`
- **igx_query_builder_filter_lastYear?**: `string`
- **igx_query_builder_filter_lessThan?**: `string`
- **igx_query_builder_filter_lessThanOrEqualTo?**: `string`
- **igx_query_builder_filter_nextMonth?**: `string`
- **igx_query_builder_filter_nextYear?**: `string`
- **igx_query_builder_filter_not_at?**: `string`
- **igx_query_builder_filter_notEmpty?**: `string`
- **igx_query_builder_filter_notIn?**: `string`
- **igx_query_builder_filter_notNull?**: `string`
- **igx_query_builder_filter_null?**: `string`
- **igx_query_builder_filter_operator_and?**: `string`
- **igx_query_builder_filter_operator_or?**: `string`
- **igx_query_builder_filter_startsWith?**: `string`
- **igx_query_builder_filter_thisMonth?**: `string`
- **igx_query_builder_filter_thisYear?**: `string`
- **igx_query_builder_filter_today?**: `string`
- **igx_query_builder_filter_true?**: `string`
- **igx_query_builder_filter_yesterday?**: `string`
- **igx_query_builder_from_label?**: `string`
- **igx_query_builder_initial_text?**: `string`
- **igx_query_builder_or_group?**: `string`
- **igx_query_builder_or_label?**: `string`
- **igx_query_builder_query_value_placeholder?**: `string`
- **igx_query_builder_search?**: `string`
- **igx_query_builder_select_all?**: `string`
- **igx_query_builder_select_entity?**: `string`
- **igx_query_builder_select_label?**: `string`
- **igx_query_builder_select_return_field_single?**: `string`
- **igx_query_builder_select_return_fields?**: `string`
- **igx_query_builder_switch_group?**: `string`
- **igx_query_builder_time_placeholder?**: `string`
- **igx_query_builder_ungroup?**: `string`
- **igx_query_builder_value_placeholder?**: `string`
- **igx_query_builder_where_label?**: `string`

### [IRangeSliderValue](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRangeSliderValue)

- **lower**: `number`
- **upper**: `number`

### [IRecordValidationState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRecordValidationState)
Interface representing the validation state of a record in the grid.
- key: The unique identifier of the record.
- fields: An array of the validation state of individual fields in the record.

- **fields**: `IFieldValidationState[]`
- **key**: `any`

### [IResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IResourceStrings)


### [IRowDataCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowDataCancelableEventArgs)
Represents event arguments related to events, that can occur for rows in a grid
Example for events: adding, deleting, selection, transaction, etc.

- **cellID?**: `any`
- **isAddRow?**: `boolean`
- **newValue?**: `any`
- **oldValue**: `any`
- **owner**: `GridType` — Represents the grid instance that owns the edit event.

### [IRowDataEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowDataEventArgs)
Represents event arguments related to events, that can occur for rows in a grid
Example for events: adding, deleting, selection, transaction, etc.

- **data**: `any`
- **owner**: `GridType` — Represents the grid instance that owns the edit event.
- **primaryKey**: `any` — Represents the unique key, the row can be associated with.
Available if primaryKey exists
- **rowData**: `any`
- **rowKey**: `any`

### [IRowDragEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowDragEndEventArgs)
Emitted when a dragging operation is finished (when the row is dropped)

- **animation**: `boolean` — animation returns whether the event is animated
- **dragData**: `RowType` — Represents the information of the row that is being dragged.
- **dragDirective**: `any` — Represents the drag directive or information associated with the drag operation
- **dragElement**: `HTMLElement` — Represents the HTML element itself

### [IRowDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowDragStartEventArgs)
Emitted when a dragging operation is starting (when the row is "picked")
The event is cancelable

- **dragData**: `RowType` — Represents the information of the row that is being dragged.
- **dragDirective**: `any` — Represents the drag directive or information associated with the drag operation
- **dragElement**: `HTMLElement` — Represents the HTML element itself

### [IRowExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowExportingEventArgs)
rowExporting event arguments
this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => {
// set args properties here
})

- **cancel**: `boolean` — Skip the exporting row when set to true
- **rowData**: `any` — Contains the exporting row data
- **rowIndex**: `number` — Contains the exporting row index

### [IRowSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowSelectionEventArgs)
The event arguments when the selection state of a row is being changed
The event is cancelable

- **added**: `any[]` — Represents an array of all added rows
Whenever a row has been selected, the array is "refreshed" with the selected rows
- **allRowsSelected?**: `boolean` — Indicates whether or not all rows of the grid have been selected
- **event?**: `Event` — Represents the original event, that has triggered the selection change
selecting, deselecting
- **newSelection**: `any[]` — Represents the newly selected rows
- **oldSelection**: `any[]` — Represents an array of rows, that have already been selected
- **removed**: `any[]` — Represents an array of all rows, removed from the selection
Whenever a row has been deselected, the array is "refreshed" with the rows,
that have been previously selected, but are no longer

### [IRowToggleEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IRowToggleEventArgs)
Represents event arguments related to the row's expansion state being changed in a grid

- **cancel**: `boolean` — The event is cancelable
cancel returns whether the event has been intercepted and stopped
If the value becomes "true", it returns/exits from the method, instantiating the interface
- **event?**: `Event` — Optional
Represents the original event, that has triggered the expansion/collapse
- **expanded**: `boolean` — Returns the state of the row after the operation has ended
Indicating whether the row is being expanded (true) or collapsed (false)
- **rowID**: `any` — Represents the ID of the row that emitted the event (which state is changed)
- **rowKey**: `any`

### [IScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IScrollStrategy)
[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-scroll).
Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService.

- **attach**: `any`
- **detach**: `any`
- **initialize**: `any`

### [ISearchInfo](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISearchInfo)

- **activeMatchIndex**: `number`
- **matchInfoCache**: `any[]`

### [ISelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISelectionEventArgs)
Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection.

- **newSelection**: `IgxDropDownItemBaseDirective`
- **oldSelection**: `IgxDropDownItemBaseDirective`

### [ISelectionKeyboardState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISelectionKeyboardState)
Represents the state of the keyboard when selecting.

- **active**: `boolean` — Indicates whether the selection is currently active (being performed). False when resetting the selection.
- **node**: `ISelectionNode` — The selected node in the grid, if any. Can be null if no node is selected.
- **range**: `GridSelectionRange` — The range of the selected cells in the grid. Can be null when resetting the selection.
- **shift**: `boolean` — Indicates whether the Shift key is currently pressed during the selection.

### [ISelectionNode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISelectionNode)
Represents a single selected cell or node in a grid.

- **column**: `number` — The index of the selected column.
- **isSummaryRow?**: `boolean` — (Optional)
Indicates if the selected node is a summary row.
This property is true if the selected row is a summary row; otherwise, it is false.
- **layout?**: `IMultiRowLayoutNode` — (Optional)
Additional layout information for multi-row selection nodes.
- **row**: `number` — The index of the selected row.

### [ISelectionPointerState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISelectionPointerState)
Represents the state of the grid selection using pointer interactions (mouse).
Extends ISelectionKeyboardState to include pointer-specific properties.

- **ctrl**: `boolean` — Indicates whether the Ctrl key is currently pressed during the selection.
- **primaryButton**: `boolean` — Indicates whether the primary pointer button is pressed during the selection (clicked).

### [ISimpleComboSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISimpleComboSelectionChangingEventArgs)
Emitted when an igx-simple-combo's selection is changing.

- **displayText**: `string` — The text that will be displayed in the combo text box
- **newSelection**: `any` — An object which represents the item that will be selected after this event
- **newValue**: `any` — An object which represents the value that will be selected after this event
- **oldSelection**: `any` — An object which represents the item that is currently selected
- **oldValue**: `any` — An object which represents the value that is currently selected

### [ISizeInfo](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISizeInfo)

- **padding**: `number`
- **width**: `number`

### [ISlideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISlideEventArgs)

- **carousel**: `IgxCarouselComponent`
- **slide**: `IgxSlideComponent`

### [ISliderValueChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISliderValueChangeEventArgs)

- **oldValue**: `number | IRangeSliderValue`
- **value**: `number | IRangeSliderValue`

### [ISortingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISortingEventArgs)
Represents event arguments related to sorting and grouping operations
The event is cancelable

- **groupingExpressions?**: `IGroupingExpression | IGroupingExpression[]` — Optional
Represents the grouping expressions applied to the grid.
It can be a single grouping expression or an array of them
The expression contains information like the sorting expression and criteria by which the elements will be grouped
- **sortingExpressions?**: `ISortingExpression<any> | ISortingExpression<any>[]` — Optional
Represents the sorting expressions applied to the grid.
It can be a single sorting expression or an array of them
The expression contains information like file name, whether the letter case should be taken into account, etc.

### [ISortingExpression](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISortingExpression)

- **dir**: `SortingDirection`
- **fieldName**: `KeyOfOrString<T, any> & string`
- **ignoreCase?**: `boolean`
- **strategy?**: `ISortingStrategy`

### [ISortingOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISortingOptions)

- **mode**: `"single" | "multiple"`

### [ISortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISortingStrategy)

- **sort**: `any`

### [ISplitterBarResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISplitterBarResizeEventArgs)

- **pane**: `IgxSplitterPaneComponent`
- **sibling**: `IgxSplitterPaneComponent`

### [IStepChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IStepChangedEventArgs)

- **index**: `number`
- **owner**: `IgxStepper` — Provides reference to the owner component.

### [IStepChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IStepChangingEventArgs)

- **newIndex**: `number`
- **oldIndex**: `number`
- **owner**: `IgxStepper` — Provides reference to the owner component.

### [ISummaryExpression](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISummaryExpression)

- **customSummary?**: `any`
- **fieldName**: `string`

### [ISummaryRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ISummaryRecord)

- **cellIndentation?**: `number`
- **max?**: `number`
- **summaries**: `Map<string, IgxSummaryResult[]>`

### [ITabsSelectedIndexChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITabsSelectedIndexChangingEventArgs)

- **cancel**: `boolean`
- **newIndex**: `number`
- **oldIndex**: `number`

### [ITabsSelectedItemChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITabsSelectedItemChangeEventArgs)

- **newItem**: `IgxTabItemDirective`
- **oldItem**: `IgxTabItemDirective`

### [ITimePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITimePickerResourceStrings)

- **igx_time_picker_cancel?**: `string`
- **igx_time_picker_change_time?**: `string`
- **igx_time_picker_choose_time?**: `string`
- **igx_time_picker_ok?**: `string`

### [IToggleView](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IToggleView)
Common interface for Components with show and collapse functionality

- **element**: `any`
- **close**: `any`
- **open**: `any`
- **toggle**: `any`

### [ITooltipHideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITooltipHideEventArgs)

- **cancel**: `boolean`
- **target**: `IgxTooltipTargetDirective`
- **tooltip**: `IgxTooltipDirective`

### [ITooltipShowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITooltipShowEventArgs)

- **cancel**: `boolean`
- **target**: `IgxTooltipTargetDirective`
- **tooltip**: `IgxTooltipDirective`

### [ITreeGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeGridRecord)

- **children?**: `ITreeGridRecord[]`
- **data**: `any`
- **expanded?**: `boolean`
- **isFilteredOutParent?**: `boolean`
- **key**: `any`
- **level?**: `number`
- **parent?**: `ITreeGridRecord`

### [ITreeNodeEditedEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeNodeEditedEvent)

- **node**: `IgxTreeNode<any>`
- **value**: `any`

### [ITreeNodeEditingEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeNodeEditingEvent)

- **node**: `IgxTreeNode<any>`
- **value**: `string`

### [ITreeNodeSelectionEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeNodeSelectionEvent)

- **added**: `IgxTreeNode<any>[]`
- **event?**: `Event` — Browser event
- **newSelection**: `IgxTreeNode<any>[]`
- **oldSelection**: `IgxTreeNode<any>[]`
- **removed**: `IgxTreeNode<any>[]`

### [ITreeNodeToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeNodeToggledEventArgs)

- **node**: `IgxTreeNode<any>`

### [ITreeNodeTogglingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeNodeTogglingEventArgs)

- **node**: `IgxTreeNode<any>`

### [ITreeResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ITreeResourceStrings)

- **igx_collapse?**: `string`
- **igx_expand?**: `string`

### [IValuesChange](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IValuesChange)
Event emitted when values list is changed.

- **values**: `IPivotValue[]` — The new list of values.

### [IViewChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IViewChangeEventArgs)

- **context**: `any`
- **owner**: `IgxTemplateOutletDirective` — Provides reference to the owner component.
- **view**: `EmbeddedViewRef<any>`

### [IViewDateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/IViewDateChangeEventArgs)

- **currentValue**: `Date`
- **previousValue**: `Date`

### [OverlayAnimationEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlayAnimationEventArgs)

- **animationPlayer**: `AnimationPlayer` — Animation player that will play the animation
- **animationType**: `"close" | "open"` — Type of animation to be played. It should be either 'open' or 'close'
- **id**: `string` — Id of the overlay generated with attach() method

### [OverlayCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlayCancelableEventArgs)


### [OverlayClosingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlayClosingEventArgs)


### [OverlayCreateSettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlayCreateSettings)

- **injector?**: `Injector` — An Injector instance to add in the created component ref's injectors tree.

### [OverlayEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlayEventArgs)

- **componentRef?**: `ComponentRef$1<any>` — Available when Type<T> is provided to the attach() method and allows access to the created Component instance
- **elementRef?**: `ElementRef<any>` — Will provide the elementRef of the markup that will be displayed in the overlay
- **event?**: `Event` — Will provide the original keyboard event if closed from ESC or click
- **id**: `string` — Id of the overlay generated with attach() method
- **settings?**: `OverlaySettings` — Will provide the overlay settings which will be used when the component is attached

### [OverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/OverlaySettings)

- **closeOnEscape?**: `boolean` — Set if the overlay should close when Esc key is pressed
- **closeOnOutsideClick?**: `boolean` — Set if the overlay should close on outside click
- **modal?**: `boolean` — Set if the overlay should be in modal mode
- **outlet?**: `ElementRef<any> | IgxOverlayOutletDirective` — Set the outlet container to attach the overlay to
- **positionStrategy?**: `IPositionStrategy` — Position strategy to use with these settings
- **scrollStrategy?**: `IScrollStrategy` — Scroll strategy to use with these settings
- **target?**: `HTMLElement | Point` — Attaching target for the component to show

### [PivotGridType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/PivotGridType)
An interface describing a Pivot Grid type. It is essentially the blueprint to a grid kind
Contains definitions of properties and methods, relevant to a grid kind
Extends from GridType

- **allDimensions**: `IPivotDimension[]` — An array of all dimensions (rows and columns) in the pivot grid.
it includes hierarchical level, filters and sorting, dimensional level, etc.
- **dimensionsChange**: `EventEmitter<IDimensionsChange>` — Emits an event when the dimensions in the pivot grid change.
- **dimensionsSortingExpressionsChange**: `EventEmitter<ISortingExpression<any>[]>` — Emits an event when the a dimension is sorted.
- **excelStyleFilterMaxHeight**: `string`
- **excelStyleFilterMinHeight**: `string`
- **hasMultipleValues**: `boolean`
- **pivotConfiguration**: `IPivotConfiguration` — The configuration settings for the pivot grid.
it includes dimension strategy for rows and columns, filters and data keys
- **pivotRowWidths**: `number`
- **pivotUI**: `IPivotUISettings` — Specifies whether to show the pivot configuration UI in the grid.
- **rowDimensionHeaderTemplate**: `TemplateRef<IgxColumnTemplateContext>`
- **rowDimensionResizing**: `boolean`
- **valueChipTemplate**: `TemplateRef<any>`
- **valuesChange**: `EventEmitter<IValuesChange>` — Emits an event when the values in the pivot grid change.
- **getDimensionsByType**: `any`
- **getRowDimensionByName**: `any`
- **moveDimension**: `any`
- **moveValue**: `any`
- **resolveDataTypes**: `any`
- **rowDimensionWidth**: `any`
- **rowDimensionWidthToPixels**: `any`
- **setupColumns**: `any`
- **sortDimension**: `any`
- **toggleDimension**: `any`
- **toggleRow**: `any`
- **toggleValue**: `any`

### [PivotRowHeaderGroupType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/PivotRowHeaderGroupType)

- **grid**: `any`
- **header**: `any`
- **headerID**: `string`
- **parent**: `any`
- **rowIndex**: `number`

### [PositionSettings](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/PositionSettings)

- **closeAnimation?**: `AnimationReferenceMetadata` — Animation applied while overlay closes
- **horizontalDirection?**: `HorizontalAlignment` — Direction in which the component should show
- **horizontalStartPoint?**: `HorizontalAlignment` — Target's starting point
- **minSize?**: `Size` — The size up to which element may shrink when shown in elastic position strategy
- **openAnimation?**: `AnimationReferenceMetadata` — Animation applied while overlay opens
- **verticalDirection?**: `VerticalAlignment` — Direction in which the component should show
- **verticalStartPoint?**: `VerticalAlignment` — Target's starting point

### [RowType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/RowType)
Interface representing a row in the grid. It is essentially the blueprint to a row object.
Contains definitions of properties and methods, relevant to a row

- **addRowUI?**: `boolean`
- **beginAddRow?**: `any` — Optional
A method to handle adding a new row
- **cells?**: `QueryList<CellType> | CellType[]` — Optional
A list or an array of cells, that belong to the row
- **children?**: `RowType[]` — Optional
Contains the child rows of the current row, if there are any.
- **data?**: `any`
- **delete?**: `any` — Optional
A method to handle deleting rows
- **deleted?**: `boolean` — Optional
Indicates whether the row is marked for deletion.
- **disabled?**: `boolean` — Optional
Indicates whether the current row is disabled
- **expanded?**: `boolean` — Optional
Indicates whether the current row is expanded.
The value is true, if the row is expanded and false, if it is collapsed
- **focused?**: `boolean` — Optional
Indicates whether the row is currently focused.
- **grid**: `GridType` — Represent the grid instance, the row belongs to
- **groupRow?**: `IGroupByRecord`
- **hasChildren?**: `boolean` — Optional
Indicates whether the current row has any child rows
- **index**: `number` — The index of the row within the grid
- **inEditMode?**: `boolean` — Optional
Indicates whether the row is currently being edited.
- **isGroupByRow?**: `boolean` — Indicates whether the row is grouped.
- **isSummaryRow?**: `boolean`
- **key?**: `any`
- **nativeElement?**: `HTMLElement` — Represents the native HTML element of the row itself
- **onClick?**: `any` — Optional
A method to handle click event on the row
It takes a MouseEvent as an argument
- **onRowSelectorClick?**: `any`
- **parent?**: `RowType` — Optional
Contains the parent row of the current row, if it has one.
If the parent row exist, it means that the current row is a child row
- **pin?**: `any` — Optional
A method to handle pinning a row
- **pinned?**: `boolean` — Optional
Indicates whether the current row is pinned.
- **selected?**: `boolean` — Optional
Indicates whether the current row is selected
- **summaries?**: `Map<string, IgxSummaryResult[]>` — Optional
A map of column field names to the summary results for the row.
- **treeRow?**: `ITreeGridRecord` — Optional
Represents the hierarchical record associated with the row (for tree grids).
It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc.
- **unpin?**: `any` — Optional
A method to handle unpinning a row, that has been pinned
- **update?**: `any` — Optional
A method to handle changing the value of elements of the row
It takes the new value as an argument
- **validation?**: `IGridValidationState`
- **viewIndex**: `number`
- **virtDirRow?**: `IgxGridForOfDirective<ColumnType, ColumnType[]>` — Optional
Virtualization state of data record added from cache

### [State](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/State)

- **recordRef**: `any`
- **type**: `TransactionType`
- **value**: `any`

### [StateUpdateEvent](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/StateUpdateEvent)

- **actions**: `Action<Transaction>[]`
- **origin**: `TransactionEventOrigin`

### [ToggleViewCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ToggleViewCancelableEventArgs)


### [ToggleViewEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/ToggleViewEventArgs)

- **event?**: `Event`
- **id**: `string` — Id of the toggle view

### [Transaction](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/Transaction)

- **id**: `any`
- **newValue**: `any`
- **type**: `TransactionType`

### [TransactionService](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/TransactionService)

- **canRedo**: `boolean`
- **canUndo**: `boolean`
- **cloneStrategy**: `IDataCloneStrategy` — Gets/Sets the data clone strategy used to clone data
- **enabled**: `boolean` — Returns whether transaction is enabled for this service
- **onStateUpdate?**: `EventEmitter<StateUpdateEvent>` — Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo
- **add**: `any`
- **clear**: `any`
- **commit**: `any`
- **endPending**: `any`
- **getAggregatedChanges**: `any`
- **getAggregatedValue**: `any`
- **getState**: `any`
- **getTransactionLog**: `any`
- **redo**: `any`
- **startPending**: `any`
- **undo**: `any`

### [TreeGridType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/interfaces/TreeGridType)
An interface describing a Tree Grid type. It is essentially the blueprint to a grid kind
Contains definitions of properties and methods, relevant to a grid kind
Extends from GridType

- **records**: `Map<any, ITreeGridRecord>`
- **isTreeRow**: `any`

## Enumerations

### [AbsolutePosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/AbsolutePosition)
Defines the possible positions for the absolute overlay settings presets.

- **Bottom** = "bottom"
- **Center** = "center"
- **Top** = "top"

### [ColumnPinningPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/ColumnPinningPosition)
Enumeration representing the possible positions for pinning columns.
- Start: Columns are pinned to the start of the grid.
- End: Columns are pinned to the end of the grid.

- **End** = 1
- **Start** = 0

### [CsvFileTypes](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/CsvFileTypes)
This enumeration is used to configure the default value separator
as well as the default file extension used when performing CSV exporting.

- **CSV** = 0 — Character Separated Values, default separator is "comma", default file extension is .csv
- **TAB** = 2 — Tab Separated Values, default separator is tab, default file extension is .tab
- **TSV** = 1 — Tab Separated Values, default separator is tab, default file extension is .tsv

### [DatePart](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/DatePart)
Specify a particular date, time or AmPm part.

- **AmPm** = "ampm"
- **Date** = "date"
- **FractionalSeconds** = "fractionalSeconds"
- **Hours** = "hours"
- **Literal** = "literal"
- **Minutes** = "minutes"
- **Month** = "month"
- **Seconds** = "seconds"
- **Year** = "year"

### [DateRangeType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/DateRangeType)

- **After** = 0
- **Before** = 1
- **Between** = 2
- **Specific** = 3
- **Weekdays** = 4
- **Weekends** = 5

### [Direction](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/Direction)

- **NEXT** = 1
- **NONE** = 0
- **PREV** = 2

### [DragDirection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/DragDirection)

- **BOTH** = 2
- **HORIZONTAL** = 1
- **VERTICAL** = 0

### [ExportHeaderType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/ExportHeaderType)

- **ColumnHeader** = "ColumnHeader"
- **MultiColumnHeader** = "MultiColumnHeader"
- **MultiRowHeader** = "MultiRowHeader"
- **PivotMergedHeader** = "PivotMergedHeader"
- **PivotRowHeader** = "PivotRowHeader"
- **RowHeader** = "RowHeader"

### [ExportRecordType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/ExportRecordType)

- **DataRecord** = "DataRecord"
- **GroupedRecord** = "GroupedRecord"
- **HeaderRecord** = "HeaderRecord"
- **HierarchicalGridRecord** = "HierarchicalGridRecord"
- **PivotGridRecord** = "PivotGridRecord"
- **SummaryRecord** = "SummaryRecord"
- **TreeGridRecord** = "TreeGridRecord"

### [FilteringExpressionsTreeType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/FilteringExpressionsTreeType)

- **Advanced** = 1
- **Regular** = 0

### [FilteringLogic](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/FilteringLogic)

- **And** = 0
- **Or** = 1

### [HorizontalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/HorizontalAlignment)

- **Center** = -0.5
- **Left** = -1
- **Right** = 0

### [IgxInputState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/IgxInputState)

- **INITIAL** = 0
- **INVALID** = 2
- **VALID** = 1

### [IgxListPanState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/IgxListPanState)

- **LEFT** = 1
- **NONE** = 0
- **RIGHT** = 2

### [PagingError](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/PagingError)

- **IncorrectPageIndex** = 1
- **IncorrectRecordsPerPage** = 2
- **None** = 0

### [PivotDimensionType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/PivotDimensionType)
The dimension types - Row, Column or Filter.

- **Column** = 1
- **Filter** = 2
- **Row** = 0

### [PivotRowLayoutType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/PivotRowLayoutType)

- **Horizontal** = "horizontal"
- **Vertical** = "vertical"

### [PivotSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/PivotSummaryPosition)

- **Bottom** = "bottom"
- **Top** = "top"

### [RelativePosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/RelativePosition)
Defines the possible positions for the relative overlay settings presets.

- **Above** = "above"
- **After** = "after"
- **Before** = "before"
- **Below** = "below"
- **Default** = "default"

### [RelativePositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/RelativePositionStrategy)
Defines the possible values of the overlays' position strategy.

- **Auto** = "auto"
- **Connected** = "connected"
- **Elastic** = "elastic"

### [RowPinningPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/RowPinningPosition)
Enumeration representing the possible positions for pinning rows.
- Top: Rows are pinned to the top of the grid.
- Bottom: Rows are pinned to the bottom of the grid.

- **Bottom** = 1
- **Top** = 0

### [ScrollDirection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/ScrollDirection)

- **NEXT** = "next"
- **NONE** = "none"
- **PREV** = "prev"

### [SortingDirection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/SortingDirection)

- **Asc** = 1
- **Desc** = 2
- **None** = 0

### [SplitterType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/SplitterType)
An enumeration that defines the SplitterComponent panes orientation.

- **Horizontal** = 0
- **Vertical** = 1

### [TRANSACTION_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/TRANSACTION_TYPE)
The type of the transaction that should be provided.
When batchEditing is disabled, None is provided.
When enabled - Base is provided.
An enum instead of a boolean value leaves room for extra scenarios in the future.

- **Base** = "Base"
- **None** = "None"

### [TransactionEventOrigin](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/TransactionEventOrigin)

- **ADD** = "add"
- **CLEAR** = "clear"
- **END** = "endPending"
- **REDO** = "redo"
- **UNDO** = "undo"

### [TransactionType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/TransactionType)

- **ADD** = "add"
- **DELETE** = "delete"
- **UPDATE** = "update"

### [VerticalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/VerticalAlignment)

- **Bottom** = 0
- **Middle** = -0.5
- **Top** = -1

### [WEEKDAYS](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/enums/WEEKDAYS)

- **FRIDAY** = 5
- **MONDAY** = 1
- **SATURDAY** = 6
- **SUNDAY** = 0
- **THURSDAY** = 4
- **TUESDAY** = 2
- **WEDNESDAY** = 3

## Type Aliases

### [ButtonGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/ButtonGroupAlignment)
`any`

### [CalendarSelection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/CalendarSelection)
`any`

### [CarouselAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/CarouselAnimationType)
`any`

### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/CarouselIndicatorsOrientation)
`any`

### [ColumnDisplayOrder](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/ColumnDisplayOrder)
`any`

### [DataType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/DataType)
`any`

### [ExpansionPanelHeaderIconPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/ExpansionPanelHeaderIconPosition)
`any`

### [FilterMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/FilterMode)
`any`

### [GridColumnDataType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridColumnDataType)
`any`

### [GridFeatures](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridFeatures)
`any`

### [GridKeydownTargetType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridKeydownTargetType)
`"dataCell" | "summaryCell" | "groupRow" | "hierarchicalRow" | "headerCell" | "masterDetailRow"`
Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid.
- 'dataCell': Represents a data cell within the grid. It contains and displays individual data values
- 'summaryCell': Summary cells display aggregated/summarized data at the bottom of the grid. They provide insights like total record count, min/max values, etc.
- 'groupRow': Group row within the grid. Group rows are used to group related data rows by columns. Contains the related group expression, level, sub-records and group value.
- 'hierarchicalRow': Hierarchical rows are similar to group rows, but represent a more complex hierarchical structure, allowing for nested grouping
- 'headerCell': Represents a header cell within the grid. Header cells are used to display column headers, providing context and labels for the columns.
- 'masterDetailRow': Represents a grid row that can be expanded in order to show additional information

### [GridPagingMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridPagingMode)
`any`

### [GridSelectionMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridSelectionMode)
`any`

### [GridSummaryCalculationMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridSummaryCalculationMode)
`any`

### [GridSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridSummaryPosition)
`any`

### [GridValidationTrigger](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/GridValidationTrigger)
`"change" | "blur"`
Type representing the triggers for grid cell validation.
- 'change': Validation is triggered when the cell value changes.
- 'blur': Validation is triggered when the cell loses focus.

### [HorizontalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/HorizontalAnimationType)
`any`

### [IconReference](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IconReference)
`IconMeta & FamilyMeta`

### [IgxAvatarSize](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxAvatarSize)
`any`

### [IgxAvatarType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxAvatarType)
`any`

### [IgxBadgeType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxBadgeType)
`any`

### [IgxButtonType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxButtonType)
`any`
Determines the Button type.

### [IgxCalendarView](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxCalendarView)
`any`
Determines the Calendar active view - days, months or years.

### [IgxCardActionsLayout](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxCardActionsLayout)
`any`

### [IgxDividerType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxDividerType)
`any`

### [IgxExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxExporterOptions)
`IgxCsvExporterOptions | IgxExcelExporterOptions`

### [IgxIconButtonType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxIconButtonType)
`any`
Determines the Icon Button type.

### [IgxInputGroupType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxInputGroupType)
`any`
Determines the InputGroupType.

### [IgxProgressType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxProgressType)
`any`

### [IgxSliderType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxSliderType)
`any`

### [IgxStepperOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxStepperOrientation)
`any`

### [IgxStepperTitlePosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxStepperTitlePosition)
`any`

### [IgxStepType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxStepType)
`any`

### [IgxTabsAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxTabsAlignment)
`any`

### [IgxTextAlign](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxTextAlign)
`any`

### [IgxTheme](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxTheme)
`any`
Determines the component theme.

### [IgxTreeSearchResolver](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxTreeSearchResolver)
`any`
Comparer function that can be used when searching through IgxTreeNode<any>[]

### [IgxTreeSelectionType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/IgxTreeSelectionType)
`any`

### [LabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/LabelPosition)
`any`

### [PickerInteractionMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/PickerInteractionMode)
`any`

### [PivotAggregation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/PivotAggregation)
`any`
Interface describing a PivotAggregation function.
Accepts an array of extracted data members and a array of the original data records.

### [PivotAggregationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/PivotAggregationType)
`"SUM" | "AVG" | "MIN" | "MAX" | "COUNT" | "LATEST" | "EARLIEST"`

### [RadioGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/RadioGroupAlignment)
`any`

### [SelectionState](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/SelectionState)
`ISelectionKeyboardState | ISelectionPointerState`
Represents the overall state of grid selection, combining both keyboard and pointer interaction states.
It can be either an ISelectionKeyboardState or an ISelectionPointerState.

### [Size](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/Size)
`any`

### [SliderHandle](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/SliderHandle)
`any`

### [TickLabelsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/TickLabelsOrientation)
`any`

### [TicksOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/TicksOrientation)
`any`

### [ValidationStatus](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/ValidationStatus)
`"VALID" | "INVALID"`
Type representing the validation status.
- 'VALID': The validation status is valid.
- 'INVALID': The validation status is invalid.

### [VerticalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/types/VerticalAnimationType)
`any`

## Functions

### [changei18n](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/changei18n)
`changei18n(resourceStrings: IResourceStrings): void`

### [comboIgnoreDiacriticsFilter](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/comboIgnoreDiacriticsFilter)
`comboIgnoreDiacriticsFilter(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[]`
Combo filter function which does not distinguish between accented letters and their base letters.
For example, when filtering for "resume", this function will match both "resume" and "résumé".

### [isLeap](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/isLeap)
`isLeap(year: number): boolean`
Returns true for leap years, false for non-leap years.

### [monthRange](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/monthRange)
`monthRange(year: number, month: number): number[]`
Return weekday and number of days for year, month.

### [range](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/range)
`range(start: number, stop: number, step: number): any[]`

### [weekDay](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/functions/weekDay)
`weekDay(year: number, month: number, day: number): number`

## Variables

### [ActionStripResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ActionStripResourceStringsEN)
`IActionStripResourceStrings`

### [BannerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/BannerResourceStringsEN)
`IBannerResourceStrings`

### [ButtonGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ButtonGroupAlignment)
`any`
Determines the Button Group alignment

### [CalendarResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/CalendarResourceStringsEN)
`ICalendarResourceStrings`

### [CalendarSelection](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/CalendarSelection)
`any`
Sets the selection type - single, multi or range.

### [CarouselAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/CarouselAnimationType)
`any`

### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/CarouselIndicatorsOrientation)
`any`

### [CarouselResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/CarouselResourceStringsEN)
`ICarouselResourceStrings`

### [ChipResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ChipResourceStringsEN)
`IChipResourceStrings`

### [ColumnDisplayOrder](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ColumnDisplayOrder)
`any`
Enumeration representing different column display order options.

### [ComboResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ComboResourceStringsEN)
`IComboResourceStrings`

### [DatePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/DatePickerResourceStringsEN)
`IDatePickerResourceStrings`

### [DateRangePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/DateRangePickerResourceStringsEN)
`IDateRangePickerResourceStrings`

### [DEFAULT_OWNER](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/DEFAULT_OWNER)
`"default"`

### [DEFAULT_PIVOT_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/DEFAULT_PIVOT_KEYS)
`any`
Default pivot keys used for data processing in the pivot pipes.

### [FilterMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/FilterMode)
`any`
Enumeration representing different filter modes for grid filtering.
- quickFilter: Default mode with a filter row UI between the column headers and the first row of records.
- excelStyleFilter: Filter mode where an Excel-style filter is used.

### [GRID_LEVEL_COL](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GRID_LEVEL_COL)
`"GRID_LEVEL_COL"`

### [GRID_PARENT](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GRID_PARENT)
`"grid-parent"`

### [GRID_ROOT_SUMMARY](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GRID_ROOT_SUMMARY)
`"igxGridRootSummary"`

### [GridPagingMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GridPagingMode)
`any`
Enumeration representing different paging modes for the grid.
- Local: The grid will use local data to extract pages during paging.
- Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions.

### [GridResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GridResourceStringsEN)
`IGridResourceStrings`

### [GridSelectionMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GridSelectionMode)
`any`
Enumeration representing different selection modes for the grid elements if can be selected.
- 'none': No selection is allowed. Default row and column selection mode.
- 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one.
- 'multiple': Default cell selection mode. More than one element can be selected at a time.
- 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action

### [GridSummaryCalculationMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GridSummaryCalculationMode)
`any`
Enumeration representing different calculation modes for grid summaries.
- rootLevelOnly: Summaries are calculated only for the root level.
- childLevelsOnly: Summaries are calculated only for child levels.
- rootAndChildLevels: Default value; Summaries are calculated for both root and child levels.

### [GridSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/GridSummaryPosition)
`any`
Enumeration representing the position of grid summary rows.
- top: Default value; Summary rows are displayed at the top of the grid.
- bottom: Summary rows are displayed at the bottom of the grid.

### [HorizontalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/HorizontalAnimationType)
`any`

### [IGX_ACCORDION_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_ACCORDION_DIRECTIVES)
`any`

### [IGX_ACTION_STRIP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_ACTION_STRIP_DIRECTIVES)
`any`

### [IGX_BANNER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_BANNER_DIRECTIVES)
`any`

### [IGX_BOTTOM_NAV_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_BOTTOM_NAV_DIRECTIVES)
`any`

### [IGX_BUTTON_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_BUTTON_GROUP_DIRECTIVES)
`any`

### [IGX_CALENDAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CALENDAR_DIRECTIVES)
`any`

### [IGX_CALENDAR_VIEW_ITEM](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CALENDAR_VIEW_ITEM)
`InjectionToken<IgxCalendarMonthDirective | IgxCalendarYearDirective>`

### [IGX_CARD_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CARD_DIRECTIVES)
`any`

### [IGX_CAROUSEL_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CAROUSEL_DIRECTIVES)
`any`

### [IGX_CHIPS_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CHIPS_DIRECTIVES)
`any`

### [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES)
`any`

### [IGX_COMBO_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_COMBO_DIRECTIVES)
`any`

### [IGX_DATE_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_DATE_PICKER_DIRECTIVES)
`any`

### [IGX_DATE_RANGE_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_DATE_RANGE_PICKER_DIRECTIVES)
`any`

### [IGX_DIALOG_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_DIALOG_DIRECTIVES)
`any`

### [IGX_DRAG_DROP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_DRAG_DROP_DIRECTIVES)
`any`

### [IGX_DROP_DOWN_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_DROP_DOWN_DIRECTIVES)
`any`

### [IGX_EXPANSION_PANEL_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_EXPANSION_PANEL_DIRECTIVES)
`any`

### [IGX_GRID_ACTION_STRIP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_ACTION_STRIP_DIRECTIVES)
`any`

### [IGX_GRID_BASE](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_BASE)
`InjectionToken<GridType>`

### [IGX_GRID_COMMON_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_COMMON_DIRECTIVES)
`any`

### [IGX_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_DIRECTIVES)
`any`

### [IGX_GRID_SERVICE_BASE](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_SERVICE_BASE)
`InjectionToken<GridServiceType>`

### [IGX_GRID_VALIDATION_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_GRID_VALIDATION_DIRECTIVES)
`any`

### [IGX_HIERARCHICAL_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_HIERARCHICAL_GRID_DIRECTIVES)
`any`

### [IGX_INPUT_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_INPUT_GROUP_DIRECTIVES)
`any`

### [IGX_INPUT_GROUP_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_INPUT_GROUP_TYPE)
`InjectionToken<IgxInputGroupType>`
Defines the InputGroupType DI token.

### [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES)
`any`

### [IGX_LIST_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_LIST_DIRECTIVES)
`any`

### [IGX_NAVBAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_NAVBAR_DIRECTIVES)
`any`

### [IGX_NAVIGATION_DRAWER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_NAVIGATION_DRAWER_DIRECTIVES)
`any`

### [IGX_PAGINATOR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_PAGINATOR_DIRECTIVES)
`any`

### [IGX_PIVOT_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_PIVOT_GRID_DIRECTIVES)
`any`

### [IGX_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_PROGRESS_BAR_DIRECTIVES)
`any`

### [IGX_QUERY_BUILDER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_QUERY_BUILDER_DIRECTIVES)
`any`

### [IGX_RADIO_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_RADIO_GROUP_DIRECTIVES)
`any`

### [IGX_SELECT_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_SELECT_DIRECTIVES)
`any`

### [IGX_SIMPLE_COMBO_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_SIMPLE_COMBO_DIRECTIVES)
`any`

### [IGX_SLIDER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_SLIDER_DIRECTIVES)
`any`

### [IGX_SPLITTER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_SPLITTER_DIRECTIVES)
`any`

### [IGX_STEPPER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_STEPPER_DIRECTIVES)
`any`

### [IGX_TABS_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_TABS_DIRECTIVES)
`any`

### [IGX_TIME_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_TIME_PICKER_DIRECTIVES)
`any`

### [IGX_TOOLTIP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_TOOLTIP_DIRECTIVES)
`any`

### [IGX_TREE_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_TREE_DIRECTIVES)
`any`

### [IGX_TREE_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IGX_TREE_GRID_DIRECTIVES)
`any`

### [IgxAvatarSize](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxAvatarSize)
`any`

### [IgxAvatarType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxAvatarType)
`any`

### [IgxBadgeType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxBadgeType)
`any`
Determines the igxBadge type

### [IgxCalendarView](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxCalendarView)
`any`

### [IgxCardActionsLayout](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxCardActionsLayout)
`any`

### [IgxChipTypeVariant](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxChipTypeVariant)
`any`

### [IgxDividerType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxDividerType)
`any`

### [IgxGridTransaction](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxGridTransaction)
`InjectionToken<string>`
Injection token for accessing the grid transaction object.
This allows injecting the grid transaction object into components or services.

### [IgxProgressType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxProgressType)
`any`

### [IgxSliderType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxSliderType)
`any`

### [IgxStepperOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxStepperOrientation)
`any`

### [IgxStepperTitlePosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxStepperTitlePosition)
`any`

### [IgxStepType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxStepType)
`any`

### [IgxTabsAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxTabsAlignment)
`any`

### [IgxTextAlign](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxTextAlign)
`any`

### [IgxTreeSelectionType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IgxTreeSelectionType)
`any`

### [IndigoIcons](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/IndigoIcons)
`Map<string, IMXIcon>`

### [InputResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/InputResourceStringsEN)
`IInputResourceStrings`

### [LabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/LabelPosition)
`any`

### [ListResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/ListResourceStringsEN)
`IListResourceStrings`

### [PaginatorResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/PaginatorResourceStringsEN)
`IPaginatorResourceStrings`

### [PickerInteractionMode](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/PickerInteractionMode)
`any`
This enumeration is used to configure whether the date/time picker has an editable input with drop down
or is readonly - the date/time is selected only through a dialog.

### [QueryBuilderResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/QueryBuilderResourceStringsEN)
`IQueryBuilderResourceStrings`

### [RadioGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/RadioGroupAlignment)
`any`
Determines the Radio Group alignment

### [SliderHandle](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/SliderHandle)
`any`

### [THEME_TOKEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/THEME_TOKEN)
`InjectionToken<ThemeToken>`

### [TickLabelsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/TickLabelsOrientation)
`any`
Slider Tick labels Orientation

### [TicksOrientation](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/TicksOrientation)
`any`
Slider Ticks orientation

### [TimePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/TimePickerResourceStringsEN)
`ITimePickerResourceStrings`

### [TreeResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/TreeResourceStringsEN)
`ITreeResourceStrings`

### [VerticalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/21.0.x/variables/VerticalAnimationType)
`any`
