# Ignite UI for Angular v15.1.x — Full API Reference

> Complete API reference for the Ignite UI for Angular package (15.1.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: 15.1.x

## Classes

### [AbsoluteScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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
- **fitInViewport**(element: HTMLElement, connectedFit: ConnectedFit): void — Fits the element into viewport according to the position settings

### [BaseFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **getFieldValue**(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any
- **getFilterItemLabel**(column: ColumnType, value: any, applyFormatter: boolean, data: any): any
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>
- **getUniqueFilterItems**(column: ColumnType, filterItems: IgxFilterItem[]): any[]
- **matchRecord**(rec: any, expressions: IFilteringExpression | IFilteringExpressionsTree, grid?: GridType): boolean
- **shouldFormatFilterValues**(_column: ColumnType): boolean

### [BlockScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

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

- **constructor**(firstWeekDay: WEEKDAYS): Calendar
- **firstWeekDay**: `number`
- **formatToParts**(date: Date, locale: string, options: any, parts: string[]): any
- **getDateByView**(date: Date, interval: string, activeViewIdx: number): Date
- **getFirstViewDate**(date: Date, interval: string, activeViewIdx: number): Date
- **getNextMonth**(date: Date): Date
- **getNextYear**(date: Date): Date
- **getPrevMonth**(date: Date): Date
- **getPrevYear**(date: Date): Date
- **getWeekNumber**(date: Date, weekStart: number): any
- **monthdates**(year: number, month: number, extraWeek: boolean): ICalendarDate[] — Returns the date values for one month. It will always iterate throught
complete weeks, so it will contain dates outside the specified month.
- **monthdatescalendar**(year: number, month: number, extraWeek: boolean): ICalendarDate[][] — Returns a matrix (array of arrays) representing a month's calendar.
Each row represents a full week; week entries are ICalendarDate objects.
- **timedelta**(date: Date, interval: string, units: number): Date
- **weekdays**(): number[] — Returns an array of weekdays for one week starting
with the currently set firstWeekDay

this.firstWeekDay = 0 (Sunday) --> [0, 1, 2, 3, 4, 5, 6]
this.firstWeekDay = 1 (Monday) --> [1, 2, 3, 4, 5, 6, 0]

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

- **constructor**(): CalendarHammerConfig
- **overrides**: `any`

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

- **constructor**(): CarouselHammerConfig
- **overrides**: `any`

### [CloseScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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
- **calculateElementRectangles**(contentElement: any, target: HTMLElement | Point): any — Obtains the DomRect objects for the required elements - target and element to position
- **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.
- **setStyle**(element: HTMLElement, targetRect: Partial<DOMRect>, elementRect: Partial<DOMRect>, connectedFit: ConnectedFit): void — Sets element's style which effectively positions provided element according
to provided position settings

### [ContainerPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/DefaultDataCloneStrategy)

- **constructor**(): DefaultDataCloneStrategy
- **clone**(data: any): any

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

- **constructor**(): DefaultPivotGridRecordSortingStrategy
- static **_instance**: `DefaultPivotGridRecordSortingStrategy`
- **getFieldValue**(obj: IPivotGridRecord, key: string, _isDate: boolean, _isTime: boolean): any
- **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/15.1.x/classes/DefaultPivotSortingStrategy)

- **constructor**(): DefaultPivotSortingStrategy
- **dimension**: `any`
- static **_instance**: `DefaultPivotSortingStrategy`
- **getFieldValue**(obj: any, key: string, _isDate: boolean, isTime: boolean): any
- **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/15.1.x/classes/DefaultSortingStrategy)

- **constructor**(): DefaultSortingStrategy
- static **_instance**: `DefaultSortingStrategy`
- **arraySort**(data: any[], compareFn?: any): any[]
- **compareObjects**(obj1: any, obj2: any, key: string, reverse: number, ignoreCase: boolean, valueResolver: any, isDate: boolean, isTime: boolean): number
- **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/15.1.x/classes/DimensionValuesFilteringStrategy)

- **constructor**(fields?: string[]): DimensionValuesFilteringStrategy
- **getFieldValue**(rec: any, fieldName: string, _isDate: boolean, _isTime: boolean, grid?: PivotGridType): any
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>

### [DisplayDensityBase](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/DisplayDensityBase)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(displayDensityOptions: IDisplayDensityOptions): DisplayDensityBase
- **_displayDensity**: `DisplayDensity`
- **densityChanged**: `EventEmitter<IDensityChangedEventArgs>`
- **displayDensityOptions**: `IDisplayDensityOptions`
- **oldDisplayDensityOptions**: `IDisplayDensityOptions`
- **displayDensity**: `DisplayDensity` — Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
- **getComponentDensityClass**(baseStyleClass: string): string — Given a style class of a component/element returns the modified version of it based
on the current display density.
- **ngDoCheck**(): void

### [ElasticPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **fitInViewport**(element: HTMLElement, connectedFit: ConnectedFit): void — Fits the element into viewport according to the position settings

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

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

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

- **constructor**(operator: FilteringLogic, fieldName?: string): FilteringExpressionsTree
- **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;
- **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');
- **isFilteringExpressionsTreeForColumn**(expressionsTree: IFilteringExpressionsTree, fieldName: string): boolean
- static **empty**(expressionTree: IFilteringExpressionsTree): boolean — Checks if filtering expressions tree is empty.

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

- **constructor**(): FilteringStrategy
- **filter**(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree, grid: GridType): T[]
- **getFieldValue**(rec: any, fieldName: string, isDate: boolean, isTime: boolean, grid?: GridType): any
- static **instance**(): FilteringStrategy

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

- **constructor**(fields?: string[]): FormattedValuesFilteringStrategy
- **shouldFormatFilterValues**(column: ColumnType): boolean

### [GlobalPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **_defaultSettings**: `PositionSettings`
- **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.
- **setPosition**(contentElement: HTMLElement): void

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

- **constructor**(): GroupMemberCountSortingStrategy
- static **_instance**: `GroupMemberCountSortingStrategy`
- **compareObjects**(obj1: any, obj2: any, data: any[], fieldName: string, reverse: number): number
- **groupBy**(data: any, key: any): any
- **sort**(data: any[], fieldName: string, dir: SortingDirection): any[]
- static **instance**(): GroupMemberCountSortingStrategy

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

- **constructor**(): ITreeGridAggregation
- **aggregate**: `any`
- **field**: `string`

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

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

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

- **constructor**(): IgcFormsModule

### [IgxAccordionComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxActionStripComponent)
Action Strip provides templatable area for one or more actions.

- **constructor**(_viewContainer: ViewContainerRef, renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions, cdr: ChangeDetectorRef): IgxActionStripComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **cdr**: `ChangeDetectorRef`
- **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`
- **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/15.1.x/classes/IgxActionStripMenuItemDirective)

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

### [IgxAdvancedFilteringDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`
- **platform**: `PlatformUtil`
- **grid**: `GridType` — Returns the grid.

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

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

### [IgxAutocompleteDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **_composing**: `boolean`
- **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
 })
};
- **cdr**: `ChangeDetectorRef`
- **disabled**: `boolean` — Enables/disables autocomplete component

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

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

// set
public disabled = true;
- **elementRef**: `ElementRef<any>`
- **formControl**: `FormControlName`
- **group**: `IgxInputGroupComponent`
- **id**: `string`
- **ngModel**: `NgModel`
- **selectionChanging**: `EventEmitter<AutocompleteSelectionChangingEventArgs>` — Emitted after item from the drop down is selected

<input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' />
- **model**: `FormControlName | NgModel`
- **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
- **open**(): void — Opens autocomplete drop down

### [IgxAvatarComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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**: `"square" | "circle" | "rounded"` — Sets square, rounded or circular shape to the avatar.
By default the shape of the avatar is square.
- **src**: `string` — Sets the image source of the avatar.
- **roundShape**: `boolean`
- **size**: `string` — Returns the size of the avatar.
- **type**: `IgxAvatarType` — Returns the type of the avatar.

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

- **constructor**(): IgxBadgeComponent
- **cssClass**: `string` — Sets/gets the the css class to use on the badge.
- **icon**: `string` — Sets/gets an icon for the badge from the material icons set.
- **id**: `string` — Sets/gets the id of the badge.
- **label**: `string` — Sets/gets the aria-label attribute value.
- **role**: `string` — Sets/gets the role attribute value.
- **shape**: `"square" | "rounded"` — 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/15.1.x/classes/IgxBannerActionsDirective)

- **constructor**(): IgxBannerActionsDirective

### [IgxBannerComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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="raised">Read More</button>
     <button type="button" igxButton="raised">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 banner is collapsed

const isCollapsed: boolean = banner.collapsed;
- **element**: `HTMLElement` — Returns the native element of the banner component
 const myBannerElement: HTMLElement = banner.element;
- **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/15.1.x/classes/IgxBaseExporter)

- **constructor**(): IgxBaseExporter
- **_ownersMap**: `Map<any, IColumnList>`
- **_sort**: `any`
- **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>`
- **pivotGridFilterFieldsCount**: `number`
- **rowExporting**: `EventEmitter<IRowExportingEventArgs>` — This event is emitted when a row is exported.
this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => {
// put event handler code here
});
- **addPivotGridColumns**(grid: any): void
- **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);
- **exportDataImplementation**(data: any[], options: IgxExporterOptionsBase, done: any): void

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

- **constructor**(): IgxBaseTransactionService<T, S>
- **_isPending**: `boolean`
- **_pendingStates**: `Map<any, S>`
- **_pendingTransactions**: `T[]`
- **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
- **cleanState**(id: any, states: Map<any, S>): void — Compares the state with recordRef and clears all duplicated values. If any state ends as
empty object removes it from states.
- **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
- **mergeValues**(first: U, second: U): U — Merges second values in first value and the result in empty object. If values are primitive type
returns second value if exists, or first value.
- **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
- **updateState**(states: Map<any, S>, transaction: T, recordRef?: any): void — Updates the provided states collection according to passed transaction and recordRef
- **updateValue**(state: S): any — Updates the recordRef of the provided state with all the changes in the state. Accepts primitive and object value types

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

- **constructor**(): IgxBooleanFilteringOperand

### [IgxBottomNavComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxBottomNavContentComponent)


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


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

- **constructor**(): IgxBottomNavHeaderIconDirective

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

- **constructor**(): IgxBottomNavHeaderLabelDirective

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


### [IgxButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, _displayDensityOptions: IDisplayDensityOptions): IgxButtonDirective
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **buttonClick**: `EventEmitter<any>` — Called when the button is clicked.
- **buttonSelected**: `EventEmitter<IButtonEventArgs>` — Called when the button is selected.
- **element**: `ElementRef<any>`
- **role**: `string` — Sets/gets the role attribute.
- **background**: `string`
- **color**: `string`
- **disabled**: `boolean` — Get the disabled state of the button;
- **label**: `string`
- **nativeElement**: `any` — Returns the underlying DOM element.
- **selected**: `boolean`
- **type**: `IgxButtonType`

### [IgxButtonGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, multiple and toggle selection.

Example:
<igx-buttongroup multiSelection="true" [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, _displayDensityOptions: IDisplayDensityOptions): IgxButtonGroupComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **buttonClickNotifier$**: `Subject<boolean>`
- **buttonSelectedNotifier$**: `Subject<boolean>`
- **deselected**: `EventEmitter<IButtonGroupEventArgs>` — An
- **id**: `string` — An
- **multiSelection**: `boolean` — An
- **queryListNotifier$**: `Subject<boolean>`
- **selected**: `EventEmitter<IButtonGroupEventArgs>` — An
- **values**: `any` — An
- **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` — An
- **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;
}
- **selectedButtons**: `IgxButtonDirective[]` — Gets the selected button/buttons.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let selectedButton = this.buttonG.selectedButtons;
}
- **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();
}

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

- **constructor**(): IgxCSVTextDirective

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

- **hasHeader**: `boolean` — Sets/gets whether the calendar has header.
Default value is true.
- **id**: `string` — Sets/gets the id of the calendar.
- **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.
- **monthsViewNumber**: `number` — Sets/gets the number of month views displayed.
Default value is 1.
- **subheaderTemplate**: `any` — Gets the subheader template.
- **deselectDate**(value?: Date | Date[]): void — Deselects date(s) (based on the selection type).
- **ngAfterViewInit**(): void
- **suppressBlur**(): void

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

- **constructor**(elementRef: ElementRef<any>): IgxCalendarMonthDirective
- **date**: `Date`
- **elementRef**: `ElementRef<any>`
- **index**: `any`
- **monthSelection**: `EventEmitter<Date>`
- **value**: `Date`
- **currentCSS**: `boolean`
- **isCurrentMonth**: `boolean`
- **nativeElement**: `any`
- **onClick**(): void

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

- **constructor**(card: IgxCardComponent): IgxCardActionsComponent
- **card**: `IgxCardComponent`
- **layout**: `string` — An
- **reverse**: `boolean`
- **vertical**: `boolean` — An
- **isJustifyLayout**: `boolean` — A getter that returns true when the layout has been
set to justify.

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

- **constructor**(): IgxCardComponent
- **horizontal**: `boolean` — An
- **id**: `string` — Sets/gets the id of the card.
If not set, id will have value "igx-card-0";
- **role**: `string` — An
- **type**: `string` — An
- **isOutlinedCard**: `boolean` — A getter which will return true if the card type is outlined.

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

- **constructor**(): IgxCardContentDirective

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

- **constructor**(): IgxCardFooterDirective
- **role**: `string` — An

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

- **constructor**(): IgxCardHeaderComponent
- **vertical**: `boolean` — An

### [IgxCardHeaderSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/classes/IgxCardMediaDirective)
IgxCardMedia is container for the card media section.
Use it to wrap images and videos.

- **constructor**(): IgxCardMediaDirective
- **height**: `string` — An
- **role**: `string` — An
- **width**: `string` — An

### [IgxCardThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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): IgxCarouselComponent
- **animationType**: `HorizontalAnimationType` — 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;
- **currentItem**: `IgxSlideComponent`
- **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>
- **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>
- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Gets/sets the display mode of carousel indicators. It can be top or bottom.
Default value is bottom.
<igx-carousel indicatorsOrientation='top'>
<igx-carousel>
- **keyboardSupport**: `boolean` — Controls whether the carousel should support keyboard navigation.
Default value is true.
<igx-carousel [keyboardSupport] = "false"></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 5.
<igx-carousel [maximumIndicatorsCount] = "10"></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>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.nextButtonTemplate = myCustomTemplate;

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon>remove</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
- **previousItem**: `IgxSlideComponent`
- **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;
- **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);
- **getCurrentElement**(): HTMLElement
- **getPreviousElement**(): HTMLElement
- **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/15.1.x/classes/IgxCarouselIndicatorDirective)

- **constructor**(): IgxCarouselIndicatorDirective

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

- **constructor**(): IgxCarouselNextButtonDirective

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

- **constructor**(): IgxCarouselPrevButtonDirective

### [IgxCellEditorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxCheckboxComponent)
Allows users to make a binary choice for a certain condition.

- **constructor**(cdr: ChangeDetectorRef, renderer: Renderer2, ngControl: NgControl): IgxCheckboxComponent
- **ariaLabel**: `string` — Sets/gets the value of the aria-label attribute.
- **ariaLabelledBy**: `string` — Sets/gets the aria-labelledby attribute.
If not set, the aria-labelledby will be equal to the value of labelId attribute.
- readonly **change**: `EventEmitter<IChangeCheckboxEventArgs>` — An event that is emitted after the checkbox state is changed.
Provides references to the IgxCheckboxComponent and the checked property as event arguments.
- **cssClass**: `string` — Returns the class of the checkbox component.
- **disableRipple**: `boolean` — Enables/Disables the ripple effect.
If not set, disableRipple will have value 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.
- **id**: `string` — Sets/gets the id of the checkbox component.
If not set, the id of the first checkbox component will be "igx-checkbox-0".
- **indeterminate**: `boolean` — Sets/gets the checkbox indeterminate visual state.
Default value is false;
- **labelId**: `string` — Sets/gets the id of the label element.
If not set, the id of the label in the first checkbox component will be "igx-checkbox-0-label".
- **labelPosition**: `string` — Sets/gets the position of the label.
 If not set, the labelPosition will have value "after".
- **name**: `string` — Sets/gets the name attribute.
- **nativeCheckbox**: `ElementRef<any>` — Returns reference to the native checkbox element.
- **nativeLabel**: `ElementRef<any>` — Returns reference to the native label element.

@example
let labelElement =  this.checkbox.nativeLabel;
- **ngControl**: `NgControl`
- **placeholderLabel**: `ElementRef<any>` — Returns reference to the label placeholder element.

@example
let labelPlaceholder =  this.checkbox.placeholderLabel;
- **readonly**: `boolean` — Sets/gets whether the checkbox is readonly.
Default value is false.
- **renderer**: `Renderer2`
- **tabindex**: `number` — Sets/gets the value of the tabindex attribute.
- **value**: `any` — Sets/gets the value attribute.
- **checked**: `boolean` — Sets/gets whether the checkbox is checked.
Default value is false.
- **disabled**: `boolean` — Sets/gets whether the checkbox is disabled.
Default value is false.
- **invalid**: `boolean` — Sets/gets whether the checkbox is invalid.
Default value is false.
- **nativeElement**: `any` — Returns reference to the nativeElement of the igx-checkbox.
- **required**: `boolean` — Sets/gets whether the checkbox is required.
If not set, required will have value false.

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

- **constructor**(gridAPI: IgxHierarchicalGridAPIService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxChildGridRowComponent
- **cdr**: `ChangeDetectorRef`
- **container**: `ViewContainerRef`
- **element**: `ElementRef<HTMLElement>`
- **expanded**: `boolean` — Returns whether the row is expanded.
const RowExpanded = this.grid1.rowList.first.expanded;
- **gridAPI**: `IgxHierarchicalGridAPIService`
- **index**: `number` — The index of the row.

// get the index of the second selected row
let selectedRowIndex = this.grid.selectedRows[1].index;
- **layout**: `IgxRowIslandComponent`
- **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;
- **level**: `number`
- **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;
- **parentGrid**: `IgxHierarchicalGridComponent` — Get a reference to the grid that contains the selected row.

handleRowSelection(event) {
 // the grid on which the rowSelected event was triggered
 const grid = event.row.grid;
}


 <igx-grid
   [data]="data"
   (rowSelected)="handleRowSelection($event)">
 </igx-grid>

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

- **constructor**(cdr: ChangeDetectorRef, ref: ElementRef<HTMLElement>, renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxChipComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_movedWhileRemoving**: `boolean`
- **_selected**: `boolean`
- **_selectedItemClass**: `string`
- **_tabIndex**: `any`
- **animateOnRelease**: `boolean` — An
- **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` — An
- **disabled**: `boolean` — An
- **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.
- **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.
- **draggable**: `boolean` — An
- **hideBaseOnDrag**: `boolean` — An
- **id**: `string` — An
- **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` — An
- **remove**: `EventEmitter<IBaseChipEventArgs>` — Emits an event when the IgxChipComponent is removed.
Returns the removed IgxChipComponent.
- **removeIcon**: `TemplateRef<any>` — An
- **role**: `string` — Returns the role attribute of the chip.
- **selectIcon**: `TemplateRef<any>` — An
- **selectable**: `boolean` — An
- **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.
- **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`
- **changeSelection**(newValue: boolean, srcEvent: any): void
- **ngOnDestroy**(): void
- **onRemoveMouseDown**(event: PointerEvent | MouseEvent): void
- **onSelectTransitionDone**(event: any): void

### [IgxChipsAreaComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.
- **destroy$**: `Subject<boolean>`
- **element**: `ElementRef<any>`
- **height**: `number` — An
- **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` — An

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

- **constructor**(renderer: Renderer2, _directionality: IgxDirectionality): IgxCircularProgressBarComponent
- **gradientTemplate**: `IgxProgressBarGradientDirective`
- **id**: `string` — An
- **text**: `string` — Sets/gets the text to be displayed inside the igxCircularBar.
<igx-circular-bar text="Progress"></igx-circular-bar>

let text = this.circularBar.text;
- **textTemplate**: `IgxProcessBarTextTemplateDirective`
- **textVisibility**: `boolean` — Sets the text visibility. By default it is set to true.
<igx-circular-bar [textVisibility]="false"></igx-circular-bar>
- **ngAfterContentInit**(): void
- **ngAfterViewInit**(): void
- **runAnimation**(value: number): void

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

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

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

- **constructor**(): IgxColumMaxLengthValidatorDirective

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

- **constructor**(): IgxColumPatternValidatorDirective

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

- **constructor**(columnActions: IgxColumnActionsComponent): IgxColumnActionEnabledPipe
- **columnActions**: `IgxColumnActionsComponent`
- **transform**(collection: ColumnType[], actionFilter: any, _pipeTrigger: number): ColumnType[]

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

- **constructor**(): IgxColumnActionsBaseDirective

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

- **constructor**(differs: IterableDiffers): IgxColumnActionsComponent
- **_differ**: `IterableDiffer<any>`
- **columnItems**: `QueryList<IgxCheckboxComponent>` — Gets the checkbox components representing column items currently present in the dropdown
- **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>
- **columnsAreaMaxHeight**: `string` — Gets/sets the max height of the columns area.
- **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.

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

- **constructor**(): IgxColumnActionsModule

### [IgxColumnComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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[], cdr: ChangeDetectorRef, platform: PlatformUtil): IgxColumnComponent
- **_vIndex**: `number`
- **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>
- **autoSize**: `number`
- **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>
- **calcPixelWidth**: `number`
- **cdr**: `ChangeDetectorRef`
- **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;

this.column.children = childrenColumns;
- **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>
- **defaultWidth**: `string` — hidden
- **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;
- **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`
- **grid**: `GridType`
- **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>
- **maxWidth**: `string` — Sets/gets the maximum width of the column.
let columnMaxWidth = this.column.width;

<igx-column [maxWidth] = "'150px'"></igx-column>
- **movable**: `boolean`
- **parent**: `any` — Sets/gets the parent column.
let parentColumn = this.column.parent;

this.column.parent = higherLevelColumn;
- **platform**: `PlatformUtil`
- **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`
- **title**: `string` — Sets/gets the title value.
let title = this.column.title;

<igx-column [title] = "'Some column tooltip'"></igx-column>
- **widthSetByUser**: `boolean` — hidden
- **allChildren**: `IgxColumnComponent[]` — Returns the children columns collection.
Returns an empty array if the column does not contain children columns.
let childrenColumns =  this.column.allChildren;
- **bodyTemplate**: `TemplateRef<IgxCellTemplateContext>` — Returns a reference to the bodyTemplate.
let bodyTemplate = this.column.bodyTemplate;
- **cells**: `CellType[]` — Gets the cells of the column.
let columnCells = this.column.cells;
- **collapsible**: `boolean`
- **columnGroup**: `boolean` — Returns a boolean indicating if the column is a ColumnGroup.
let columnGroup =  this.column.columnGroup;
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **columnLayoutChild**: `any` — Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
let columnLayoutChild =  this.column.columnLayoutChild;
- **defaultMinWidth**: `string` — Gets the default minimum width of the column.
let defaultMinWidth =  this.column.defaultMinWidth;
- **editable**: `boolean` — Gets whether the column is editable.
Default value is false.
let isEditable = this.column.editable;
- **errorTemplate**: `TemplateRef<IgxCellTemplateContext>` — Returns a reference to the validation error template.
let errorTemplate = this.column.errorTemplate;
- **expanded**: `boolean`
- **field**: `string`
- **filterCell**: `IgxGridFilteringCellComponent` — Returns a reference to the filter cell of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let filterell = column.filterell;
- **filterCellTemplate**: `TemplateRef<IgxColumnTemplateContext>` — Returns a reference to the filterCellTemplate.
let filterCellTemplate = this.column.filterCellTemplate;
- **filteringExpressionsTree**: `FilteringExpressionsTree` — Returns the filteringExpressionsTree of the column.
let tree =  this.column.filteringExpressionsTree;
- **filters**: `IgxFilteringOperand` — Gets the column filters.
let columnFilters = this.column.filters'
- **gridColumnSpan**: `number`
- **gridRowSpan**: `number`
- **groupable**: `boolean` — Sets/gets whether the column is groupable.
Default value is false.
let isGroupable = this.column.groupable;

<igx-column [groupable] = "true"></igx-column>
- **groupingComparer**: `any` — Gets the function that compares values for grouping.
let groupingComparer = this.column.groupingComparer'
- **hasSummary**: `boolean` — Gets a value indicating whether the summary for the column is enabled.
let hasSummary = this.column.hasSummary;
- **headerCell**: `IgxGridHeaderComponent` — Returns a reference to the header of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let headerCell = column.headerCell;
- **headerGroup**: `IgxGridHeaderGroupComponent` — Returns a reference to the header group of the column.
- **headerTemplate**: `TemplateRef<IgxColumnTemplateContext>` — Returns a reference to the header template.
let headerTemplate = this.column.headerTemplate;
- **hidden**: `boolean` — Gets whether the column is hidden.
let isHidden = this.column.hidden;
- **index**: `number` — Gets the column index.
let columnIndex = this.column.index;
- **inlineEditorTemplate**: `TemplateRef<IgxCellTemplateContext>` — Returns a reference to the inline editor template.
let inlineEditorTemplate = this.column.inlineEditorTemplate;
- **isFirstPinned**: `boolean`
- **isLastPinned**: `boolean`
- **level**: `number` — Returns the level of the column in a column group.
Returns 0 if the column doesn't have a parent.
let columnLevel =  this.column.level;
- **minWidth**: `string`
- **pinned**: `boolean` — Gets whether the column is pinned.
let isPinned = this.column.pinned;
- **pipeArgs**: `IColumnPipeArgs`
- **rightPinnedOffset**: `string`
- **selectable**: `boolean` — Returns if the column is selectable.
let columnSelectable = this.column.selectable;
- **selected**: `boolean` — Returns if the column is selected.
let isSelected = this.column.selected;
- **sortStrategy**: `ISortingStrategy` — Gets the column sortStrategy.
let sortStrategy = this.column.sortStrategy
- **summaries**: `any` — Gets the column summaries.
let columnSummaries = this.column.summaries;
- **summaryTemplate**: `TemplateRef<IgxSummaryTemplateContext>` — Returns a reference to the summaryTemplate.
let summaryTemplate = this.column.summaryTemplate;
- **topLevelParent**: `any` — Returns a reference to the top level parent column.
let topLevelParent =  this.column.topLevelParent;
- **visibleIndex**: `number` — Gets the column visible index.
If the column is not visible, returns -1.
let visibleColumnIndex =  this.column.visibleIndex;
- **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();
- **getColumnSizesString**(children: QueryList<IgxColumnComponent>): string
- **getFilledChildColumnSizes**(children: QueryList<IgxColumnComponent>): string[]
- **getInitialChildColumnSizes**(children: QueryList<IgxColumnComponent>): MRLColumnSizeInfo[]
- **getResizableColUnderEnd**(): MRLResizeColumnInfo[]
- **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/15.1.x/classes/IgxColumnEmailValidatorDirective)

- **constructor**(): IgxColumnEmailValidatorDirective

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

- **constructor**(): IgxColumnFormatterPipe
- **transform**(value: any, formatter: any, rowData: any, columnData?: any): any

### [IgxColumnGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxColumnGroupComponent)
**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[], cdr: ChangeDetectorRef, platform: PlatformUtil): IgxColumnGroupComponent
- **children**: `QueryList<IgxColumnComponent>` — Sets/gets the children columns.
let columnChildren = this.column.children;

this.column.children = childrenColumns;
- **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>
- **allChildren**: `IgxColumnComponent[]` — Returns the children columns collection.
let columns =  this.columnGroup.allChildren;
- **cells**: `CellType[]` — Will return empty array. Use this.children.toArray()[index].cells to get the cells for a column that is part of the column group.
let columnCells = this.columnGroup.cells;
- **collapsible**: `boolean`
- **columnGroup**: `boolean` — Returns a boolean indicating if the column is a ColumnGroup.
let isColumnGroup =  this.columnGroup.columnGroup
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **expanded**: `boolean`
- **filters**: `any` — Gets the column group filters.
let columnGroupFilters = this.columnGroup.filters;
- **hidden**: `boolean` — Gets whether the column group is hidden.
let isHidden = this.columnGroup.hidden;
- **selectable**: `boolean` — Returns if the column group is selectable
let columnGroupSelectable = this.columnGroup.selectable;
- **selected**: `boolean` — Returns if the column group is selected.
let isSelected = this.columnGroup.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/15.1.x/classes/IgxColumnHidingDirective)

- **constructor**(columnActions: IgxColumnActionsComponent): IgxColumnHidingDirective
- **columnActions**: `IgxColumnActionsComponent`
- **allChecked**: `boolean`
- **allUnchecked**: `boolean`

### [IgxColumnLayoutComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxColumnLayoutComponent)
**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[], cdr: ChangeDetectorRef, platform: PlatformUtil): IgxColumnLayoutComponent
- **childrenVisibleIndexes**: `any[]`
- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup =  this.column.columnGroup;
- **hasFirstPinnedChildColumn**: `boolean`
- **hasLastPinnedChildColumn**: `boolean`
- **hidden**: `boolean` — Gets whether the column group is hidden.
let isHidden = this.columnGroup.hidden;
- **visibleIndex**: `number` — Gets the column visible index.
If the column is not visible, returns -1.
let visibleColumnIndex =  this.column.visibleIndex;
- **width**: `any` — Gets the width of the column layout.
let columnGroupWidth = this.columnGroup.width;

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

- **constructor**(): IgxColumnMaxValidatorDirective

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

- **constructor**(): IgxColumnMinLengthValidatorDirective

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

- **constructor**(): IgxColumnMinValidatorDirective

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

- **constructor**(ref: ElementRef<HTMLElement>, renderer: Renderer2, _: NgZone, cms: IgxColumnMovingService): IgxColumnMovingDropDirective
- **column**: `ColumnType`
- **data**: `ColumnType | IgxForOfDirective<any>`
- **horizontalScroll**: `IgxGridForOfDirective<any>`
- **isDropTarget**: `boolean`
- **nativeElement**: `HTMLElement`
- **ngOnDestroy**(): void
- **onDragDrop**(event: any): void
- **onDragEnter**(event: any): void
- **onDragLeave**(event: any): void
- **onDragOver**(event: any): void

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

- **constructor**(): IgxColumnMovingModule

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

- **constructor**(columnActions: IgxColumnActionsComponent): IgxColumnPinningDirective
- **columnActions**: `IgxColumnActionsComponent`
- **allChecked**: `boolean`
- **allUnchecked**: `boolean`

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

- **constructor**(): IgxColumnRequiredValidatorDirective

### [IgxComboAddItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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, _iconService: IgxIconService, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector): IgxComboComponent
- **_prevInputValue**: `string`
- **autoFocusSearch**: `boolean` — An
- **booleanFilters**: `any`
- **searchPlaceholder**: `string` — Defines the placeholder value for the combo dropdown search field

// get
let myComboSearchPlaceholder = this.combo.searchPlaceholder;


<!--set-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
- **selectionChanging**: `EventEmitter<IComboSelectionChangingEventArgs>` — Emitted when item selection is changing, before the selection completes

<igx-combo (selectionChanging)='handleSelection()'></igx-combo>
- **stringFilters**: `any`
- **filterable**: `boolean`
- **createDisplayText**(newSelection: any[], oldSelection: any[]): string
- **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
- **setSelection**(newSelection: Set<any>, event?: Event): void

### [IgxComboEmptyDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.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/15.1.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/15.1.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/15.1.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/15.1.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
});
- **exportDataImplementation**(data: IExportRecord[], options: IgxCsvExporterOptions, done: any): void

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

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

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

- **constructor**(): IgxDataRecordSorting
- **getFieldValue**(obj: any, key: string, isDate: boolean, isTime: boolean): any

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

- **constructor**(): IgxDateFilteringOperand

### [IgxDatePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, _displayDensityOptions?: IDisplayDensityOptions, _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.
- **formatViews**: `IFormattingViews` — Gets/Sets the format views of the IgxDatePickerComponent.
- **formatter**: `any`
- **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, "month" | "year" | "date">` — 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/15.1.x/classes/IgxDateRangeEndComponent)
Defines the end input for a date range picker

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

### [IgxDateRangePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, _displayDensityOptions?: IDisplayDensityOptions, _inputGroupType?: IgxInputGroupType): IgxDateRangePickerComponent
- **displayFormat**: `string` — The format used when editable inputs are not focused.
- **displayMonthsCount**: `number` — The number of displayed month views.
- **formatter**: `any`
- **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.
- **platform**: `PlatformUtil`
- **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`
- **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.
- **onStatusChanged**(): void
- **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/15.1.x/classes/IgxDateRangeSeparatorDirective)
Replaces the default separator to with the provided value

- **constructor**(): IgxDateRangeSeparatorDirective

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

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

### [IgxDateSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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
- **displayFormat**: `string` — Set both pre-defined format options such as shortDate and longDate,
as well as constructed format string using characters supported by DatePipe, e.g. EE/MM/yyyy.
- **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.
- **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.
- **ngOnInit**(): void
- **onWheel**(event: WheelEvent): void

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

- **constructor**(): IgxDateTimeEditorModule

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

- **constructor**(): IgxDateTimeFilteringOperand

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

- **daysNavService**: `IgxDaysViewNavigationService`
- **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;
- **showWeekNumbers**: `boolean` — Show/hide week numbers
- **activeDate**: `string`

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

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

### [IgxDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>
- **destroy$**: `Subject<boolean>`
- **focusTrap**: `boolean` — An
- **id**: `string` — An
- **leftButtonBackgroundColor**: `string` — An
- **leftButtonColor**: `string` — An
- **leftButtonLabel**: `string` — An
- **leftButtonRipple**: `string` — An
- **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` — An
- **message**: `string` — An
- **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>
- **rightButtonBackgroundColor**: `string` — An
- **rightButtonColor**: `string` — An
- **rightButtonLabel**: `string` — An
- **rightButtonRipple**: `string` — An
- **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` — An
- **title**: `string` — An
- **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` — An
- **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
- **open**(overlaySettings: OverlaySettings): void — A method that opens the dialog.
- **toggle**(): void — A method that opens/closes the dialog.

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

- **constructor**(): IgxDisplayDensityModule

### [IgxDividerDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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` — An
- **role**: `string` — An
- **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` — An
- **inset**: `string` — Gets the current divider inset in terms of
margin 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;

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

- **constructor**(): IgxDividerModule

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

- **constructor**(cdr: ChangeDetectorRef, element: ElementRef<any>, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2, platformUtil: PlatformUtil): IgxDragDirective
- **_clicked**: `boolean`
- **_containerScrollIntervalId**: `any`
- **_data**: `any`
- **_defaultOffsetX**: `any` — Drag ghost related properties
- **_defaultOffsetY**: `any`
- **_destroy**: `Subject<boolean>`
- **_dragStarted**: `boolean`
- **_dynamicGhostRef**: `any`
- **_ghostHostX**: `number`
- **_ghostHostY**: `number`
- **_ghostStartX**: `any`
- **_ghostStartY**: `any`
- **_lastDropArea**: `any`
- **_lastX**: `number`
- **_lastY**: `number`
- **_offsetX**: `any`
- **_offsetY**: `any`
- **_originalScrollContainerHeight**: `number`
- **_originalScrollContainerWidth**: `number`
- **_pointerDownId**: `any`
- **_removeOnDestroy**: `boolean`
- **_scrollContainer**: `any`
- **_scrollContainerStep**: `number`
- **_scrollContainerStepMs**: `number`
- **_scrollContainerThreshold**: `number`
- **_startX**: `number`
- **_startY**: `number`
- **cdr**: `ChangeDetectorRef`
- **dragChannel**: `string | number | string[] | number[]` — An
- **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` — An
- **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` — An
- **element**: `ElementRef<any>`
- **ghost**: `boolean` — An
- **ghostClass**: `string` — Sets a custom class that will be added to the ghostElement element.
<div igxDrag [ghostClass]="'ghostElement'">
        <span>Drag Me!</span>
</div>
- **ghostContext**: `any`
- **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` — An
- **ghostTemplate**: `TemplateRef<any>` — An
- **platformUtil**: `PlatformUtil`
- **renderer**: `Renderer2`
- **scrollContainer**: `HTMLElement` — An
- **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`
- **baseLeft**: `number`
- **baseOriginLeft**: `number`
- **baseOriginTop**: `number`
- **baseTop**: `number`
- **data**: `any`
- **ghostLeft**: `number`
- **ghostOffsetX**: `any`
- **ghostOffsetY**: `any`
- **ghostTop**: `number`
- **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.
- **windowScrollHeight**: `number`
- **windowScrollLeft**: `number`
- **windowScrollTop**: `number`
- **windowScrollWidth**: `number`
- **getContainerScrollDirection**(): DragScrollDirection
- **getGhostHostBaseOffsetX**(): any — Since we are using absolute position to move the ghost, the ghost host might not have position: relative.
Combined with position static, this means that the absolute position in the browser is relative to the offsetParent.
The offsetParent is pretty much the closes parent that has position: relative, or if no such until it reaches the body.
That's why if this is the case, we need to know how much we should compensate for the ghostHost being offset from
its offsetParent.

OffsetParent can be null in the case of position: fixed applied to the ghost host or display: none. In that case
just get the clientRects of the ghost host.
- **getGhostHostBaseOffsetY**(): any
- **getTransformX**(elem: any): number
- **getTransformY**(elem: any): number
- **onScrollContainer**(): void
- **onScrollContainerStep**(scrollDir: DragScrollDirection): void
- **setLocation**(newLocation: IgxDragLocation): void — Sets desired location of the base element or ghost element if rended relative to the document.
- **setTransformXY**(x: number, y: number): void — Method setting transformation to the base draggable element.
- **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/15.1.x/classes/IgxDragHandleDirective)

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

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

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

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

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

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

- **constructor**(element: ElementRef<any>, _renderer: Renderer2, _zone: NgZone): IgxDropDirective
- **_dropStrategy**: `IDropStrategy`
- **dropChannel**: `string | number | string[] | number[]` — An
- **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`
- **getInsertIndexAt**(draggedDir: IgxDragDirective, elementsAtPoint: any[]): number
- **getWindowScrollLeft**(): number
- **getWindowScrollTop**(): number
- **isDragLinked**(drag: IgxDragDirective): boolean

### [IgxDropDownBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxDropDownBaseDirective)
An abstract class, defining a drop-down component, with:
Properties for display styles and classes
A collection items of type IgxDropDownItemBaseDirective
Properties and methods for navigating (highlighting/focusing) items from the collection
Properties and methods for selecting items from the collection

- **constructor**(elementRef: ElementRef<any>, cdr: ChangeDetectorRef, _displayDensityOptions: IDisplayDensityOptions): IgxDropDownBaseDirective
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_focusedItem**: `any`
- **_height**: `any`
- **_id**: `string`
- **_width**: `any`
- **cdr**: `ChangeDetectorRef`
- readonly **collapsed**: `boolean` — Gets if the dropdown is collapsed
- **elementRef**: `ElementRef<any>`
- **height**: `string` — Gets/Sets the height of the drop down

// get
let myDropDownCurrentHeight = this.dropdown.height;

<!--set-->
<igx-drop-down [height]='400px'></igx-drop-down>
- **maxHeight**: `any` — Gets/Sets the drop down's container max height.

// get
let maxHeight = this.dropdown.maxHeight;

<!--set-->
<igx-drop-down [maxHeight]='200px'></igx-drop-down>
- **selectionChanging**: `EventEmitter<ISelectionEventArgs>` — Emitted when item selection is changing, before the selection completes

<igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down>
- **width**: `string` — Gets/Sets the width of the drop down

// get
let myDropDownCurrentWidth = this.dropdown.width;

<!--set-->
<igx-drop-down [width]='160px'></igx-drop-down>
- **element**: `any` — Get dropdown html element

let myDropDownElement = this.dropdown.element;
- **headers**: `IgxDropDownItemBaseDirective[]` — Get all header items

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

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

<!--set-->
<igx-drop-down [id]='newDropDownId'></igx-drop-down>
- **items**: `IgxDropDownItemBaseDirective[]` — Get all non-header items

let myDropDownItems = this.dropdown.items;
- **getNearestSiblingFocusableItemIndex**(startIndex: number, direction: Navigate): number
- **navigate**(direction: Navigate, currentIndex?: number): void
- **navigateItem**(newIndex: number): void — Navigates to the item on the specified index
- **onItemActionKey**(key: DropDownActionKey, event?: Event): void — Keydown Handler
- **scrollToHiddenItem**(newItem: IgxDropDownItemBaseDirective): void

### [IgxDropDownComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, selection: IgxSelectionAPIService, _displayDensityOptions: IDisplayDensityOptions): IgxDropDownComponent
- **_scrollPosition**: `number`
- **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>
- **destroy$**: `Subject<boolean>`
- **labelledBy**: `string` — An
- **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>
- **scrollContainerRef**: `ElementRef<any>`
- **selection**: `IgxSelectionAPIService`
- **toggleDirective**: `IgxToggleDirective`
- **virtDir**: `IgxForOfDirective<any>`
- **collapsed**: `boolean` — Gets if the dropdown is collapsed
- **collectionLength**: `number`
- **focusedItem**: `IgxDropDownItemBaseDirective`
- **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();
- **focusItem**(value: boolean): void
- **isSelectionValid**(selection: any): boolean — Checks whether the selection is valid
null - the selection should be emptied
Virtual? - the selection should at least have and index and value property
Non-virtual? - the selection should be a valid drop-down item and **not** be a header
- **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
- **onItemActionKey**(key: DropDownActionKey, event?: Event): void — Keydown Handler
- **open**(overlaySettings?: OverlaySettings): void — Opens the dropdown

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

this.dropdown.toggle();
- **updateItemFocus**(): void

### [IgxDropDownGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`

### [IgxDropDownItemBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxDropDownItemBaseDirective)
An abstract class defining a drop-down item:
With properties / styles for selection, highlight, height
Bindable property for passing data (value: any)
Parent component (has to be used under a parent with type IDropDownBase)
Method for handling click on Host()

- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef<any>, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxDropDownItemBaseDirective
- **_disabled**: `boolean`
- **_index**: `any`
- **_label**: `any`
- **_selected**: `boolean`
- **dropDown**: `IDropDownBase`
- **elementRef**: `ElementRef<any>`
- **group**: `IgxDropDownGroupComponent`
- **id**: `string` — Sets/gets the id of the item.
<igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item>

let itemId =  this.item.id;
- **isHeader**: `boolean` — Sets/gets if the given item is header
 // get
 let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemHeader = mySelectedItem.isHeader;


 <!--set-->
 <igx-drop-down-item *ngFor="let item of items">
     <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true">
         {{item.field}}
     </div>
 </igx-drop-down-item>
- **role**: `string` — Gets/sets the role attribute of the item. Default is 'option'.

 <igx-drop-down-item [role]="customRole"></igx-drop-down-item>
- **selection**: `IgxSelectionAPIService`
- **value**: `any` — Gets/sets the value of the item if the item is databound

// usage in IgxDropDownItemComponent
// get
let mySelectedItemValue = this.dropdown.selectedItem.value;

// set
let mySelectedItem = this.dropdown.selectedItem;
mySelectedItem.value = { id: 123, name: 'Example Name' }

// usage in IgxComboItemComponent
// get
let myComboItemValue = this.combo.items[0].value;
- **ariaLabel**: `string`
- **disabled**: `boolean` — Sets/gets if the given item is disabled

 // get
 let mySelectedItem = this.dropdown.selectedItem;
 let myItemIsDisabled = mySelectedItem.disabled;


 <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}>
     <div>
         {{item.field}}
     </div>
 </igx-drop-down-item>

**NOTE:** Drop-down items inside of a disabled IgxDropDownGroup will always count as disabled
- **focused**: `boolean` — Sets/gets if the given item is focused
 let mySelectedItem = this.dropdown.selectedItem;
 let isMyItemFocused = mySelectedItem.focused;
- **hasIndex**: `boolean`
- **index**: `number` — The data index of the dropdown item.

// get the data index of the selected dropdown item
let selectedItemIndex = this.dropdown.selectedItem.index
- **isSelectable**: `boolean` — Returns true if the items is not a header or disabled
- **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>
- **ensureItemFocus**(): void — If allowItemsFocus is enabled, keep the browser focus on the active item
- **ngDoCheck**(): void

### [IgxDropDownItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>
- **clicked**(event: any): void

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

- **constructor**(dropdown: IgxDropDownBaseDirective): IgxDropDownItemNavigationDirective
- **_target**: `IgxDropDownBaseDirective`
- **dropdown**: `IgxDropDownBaseDirective`
- **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/15.1.x/classes/IgxEmptyListTemplateDirective)

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

### [IgxExcelExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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
});
- **exportDataImplementation**(data: IExportRecord[], options: IgxExcelExporterOptions, done: any): void

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

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

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

- **constructor**(): IgxExcelStyleColumnOperationsTemplateDirective

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

- **constructor**(esf: BaseFilteringComponent, platform: PlatformUtil): IgxExcelStyleConditionalFilterComponent
- **esf**: `BaseFilteringComponent`
- **platform**: `PlatformUtil`
- **ngOnDestroy**(): void

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

- **constructor**(): IgxExcelStyleFilterOperationsTemplateDirective

### [IgxExcelStyleHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxExcelStyleSearchComponent)
A component used for presenting Excel style search UI.

- **constructor**(cdr: ChangeDetectorRef, esf: BaseFilteringComponent, platform: PlatformUtil): IgxExcelStyleSearchComponent
- **cdr**: `ChangeDetectorRef`
- **esf**: `BaseFilteringComponent`
- **platform**: `PlatformUtil`
- **ngAfterViewInit**(): void
- **ngOnDestroy**(): void

### [IgxExcelStyleSelectingComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxExcelStyleSortingComponent)
A component used for presenting Excel style column sorting UI.

- **constructor**(esf: BaseFilteringComponent, cdr: ChangeDetectorRef): IgxExcelStyleSortingComponent
- **esf**: `BaseFilteringComponent`
- **ngOnDestroy**(): void

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

- **constructor**(): IgxExcelTextDirective

### [IgxExpansionPanelBodyComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxExporterOptionsBase)

- **constructor**(fileName: string, _fileExtension: string): IgxExporterOptionsBase
- **_fileExtension**: `string`
- **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;

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

- **constructor**(): IgxFieldFormatterPipe
- **transform**(value: any, formatter: any, rowData: any, fieldData?: any): any

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

- **constructor**(columnActions: IgxColumnActionsComponent): IgxFilterActionColumnsPipe
- **columnActions**: `IgxColumnActionsComponent`
- **transform**(collection: ColumnType[], filterCriteria: string, _pipeTrigger: number): ColumnType[]

### [IgxFilterCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxFilterDirective)

- **constructor**(element: ElementRef<any>): IgxFilterDirective
- **filterOptions**: `IgxFilterOptions`
- **filtered**: `EventEmitter<any>`
- **filtering**: `EventEmitter<any>`
- **ngOnChanges**(changes: SimpleChanges): void

### [IgxFilterOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxFilterPipe)

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

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

- **constructor**(): IgxFilteringOperand
- **operations**: `IFilteringOperation[]`
- static **_instance**: `IgxFilteringOperand`
- **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 UI
- static **instance**(): IgxFilteringOperand

### [IgxFlatTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxFocusTrapDirective)

- **platformUtil**: `PlatformUtil`
- **focusTrap**: `boolean`

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

- **constructor**($implicit: T, index: number, count: number): IgxForOfContext<T>
- **$implicit**: `T`
- **count**: `number`
- **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/15.1.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>
- **_bScrollInternal**: `boolean` — If the next onScroll event is triggered due to internal setting of scrollTop
- **_differ**: `IterableDiffer<T>`
- **_differs**: `IterableDiffers`
- **_embeddedViews**: `EmbeddedViewRef<any>[]`
- **_sizesCache**: `number[]`
- **_template**: `TemplateRef<NgForOfContext<T, NgIterable<T>>>`
- **_trackByFn**: `TrackByFunction<T>`
- **_virtHeight**: `number` — Height that is being virtualized.
- **_virtScrollTop**: `number` — Internal track for scroll top that is being virtualized
- **_zone**: `NgZone`
- **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!");
}
- **contentObserver**: `ResizeObserver`
- **contentResizeNotify**: `Subject<unknown>`
- **contentSizeChange**: `EventEmitter<any>` — An event that is emitted after the rendered content size of the igxForOf has been changed.
- **dataChanged**: `EventEmitter<any>` — 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!");
}
- **document**: `any`
- **func**: `any`
- **heightCache**: `any[]`
- **igxForContainerSize**: `any` — An
- **igxForItemSize**: `any` — An
- **igxForOf**: `any[]` — An
- **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` — An
- **igxForSizePropName**: `any` — An
- **platformUtil**: `PlatformUtil`
- **scrollComponent**: `VirtualHelperBaseDirective`
- **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;
- **syncScrollService**: `IgxForOfScrollSyncService`
- **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;
- **sizesCache**: `number[]`
- **totalItemCount**: `number` — The total count of the virtual data items, when using remote service.
this.parentVirtDir.totalItemCount = data.Count;
- **virtualHelper**: `HTMLElement`
- **_adjustScrollPositionAfterSizeChange**(sizeDiff: any): void
- **_calcHeight**(): number
- **_calcVirtualScrollTop**(scrollTop: number): void
- **_getItemSize**(item: any, dimension: string): number
- **_recalcOnContainerChange**(): void
- **_recalcScrollBarSize**(): void
- **_updateScrollOffset**(): void
- **_updateSizeCache**(): void
- **addScrollTop**(addTop: number): boolean — Shifts the scroll thumb position.
this.parentVirtDir.addScrollTop(5);
- **applyChunkSizeChange**(): void — Recalculates chunkSize and adds/removes elements if need due to the change.
this.state.chunkSize is updated in @addLastElem() or @removeLastElem()
- **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
- **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: any): void — Scrolls to the specified index.
this.parentVirtDir.scrollTo(5);
- **updateSizes**(): void
- **verticalScrollHandler**(event: any): void

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

- **constructor**(crudService: IgxGridCRUDService, cms: IgxColumnMovingService): IgxGridAPIService
- **arrange_sorting_expressions**(): void
- **clear_groupby**(name?: string | string[]): void
- **get_groupBy_record_id**(gRow: IGroupByRecord): string
- **groupBy**(expression: IGroupingExpression): void
- **groupBy_deselect_all_rows_in_group**(groupRow: IGroupByRecord): void
- **groupBy_fully_expand_group**(groupRow: IGroupByRecord): void
- **groupBy_get_expanded_for_group**(groupRow: IGroupByRecord): IGroupByExpandState
- **groupBy_is_row_in_group**(groupRow: IGroupByRecord, rowID: any): boolean
- **groupBy_multiple**(expressions: IGroupingExpression[]): void
- **groupBy_select_all_rows_in_group**(groupRow: IGroupByRecord, clearPrevSelection: boolean): void
- **groupBy_toggle_group**(groupRow: IGroupByRecord): void
- **remove_grouping_expression**(fieldName: string): void
- **set_grouprow_expansion_state**(groupRow: IGroupByRecord, value: boolean): void

### [IgxGridActionButtonComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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.
- **buttons**: `QueryList<IgxGridActionButtonComponent>`
- **differs**: `IterableDiffers`
- **iconService**: `IgxIconService`
- **strip**: `IgxActionStripComponent`

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

- **constructor**(grid: GridType): IgxGridAddRowPipe
- **transform**(collection: any, isPinned: boolean, _pipeTrigger: number): any

### [IgxGridBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxGridBaseDirective)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(validation: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxGridBaseDirective
- **_allowAdvancedFiltering**: `boolean`
- **_allowFiltering**: `boolean`
- **_autoGeneratedCols**: `any[]`
- **_batchEditing**: `boolean`
- **_cdrRequestRepaint**: `boolean`
- **_dataView**: `any[]`
- **_defaultExpandState**: `boolean`
- **_defaultTargetRecordNumber**: `number`
- **_diTransactions**: `TransactionService<Transaction, State>`
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_expansionStates**: `Map<any, boolean>`
- **_filterMode**: `FilterMode`
- **_filterStrategy**: `IFilteringStrategy`
- **_headerFeaturesWidth**: `number`
- **_init**: `boolean`
- **_pinnedRecordIDs**: `any[]`
- **_sortingOptions**: `ISortingOptions`
- **_summaryRowList**: `QueryList<IgxSummaryRowComponent>`
- **_transactions**: `TransactionService<Transaction, State>`
- **_userOutletDirective**: `IgxOverlayOutletDirective`
- **actionStrip**: `IgxActionStripComponent`
- **activeNodeChange**: `EventEmitter<IActiveNodeChangeEventArgs>` — Emmited when the active node is changed.
- **addRowEmptyTemplate**: `TemplateRef<void>` — Gets/Sets a custom template for adding row UI when grid is empty.
- **advancedFilteringExpressionsTreeChange**: `EventEmitter<IFilteringExpressionsTree>` — Emitted after advanced filtering is performed.
- **autoGenerate**: `boolean` — Gets/Sets whether to auto-generate the columns.
- **autoGenerateExclude**: `string[]` — Gets/Sets a list of property keys to be excluded from the generated column collection
- **cdr**: `ChangeDetectorRef`
- **cellClick**: `EventEmitter<IGridCellEventArgs>` — Emitted when a cell is clicked.
- **cellEdit**: `EventEmitter<IGridEditEventArgs>` — Emitted when cell has been edited.
- **cellEditDone**: `EventEmitter<IGridEditDoneEventArgs>` — Emitted after cell has been edited and editing has been committed.
- **cellEditEnter**: `EventEmitter<IGridEditEventArgs>` — Emitted when cell enters edit mode.
- **cellEditExit**: `EventEmitter<IGridEditDoneEventArgs>` — Emitted when cell exits edit mode.
- **clipboardOptions**: `any` — Controls the copy behavior of the grid.
- **colResizingService**: `IgxColumnResizingService`
- **columnInit**: `EventEmitter<IgxColumnComponent>` — Emitted when a column is initialized.
- **columnMoving**: `EventEmitter<IColumnMovingEventArgs>` — Emitted during the column moving operation.
- **columnMovingEnd**: `EventEmitter<IColumnMovingEndEventArgs>` — Emitted when column moving ends.
- **columnMovingStart**: `EventEmitter<IColumnMovingStartEventArgs>` — Emitted when column moving starts.
- **columnPin**: `EventEmitter<IPinColumnCancellableEventArgs>` — Emitted before IgxColumnComponent is pinned.
- **columnPinned**: `EventEmitter<IPinColumnEventArgs>` — Emitted after IgxColumnComponent is pinned.
- **columnResized**: `EventEmitter<IColumnResizeEventArgs>` — Emitted after column is resized.
- **columnSelectionChanging**: `EventEmitter<IColumnSelectionEventArgs>` — Emitted when IgxColumnComponent is selected.
- **columnVisibilityChanged**: `EventEmitter<IColumnVisibilityChangedEventArgs>` — Emitted after column visibility is changed.
- **columnVisibilityChanging**: `EventEmitter<IColumnVisibilityChangingEventArgs>` — Emitted before column visibility is changed.
- **contextMenu**: `EventEmitter<IGridCellEventArgs>` — Emitted when a cell is right clicked.
- **data**: `any[]`
- **dataChanged**: `EventEmitter<any>` — Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
- **dataChanging**: `EventEmitter<IForOfDataChangingEventArgs>` — Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
- **differs**: `IterableDiffers`
- **document**: `any`
- **doubleClick**: `EventEmitter<IGridCellEventArgs>` — Emitted when a cell is double clicked.
- **dragRowID**: `any` — Gets the row ID that is being dragged.
- **emptyFilteredGridTemplate**: `TemplateRef<any>` — A template reference for the template when the filtered grid is empty.
- **emptyGridDefaultTemplate**: `TemplateRef<any>` — A template reference for the template when the grid is empty.
- **emptyGridTemplate**: `TemplateRef<void>` — Gets/Sets a custom template when empty.
- **envInjector**: `EnvironmentInjector`
- **evenRowCSS**: `string`
- **excelStyleHeaderIconDirectiveTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The custom template, if any, that should be used when rendering a row expand indicator.
- **filtering**: `EventEmitter<IFilteringEventArgs>` — Emitted before filtering expressions are applied.
- **filteringDone**: `EventEmitter<IFilteringExpressionsTree>` — Emitted after filtering is performed through the UI.
- **filteringExpressionsTreeChange**: `EventEmitter<IFilteringExpressionsTree>` — Emitted after filtering is performed.
- **filteringService**: `IgxFilteringService`
- **formGroupCreated**: `EventEmitter<IGridFormGroupCreatedEventArgs>` — Emitted when formGroup is created on edit of row/cell.
- **gridAPI**: `GridServiceType`
- **gridCopy**: `EventEmitter<IGridClipboardEvent>` — Emitted when a copy operation is executed.
- **gridKeydown**: `EventEmitter<IGridKeydownEventArgs>` — Emitted when keydown is triggered over element inside grid's body.
- **gridScroll**: `EventEmitter<IGridScrollEventArgs>` — Emitted when grid is scrolled horizontally/vertically.
- **headerCollapseIndicatorTemplate**: `TemplateRef<IgxGridTemplateContext>` — The custom template, if any, that should be used when rendering a header collapse indicator.
- **headerExpandIndicatorTemplate**: `TemplateRef<IgxGridTemplateContext>` — The custom template, if any, that should be used when rendering a header expand indicator.
- **injector**: `Injector`
- **isPivot**: `boolean`
- **loadingGridTemplate**: `TemplateRef<void>` — Gets/Sets a custom template when loading.
- **moving**: `boolean` — Controls whether columns moving is enabled in the grid.
- **navigation**: `IgxGridNavigationService`
- **oddRowCSS**: `string`
- **overlayService**: `IgxOverlayService`
- **pageChange**: `EventEmitter<number>`
- **pagingDone**: `EventEmitter<IPageEventArgs>`
- **perPageChange**: `EventEmitter<number>`
- **platform**: `PlatformUtil`
- **primaryKey**: `any` — Gets/Sets the primary key.
- **rangeSelected**: `EventEmitter<GridSelectionRange>` — Emitted when making a range selection.
- **rendered**: `EventEmitter<boolean>` — Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM
- **rowAdd**: `EventEmitter<IGridEditEventArgs>` — Emmited just before the newly added row is commited.
- **rowAdded**: `EventEmitter<IRowDataEventArgs>` — Emitted when a row is added.
- **rowClasses**: `any` — Sets a conditional class selector to the grid's row element.
Accepts an object literal, containing key-value pairs,
where the key is the name of the CSS class and the value is
either a callback function that returns a boolean, or boolean, like so:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };

<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
- **rowCollapsedIndicatorTemplate**: `TemplateRef<IgxGridRowTemplateContext>` — The custom template, if any, that should be used when rendering a row collapse indicator.
- **rowDelete**: `EventEmitter<IGridEditEventArgs>` — Emmited when deleting a row.
- **rowDeleted**: `EventEmitter<IRowDataEventArgs>` — Emitted when a row is deleted.
- **rowDragEnd**: `EventEmitter<IRowDragEndEventArgs>` — Emitted when dropping a row.
- **rowDragStart**: `EventEmitter<IRowDragStartEventArgs>` — Emitted when start dragging a row.
- **rowEdit**: `EventEmitter<IGridEditEventArgs>` — Emitted when exiting edit mode for a row.
- **rowEditDone**: `EventEmitter<IGridEditDoneEventArgs>` — Emitted after exiting edit mode for a row and editing has been committed.
- **rowEditEnter**: `EventEmitter<IGridEditEventArgs>` — Emitted when a row enters edit mode.
- **rowEditExit**: `EventEmitter<IGridEditDoneEventArgs>` — Emitted when row editing is canceled.
- **rowExpandedIndicatorTemplate**: `TemplateRef<IgxGridRowTemplateContext>` — The custom template, if any, that should be used when rendering a row expand indicator.
- **rowPinned**: `EventEmitter<IPinRowEventArgs>` — Emitted when the pinned state of a row is changed.
- **rowPinning**: `EventEmitter<IPinRowEventArgs>` — Emitted when the pinned state of a row is changed.
- **rowSelectionChanging**: `EventEmitter<IRowSelectionEventArgs>` — Emitted when IgxGridRowComponent is selected.
- **rowStyles**: `any` — Sets conditional style properties on the grid row element.
It accepts an object literal where the keys are
the style properties and the value is an expression to be evaluated.
styles = {
 background: 'yellow',
 color: (row: RowType) => row.selected : 'red': 'white'
}

<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
- **rowToggle**: `EventEmitter<IRowToggleEventArgs>` — Emitted when the expanded state of a row gets changed.
- **selected**: `EventEmitter<IGridCellEventArgs>` — Emitted when a cell is selected.
- **selectionService**: `IgxGridSelectionService`
- **shouldGenerate**: `boolean` — Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
- **snackbarDisplayTime**: `number` — Gets/Sets the display time for the row adding snackbar notification.
- **sortDescendingHeaderIconDirectiveTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>`
- **sorting**: `EventEmitter<ISortingEventArgs>` — Emitted before sorting expressions are applied.
- **sortingDone**: `EventEmitter<ISortingExpression | ISortingExpression[]>` — Emitted after sorting is completed.
- **sortingExpressionsChange**: `EventEmitter<ISortingExpression[]>` — Emitted before sorting is performed.
- **summaryService**: `IgxGridSummaryService`
- **toolbarExporting**: `EventEmitter<IGridToolbarExportEventArgs>` — Emitted when an export process is initiated by the user.
- **transactionFactory**: `IgxFlatTransactionFactory`
- **uniqueColumnValuesStrategy**: `any`
- **validation**: `IgxGridValidationService`
- **validationStatusChange**: `EventEmitter<IGridValidationStatusEventArgs>` — Emitted when grid's validation status changes.
- **validationTrigger**: `GridValidationTrigger` — Gets/Sets the trigger for validators used when editing the grid.
- **viewRef**: `ViewContainerRef`
- **zone**: `NgZone`
- **activeDescendant**: `string`
- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree` — Gets/Sets the advanced filtering state.
- **allowAdvancedFiltering**: `boolean` — Gets/Sets a value indicating whether the advanced filtering is enabled.
- **allowFiltering**: `boolean` — Gets/Sets if the filtering is enabled.
- **bannerClass**: `string`
- **batchEditing**: `boolean` — Gets/Sets whether the grid has batch editing enabled.
When batch editing is enabled, changes are not made directly to the underlying data.
Instead, they are stored as transactions, which can later be committed w/ the commit method.
- **cellSelection**: `GridSelectionMode` — Gets/Sets cell selection mode.
- **columnSelection**: `GridSelectionMode` — Gets/Sets column selection mode
- **columnWidth**: `string` — Gets/Sets the default width of the columns.
- **columns**: `IgxColumnComponent[]` — Gets an array of IgxColumnComponents.
- **dataCloneStrategy**: `IDataCloneStrategy` — Gets/Sets the data clone strategy of the grid when in edit mode.
- **dataRowList**: `QueryList<IgxRowDirective>` — A list of currently rendered IgxGridRowComponent's.
- **dataView**: `any[]` — Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
- **defaultHeaderGroupMinWidth**: `number` — Returns the IgxGridHeaderGroupComponent's minimum allowed width.
- **defaultRowHeight**: `number` — Gets the default row height.
- **dragGhostCustomTemplate**: `TemplateRef<IgxGridRowDragGhostContext>` — Gets the custom template, if any, used for row drag ghost.
- **dragIndicatorIconTemplate**: `TemplateRef<IgxGridEmptyTemplateContext>` — The custom template, if any, that should be used when rendering the row drag indicator icon
- **emptyFilteredGridMessage**: `string`
- **emptyGridMessage**: `string`
- **excelStyleHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — Gets the excel style header icon.
- **expansionStates**: `Map<any, boolean>` — Gets/Sets a list of key-value pairs [row ID, expansion state].
- **filterCellList**: `IgxGridFilteringCellComponent[]` — A list of all IgxGridFilteringCellComponent.
- **filterMode**: `FilterMode` — Gets/Sets the filter mode.
- **filterStrategy**: `IFilteringStrategy` — Gets/Sets the filtering strategy of the grid.
- **filteredData**: `any` — Returns an array of objects containing the filtered data.
- **filteredSortedData**: `any[]` — Returns an array containing the filtered sorted data.
- **filteringExpressionsTree**: `IFilteringExpressionsTree` — Gets/Sets the filtering state.
- **filteringLogic**: `FilteringLogic` — Gets/Sets the filtering logic of the IgxGridComponent.
- **filteringRow**: `IgxGridFilteringRowComponent`
- **hasColumnGroups**: `boolean` — Returns if the IgxGridComponent has column groups.
- **hasColumnLayouts**: `boolean` — Returns if the IgxGridComponent has column layouts for multi-row layout definition.
- **hasColumnsToAutosize**: `boolean`
- **hasEditableColumns**: `boolean` — Returns if the IgxGridComponent has editable columns.
- **hasFilterableColumns**: `boolean` — Returns if the IgxGridComponent has filterable columns.
- **hasMovableColumns**: `boolean` — Returns if the IgxGridComponent has moveable columns.
- **hasSortableColumns**: `boolean` — Returns if the IgxGridComponent has sortable columns.
- **hasSummarizedColumns**: `boolean` — Returns if the IgxGridComponent has summarized columns.
- **hasVisibleColumns**: `boolean`
- **headSelectorTemplate**: `TemplateRef<IgxHeadSelectorTemplateContext>` — Gets the header row selector template.
- **headerCellList**: `IgxGridHeaderComponent[]` — A list of all IgxGridHeaderComponent.
- **headerContainer**: `IgxGridForOfDirective<IgxGridHeaderGroupComponent>`
- **headerDragContainer**: `ElementRef<HTMLElement>`
- **headerGroupContainer**: `ElementRef<HTMLElement>`
- **headerGroups**: `IgxGridHeaderGroupComponent[]`
- **headerGroupsList**: `IgxGridHeaderGroupComponent[]` — A list of all IgxGridHeaderGroupComponent.
- **headerSelectorContainer**: `ElementRef<HTMLElement>`
- **headerWidth**: `number` — Gets the width of the header.
- **height**: `string` — Gets/Sets the height.
- **hiddenColumnsCount**: `number` — Gets the number of hidden columns.
- **hideRowSelectors**: `boolean` — Gets/Sets if the row selectors are hidden.
- **isFirstPage**: `boolean`
- **isLastPage**: `boolean`
- **isLoading**: `boolean`
- **locale**: `string` — Gets/Sets the locale.
- **nativeElement**: `HTMLElement` — Gets the native element.
- **outlet**: `IgxOverlayOutletDirective` — Gets/Sets the outlet used to attach the grid's overlays to.
- **page**: `number`
- **paging**: `boolean`
- **pagingMode**: `GridPagingMode`
- **pagingState**: `any`
- **perPage**: `number`
- **pinnedColumns**: `IgxColumnComponent[]` — Gets an array of the pinned IgxColumnComponents.
- **pinnedColumnsCount**: `number` — Gets the number of pinned columns.
- **pinnedDataView**: `any[]` — Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid.
- **pinnedRowHeight**: `any`
- **pinnedRows**: `IgxGridRowComponent[]` — Gets an array of the pinned IgxRowComponents.
- **pinnedWidth**: `number` — Gets the current width of the container for the pinned IgxColumnComponents.
- **pinning**: `IPinningConfig` — Gets/Sets the initial pinning configuration.
- **resourceStrings**: `IGridResourceStrings`
- **rowAddTextTemplate**: `TemplateRef<IgxGridEmptyTemplateContext>` — Gets the row add text template.
- **rowDraggable**: `boolean` — Gets/Sets whether rows can be moved.
- **rowEditActionsTemplate**: `TemplateRef<IgxGridRowEditActionsTemplateContext>` — Gets the row edit actions template.
- **rowEditTextTemplate**: `TemplateRef<IgxGridRowEditTextTemplateContext>` — Gets the row edit text template.
- **rowEditable**: `boolean` — Gets/Sets whether the rows are editable.
- **rowHeight**: `number` — Gets/Sets the row height.
- **rowList**: `QueryList<IgxRowDirective>` — A list of IgxGridRowComponent.
- **rowSelection**: `GridSelectionMode` — Gets/Sets row selection mode
- **rowSelectorTemplate**: `TemplateRef<IgxRowSelectorTemplateContext>` — Gets the row selector template.
- **selectRowOnClick**: `boolean` — Gets/Sets whether clicking over a row should select/deselect it
- **selectedRows**: `any[]`
- **showSummaryOnCollapse**: `boolean` — Controls whether the summary row is visible when groupBy/parent row is collapsed.
- **sortAscendingHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
- **sortDescendingHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
- **sortHeaderIconTemplate**: `TemplateRef<IgxGridHeaderTemplateContext>` — Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
- **sortStrategy**: `IGridSortingStrategy` — Gets/Sets the sorting strategy of the grid.
- **sortingExpressions**: `ISortingExpression[]` — Gets/Sets the sorting state.
- **sortingOptions**: `ISortingOptions`
- **summaryCalculationMode**: `GridSummaryCalculationMode` — Gets/Sets the summary calculation mode.
- **summaryPosition**: `GridSummaryPosition` — Gets/Sets the summary position.
- **summaryRowHeight**: `number`
- **totalHeight**: `any`
- **totalPages**: `number`
- **totalRecords**: `number` — Returns the total number of records.
- **totalWidth**: `number` — Returns the total width of the IgxGridComponent.
- **transactions**: `TransactionService<Transaction, State>` — Get transactions service for the grid.
- **unpinnedColumns**: `IgxColumnComponent[]` — Gets an array of unpinned IgxColumnComponents.
- **unpinnedDataView**: `any[]` — Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid.
- **unpinnedWidth**: `number` — Gets the current width of the container for the unpinned IgxColumnComponents.
- **virtualizationState**: `IForOfState` — Returns the state of the grid virtualization.
- **visibleColumns**: `IgxColumnComponent[]` — Returns an array of visible IgxColumnComponents.
- **width**: `string` — Gets/Sets the width of the grid.
- **_addRowForIndex**(index: number, asChild?: boolean): void
- **_restoreVirtState**(row: any): void
- **_shouldAutoSize**(renderedHeight: any): boolean
- **addRow**(data: any): void — Creates a new IgxGridRowComponent and adds the data record to the end of the data source.
- **autoSizeColumnsInView**(): void
- **beginAddRowById**(rowID: any, asChild?: boolean): void — Enters add mode by spawning the UI under the specified row by rowID.
- **beginAddRowByIndex**(index: number): void — Enters add mode by spawning the UI at the specified index.
- **beginAddRowForIndex**(index: number, asChild: boolean): void
- **buildDataView**(_data: any[]): void
- **changeRowEditingOverlayStateOnScroll**(row: RowType): void
- **checkContainerSizeChange**(): boolean
- **clearCellSelection**(): void — Deselect the selected cells.
- **clearFilter**(name?: string): void — If name is provided, clears the filtering state of the corresponding IgxColumnComponent.
- **clearSearch**(): void — Removes all the highlights in the cell.
- **clearSort**(name?: string): void — If name is provided, clears the sorting state of the corresponding IgxColumnComponent.
- **closeAdvancedFilteringDialog**(applyChanges: boolean): void — Closes the advanced filtering dialog.
- **collapseAll**(): void — Collapses all rows.
- **collapseRow**(rowID: any): void — Collapses the row by its id.
- **combineSelectedCellAndColumnData**(columnData: any[], formatters: boolean, headers: boolean): any[]
- **deleteRow**(rowSelector: any): any — Removes the IgxGridRowComponent and the corresponding data record by primary key.
- **deselectAllColumns**(): void — Deselects all columns
- **deselectAllRows**(onlyFilterData: boolean): void — Deselects all rows
- **deselectColumns**(columns: string[] | ColumnType[]): void — Deselect specified columns by field.
- **deselectRows**(rowIDs: any[]): void — Deselect specified rows by ID.
- **disableSummaries**(rest: any[]): void — Disable summaries for the specified column.
- **enableSummaries**(rest: any[]): void — Enables summaries for the specified column and applies your customSummary.
- **endEdit**(commit: boolean, event?: Event): boolean — Finishes the row transactions on the current row and returns whether the grid editing was canceled.
- **evaluateLoadingState**(): void — Should be called when data and/or isLoading input changes so that the overlay can be
hidden/shown based on the current value of shouldOverlayLoading
- **expandAll**(): void — Expands all rows.
- **expandRow**(rowID: any): void — Expands the row by its id.
- **extractDataFromColumnsSelection**(source: any[], formatters: boolean, headers: boolean): any[]
- **extractDataFromSelection**(source: any[], formatters: boolean, headers: boolean, columnData?: any[]): any[]
- **filter**(name: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void — Filters a single IgxColumnComponent.
- **filterGlobal**(value: any, condition: any, ignoreCase?: any): void — Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.
- **findNext**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number — Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
- **findPrev**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number — Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
- **generateDataFields**(data: any[]): string[]
- **getColumnByName**(name: string): IgxColumnComponent — Returns the IgxColumnComponent by field name.
- **getColumnByVisibleIndex**(index: number): IgxColumnComponent
- **getColumnList**(): IgxColumnComponent[]
- **getHeaderGroupWidth**(column: IgxColumnComponent): string — Gets the width to be set on IgxGridHeaderGroupComponent.
- **getNextCell**(currRowIndex: number, curVisibleColIndex: number, callback: any): ICellPosition — Returns ICellPosition which defines the next cell,
according to the current position, that match specific criteria.
- **getPinnedWidth**(takeHidden: boolean): number — Gets calculated width of the pinned area.
- **getPreviousCell**(currRowIndex: number, curVisibleColIndex: number, callback: any): ICellPosition — Returns ICellPosition which defines the previous cell,
according to the current position, that match specific criteria.
- **getRowData**(rowSelector: any): any — Returns the data that is contained in the row component.
- **getSelectableColumnsAt**(index: any): IgxColumnComponent[]
- **getSelectedColumnsData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].
- **getSelectedData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].
- **getSelectedRanges**(): GridSelectionRange[] — Get the currently selected ranges in the grid.
- **horizontalScrollHandler**(event: any): void
- **isRecordPinnedByIndex**(rowIndex: number): boolean — Returns whether the record is pinned or not.
- **markForCheck**(): void — Triggers change detection for the IgxGridComponent.
Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.
May degrade performance if used when not needed, or if misused:
// DON'Ts:
// don't call markForCheck from inside a loop
// don't call markForCheck when a primitive has changed
grid.data.forEach(rec => {
 rec = newValue;
 grid.markForCheck();
});

// DOs
// call markForCheck after updating a nested property
grid.data.forEach(rec => {
 rec.nestedProp1.nestedProp2 = newValue;
});
grid.markForCheck();
- **moveColumn**(column: IgxColumnComponent, target: IgxColumnComponent, pos: DropPosition): void — Places a column before or after the specified target column.
- **navigateTo**(rowIndex: number, visibleColIndex: number, cb: any): void — Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.
- **nextPage**(): void
- **openAdvancedFilteringDialog**(overlaySettings?: OverlaySettings): void — Opens the advanced filtering dialog.
- **paginate**(val: number): void
- **pinColumn**(columnName: string | IgxColumnComponent, index?: number): boolean — Pins a column by field name.
- **pinRow**(rowID: any, index?: number, row?: RowType): boolean — Pin the row by its id.
- **previousPage**(): void
- **recalculateAutoSizes**(): void — Recalculates all widths of columns that have size set to auto.
- **reflow**(): void — Recalculates grid width/height dimensions.
- **refreshSearch**(updateActiveInfo?: boolean, endEdit: boolean): number — Reapplies the existing search.
- **resetNotifyChanges**(): void
- **selectAllColumns**(): void — Selects all columns
- **selectAllRows**(onlyFilterData: boolean): void — Selects all rows
- **selectColumns**(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void — Select specified columns.
- **selectRange**(arg: GridSelectionRange | GridSelectionRange[]): void — Select range(s) of cells between certain rows and columns of the grid.
- **selectRows**(rowIDs: any[], clearCurrentSelection?: boolean): void — Select specified rows by ID.
- **selectedColumns**(): ColumnType[] — Get current selected columns.
- **sort**(expression: ISortingExpression | ISortingExpression[]): void — Sort a single IgxColumnComponent.
- **subscribeToTransactions**(): void
- **switchTransactionService**(val: boolean): void
- **toggleColumnVisibility**(args: IColumnVisibilityChangedEventArgs): void — Toggles the specified column's visibility.
- **toggleRow**(rowID: any): void — Toggles the row by its id.
- **transactionStatusUpdate**(event: StateUpdateEvent): void
- **unpinColumn**(columnName: string | IgxColumnComponent, index?: number): boolean — Unpins a column by field name. Returns whether the operation is successful.
- **unpinRow**(rowID: any, row?: RowType): boolean — Unpin the row by its id.
- **updateCell**(value: any, rowSelector: any, column: string): void — Updates the IgxGridRowComponent and the corresponding data record by primary key.
- **updateRow**(value: any, rowSelector: any): void — Updates the IgxGridRowComponent
- **verticalScrollHandler**(event: any): void
- **writeToData**(rowIndex: number, value: any): void

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

- **constructor**(): IgxGridBodyDirective

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

- **grid**: `GridType` — Returns the grid containing the cell.
- **active**: `boolean`
- **column**: `ColumnType` — Returns the column of the cell.
let column = this.cell.column;
- **editMode**: `boolean` — Returns if the row is currently in edit mode.
- **editValue**: `any` — Gets the current edit value while a cell is in edit mode.
let editValue = this.cell.editValue;
- **editable**: `boolean` — Returns whether the cell is editable..
- **id**: `any` — Gets the cell id.
A cell in the grid is identified by:
- rowID - primaryKey data value or the whole rowData, if the primaryKey is omitted.
- rowIndex - the row index
- columnID - column index

let cellID = cell.id;
- **row**: `RowType` — Returns the row containing the cell.
let row = this.cell.row;
- **selected**: `boolean` — Gets whether the cell is selected.
let isSelected = this.cell.selected;
- **selectionNode**: `ISelectionNode`
- **validation**: `IGridValidationState` — Gets the validation status and errors, if any.
let validation = this.cell.validation;
let errors = validation.errors;
- **value**: `any` — Returns the cell value.
- **width**: `string` — Gets the width of the cell.
let cellWidth = this.cell.width;
- **update**(val: any): void — Updates the cell value.

cell.update(newValue);

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

- **constructor**(): IgxGridColumnModule

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

- **constructor**(colResizingService: IgxColumnResizingService): IgxGridColumnResizerComponent
- **colResizingService**: `IgxColumnResizingService`
- **resizer**: `IgxColumnResizerDirective`
- **restrictResizerTop**: `number`

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

- **constructor**(validation: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxGridComponent
- **dataPreLoad**: `EventEmitter<IForOfState>` — Emitted when a new chunk of data is loaded from virtualization.
- **defaultGroupTemplate**: `TemplateRef<any>`
- **detailTemplateContainer**: `TemplateRef<any>`
- **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.
- **groupsExpanded**: `boolean` — Gets/Sets whether created groups are rendered expanded or collapsed.
- **id**: `string` — Gets/Sets the value of the id attribute.
- **summaryTemplate**: `TemplateRef<any>`
- **data**: `any[]` — Gets/Sets the array of data that populates the IgxGridComponent.
- **detailTemplate**: `TemplateRef<IgxGridMasterDetailContext>` — Returns a reference to the master-detail template.
let detailTemplate = this.grid.detailTemplate;
- **dropAreaMessage**: `string`
- **dropAreaVisible**: `boolean` — Gets if the grid's group by drop area is visible.
- **groupAreaTemplate**: `TemplateRef<any>` — Gets/Sets the template reference of the IgxGridComponent's group area.
- **groupByRowSelectorTemplate**: `TemplateRef<IgxGroupByRowSelectorTemplateContext>` — Gets the group by row selector template.
- **groupRowTemplate**: `TemplateRef<IgxGroupByRowTemplateContext>` — Gets/Sets the template reference for the group row.
- **groupStrategy**: `IGridGroupingStrategy` — Gets/Sets the grouping strategy of the grid.
- **groupingExpansionState**: `IGroupByExpandState[]` — Gets/Sets a list of expansion states for group rows.
- **groupingExpressions**: `IGroupingExpression[]` — Gets/Sets the group by state.
- **groupsRecords**: `IGroupByRecord[]` — Gets the hierarchical representation of the group by records.
- **groupsRowList**: `QueryList<any>` — Gets the list of group rows.
- **hasGroupableColumns**: `boolean` — Returns if the IgxGridComponent has groupable columns.
- **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.
- **getCellByColumnVisibleIndex**(rowIndex: number, index: number): CellType
- **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.

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

- **constructor**(): IgxGridDataMapperPipe
- **transform**(data: any[], field: string, _: number, val: any, isNestedPath: boolean): any

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

- **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`
- **addRowHandler**(event?: any, asChild?: boolean): void
- **deleteRowHandler**(event?: any): void — Delete a row according to the context
- **startEdit**(event?: any): void — Enter row or cell edit mode depending the grid rowEditable option

### [IgxGridExcelStyleFilteringComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, gridAPI?: GridType): IgxGridExcelStyleFilteringComponent
- **gridAPI**: `GridType`
- **mainDropdown**: `ElementRef<HTMLElement>`
- **column**: `ColumnType` — Returns the current column.
- **maxHeight**: `string` — Gets the maximum height.
- **minHeight**: `string` — Gets the minimum height.

### [IgxGridExpandableCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxGridExpandableCellComponent)
Providing reference to IgxGridCellComponent:
@ViewChild('grid', { read: IgxGridComponent })
 public grid: IgxGridComponent;

 let column = this.grid.columnList.first;

 let cell = column.cells[0];

- **constructor**(selectionService: IgxGridSelectionService, grid: GridType, overlayService: IgxOverlayService, cdr: ChangeDetectorRef, element: ElementRef<any>, zone: NgZone, touchManager: HammerGesturesManager, document: any, platformUtil: PlatformUtil): IgxGridExpandableCellComponent
- **document**: `any`
- **indentationDiv**: `ElementRef<any>`
- **indicator**: `ElementRef<any>`

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

- **constructor**(): IgxGridFilteringModule

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

- **constructor**(): IgxGridFooterComponent

### [IgxGridForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>
- **igxGridForOfUniqueSizeCache**: `boolean`
- **igxGridForOfVariableSizes**: `boolean`
- **syncService**: `IgxForOfSyncService`
- **igxGridForOf**: `any[]`
- **itemsDimension**: `any`
- **_applyChanges**(): void
- **_updateSizeCache**(changes: IterableChanges<T>): number
- **_updateViews**(prevChunkSize: any): void
- **addLastElem**(): void
- **getItemSize**(item: any): number
- **handleCacheChanges**(changes: IterableChanges<T>): number
- **initSizesCache**(items: any[]): number
- **ngDoCheck**(): void
- **ngOnChanges**(changes: SimpleChanges): void
- **ngOnInit**(): void
- **onHScroll**(scrollAmount: any): void
- **onScroll**(event: any): void
- **recalcUpdateSizes**(): void

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

- **constructor**(grid: GridType, gridSelection: IgxGridSelectionService, element: ElementRef<any>, cdr: ChangeDetectorRef, filteringService: IgxFilteringService): IgxGridGroupByRowComponent
- **cdr**: `ChangeDetectorRef`
- **element**: `ElementRef<any>`
- **filteringService**: `IgxFilteringService`
- **grid**: `GridType`
- **gridID**: `string` — An
- **gridSelection**: `IgxGridSelectionService`
- **groupContent**: `ElementRef<any>` — Returns a reference of the content of the group.
const groupRowContent = this.grid1.rowList.first.groupContent;
- **groupRow**: `IGroupByRecord` — An
- **index**: `number` — An
- **attrCellID**: `string`
- **dataRowIndex**: `number`
- **expanded**: `boolean` — Returns whether the group row is expanded.
const groupRowExpanded = this.grid1.rowList.first.expanded;
- **focused**: `boolean` — Returns whether the row is focused.
let gridRowFocused = this.grid1.rowList.first.focused;
- **iconTemplate**: `TemplateRef<any>`
- **nativeElement**: `any` — Returns a reference to the underlying HTML element.
const groupRowElement = this.nativeElement;
- **selectionNode**: `ISelectionNode`
- **styleClasses**: `string` — Returns the style classes applied to the group rows.
const groupCssStyles = this.grid1.rowList.first.styleClasses;
- **activate**(): void
- **isActive**(): boolean
- **toggle**(): void — Toggles the group row.
this.grid1.rowList.first.toggle()

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

- **constructor**(): IgxGridHeadersModule

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

- **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.

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

- **constructor**(): IgxGridPipesModule

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

- **constructor**(): IgxGridResizingModule

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

- **parent**: `RowType` — Returns the parent row, if grid is grouped.
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

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

- **constructor**(): IgxGridSelectionModule

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

- **constructor**(): IgxGridSharedModules

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

- **grid**: `GridType`
- **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?: any | any[]): 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?: any | any[]): void — Restores grid features' state based on the IGridState object passed as an argument.

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

- **constructor**(): IgxGridSummaryModule

### [IgxGridToolbarActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxGridToolbarAdvancedFilteringComponent)
Provides a pre-configured button to open the advanced filtering dialog of the grid.

- **constructor**(toolbar: IgxToolbarToken): IgxGridToolbarAdvancedFilteringComponent
- **overlaySettings**: `OverlaySettings`
- **grid**: `GridType` — Returns the grid containing this component.

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

- **constructor**(_displayDensityOptions: IDisplayDensityOptions, api: GridServiceType, iconService: IgxIconService, element: ElementRef<HTMLElement>): IgxGridToolbarComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_grid**: `GridType`
- **showProgress**: `boolean` — When enabled, shows the indeterminate progress bar.
- **sub**: `Subscription`
- **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/15.1.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/15.1.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.
- **isExporting**: `boolean` — Indicates whether there is an export in progress.
- **export**(type: "excel" | "csv", toggleRef?: IgxToggleDirective): void

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

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

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

- **constructor**(): IgxGridToolbarModule

### [IgxGridToolbarPinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxGridToolbarTitleComponent)
Provides a way to template the title portion of the toolbar in the grid.

- **constructor**(): IgxGridToolbarTitleComponent

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

- **constructor**(): IgxGridTransactionStatePipe
- **transform**(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any, ___: any): any

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

- **constructor**(): IgxGridValidationService
- **valid**: `boolean` — Gets whether state is valid.
- **clear**(key?: any): void — Clears validation state by key or all states if none is provided.
- **getInvalid**(): IRecordValidationState[] — Returns all invalid record states.
- **markAsTouched**(key: any, field?: string): void — Marks the associated record or field as touched.

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

- **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[]` — Returns the child rows.
- **expanded**: `boolean` — Gets/sets whether the group row is expanded.
const groupRowExpanded = groupRow.expanded;
- **groupRow**: `IGroupByRecord` — The IGroupByRecord object, representing the group record, if the row is a GroupByRow.
- **selected**: `boolean` — Gets whether the row is selected.
Default value is false.
row.selected = true;
- **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/15.1.x/classes/IgxGroupedTreeGridSorting)

- **constructor**(): IgxGroupedTreeGridSorting
- **getFieldValue**(obj: any, key: string, isDate: boolean, isTime: boolean): any
- static **instance**(): IgxGroupedTreeGridSorting

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

- **constructor**(): IgxGrouping
- **groupBy**(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult: IGroupByResult): IGroupByResult

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

- **constructor**(): IgxHeaderGroupStylePipe
- **transform**(styles: any, column: ColumnType, _: number): any

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

- **constructor**(): IgxHeaderGroupWidthPipe
- **transform**(width: any, minWidth: any, hasLayout: boolean): any

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

- **constructor**(crudService: IgxGridCRUDService, cms: IgxColumnMovingService): IgxHierarchicalGridAPIService
- **childGrids**: `Map<string, Map<any, GridType>>`
- **childRowIslands**: `Map<string, IgxRowIslandComponent>`
- **allow_expansion_state_change**(rowID: any, expanded: any): boolean
- **getChildGrid**(path: IPathSegment[]): any
- **getChildGridByID**(rowIslandKey: any, rowID: any): GridType
- **getChildGrids**(inDepth?: boolean): GridType[]
- **getChildGridsForRowIsland**(rowIslandKey: string): GridType[]
- **getChildRowIsland**(key: string): IgxRowIslandComponent
- **getParentRowId**(childGrid: GridType): any
- **get_rec_by_id**(rowID: any): any
- **get_row_expansion_state**(record: any): boolean
- **registerChildGrid**(parentRowID: any, rowIslandKey: string, grid: GridType): void
- **registerChildRowIsland**(rowIsland: IgxRowIslandComponent): void
- **unsetChildRowIsland**(rowIsland: IgxRowIslandComponent): void

### [IgxHierarchicalGridBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxHierarchicalGridBaseDirective)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxHierarchicalGridBaseDirective
- **dataPreLoad**: `EventEmitter<IForOfState>` — Emitted when a new chunk of data is loaded from virtualization.
- **expandChildren**: `boolean`
- **hasChildrenKey**: `string` — Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator.
- **rootGrid**: `GridType`
- **showExpandAll**: `boolean` — Gets/Sets whether the expand/collapse all button in the header should be rendered.
- **batchEditing**: `boolean` — Gets/Sets whether the grid has batch editing enabled.
When batch editing is enabled, changes are not made directly to the underlying data.
Instead, they are stored as transactions, which can later be committed w/ the commit method.
- **outlet**: `any` — Gets the outlet used to attach the grid's overlays to.
- **_createColComponent**(col: any): ComponentRef<IgxColumnComponent>
- **_createColGroupComponent**(col: IgxColumnGroupComponent): ComponentRef<IgxColumnGroupComponent>
- **_createColumn**(col: any): any
- **getChildGrid**(path: IPathSegment[]): any
- **getGridsForIsland**(rowIslandID: string): GridType[]

### [IgxHierarchicalGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxHierarchicalGridComponent)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: IgxHierarchicalGridAPIService, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxHierarchicalGridComponent
- **childTemplate**: `TemplateRef<any>`
- **hierarchicalRecordTemplate**: `TemplateRef<any>`
- **paginatorOutlet**: `ViewContainerRef`
- **toolbarOutlet**: `ViewContainerRef`
- **toolbarTemplate**: `TemplateRef<IgxGridToolbarTemplateContext>`
- **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;
- **headerHierarchyExpander**: `ElementRef<HTMLElement>`
- **id**: `string` — Gets/Sets the value of the id attribute.
- **outletDirective**: `IgxOverlayOutletDirective`
- **selectedCells**: `CellType[]` — Returns an array of the selected IgxGridCells.
- **totalItemCount**: `number`
- **_shouldAutoSize**(renderedHeight: any): boolean
- **generateDataFields**(data: any[]): string[]
- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getCellByColumnVisibleIndex**(rowIndex: number, index: number): CellType
- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getColumnList**(): IgxColumnComponent[]
- **getDefaultExpandState**(record: any): boolean
- **getRowByIndex**(index: number): RowType — Returns the RowType by index.
- **getRowByKey**(key: any): RowType — Returns the RowType by key.
- **ngOnDestroy**(): void
- **onColumnsChanged**(): void
- **onContainerScroll**(): void
- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id.
- **resizeNotifyHandler**(): void
- **setupColumns**(): void
- **unpinRow**(rowID: any): boolean — Unpin the row by its id.

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

- **cells**: `CellType[]` — Gets the rendered cells in the row component.
- **hasChildren**: `boolean` — Returns true if row islands exist.
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

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

- **constructor**(grid: GridType, selectionService: IgxGridSelectionService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxHierarchicalRowComponent
- **_cells**: `QueryList<IgxHierarchicalGridCellComponent>`
- **expander**: `ElementRef<HTMLElement>`
- **expanderClass**: `string`
- **rolActionClass**: `string`
- **expanded**: `boolean` — Returns whether the row is expanded.
const RowExpanded = this.grid1.rowList.first.expanded;
- **hasChildren**: `boolean`
- **viewIndex**: `number`
- **endEdit**(grid: GridType): void
- **toggle**(): void — Toggles the hierarchical row.
this.grid1.rowList.first.toggle()

### [IgxHierarchicalTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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;

### [IgxIconComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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` — This allows you to disable the aria-hidden attribute. By default it's applied.
- **el**: `ElementRef<any>`
- **family**: `string` — An
- **name**: `string` — An
- **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.
- **template**: `TemplateRef<HTMLElement>` — An accessor that returns a TemplateRef to explicit, svg or no ligature.

### [IgxIconService](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.registerFamilyAlias('material', 'material-icons');
this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');

- **constructor**(_sanitizer: DomSanitizer, _httpClient: HttpClient, _platformUtil: PlatformUtil, _document: any): IgxIconService
- **iconLoaded**: `Observable<IgxIconLoadedEvent>` — Observable that emits when an icon is successfully loaded
through a HTTP request.
- **defaultFamily**: `string` — Returns the default font-family.
  const defaultFamily = this.iconService.defaultFamily;
- **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');
- **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): IgxIconService — Registers a custom class to be applied to IgxIconComponent for a given font-family.
  this.iconService.registerFamilyAlias('material', 'material-icons');

### [IgxInputDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **cdr**: `ChangeDetectorRef`
- **element**: `ElementRef<HTMLInputElement>`
- **formControl**: `NgControl`
- **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.
- **ngModel**: `NgModel`
- **renderer**: `Renderer2`
- **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/15.1.x/classes/IgxInputGroupComponent)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(element: ElementRef<HTMLElement>, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef): IgxInputGroupComponent
- **_prefixes**: `QueryList<IgxPrefixDirective>`
- **_suffixes**: `QueryList<IgxSuffixDirective>`
- **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**: `IgxInputGroupTheme` — 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/15.1.x/classes/IgxInsertDropStrategy)

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

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

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

### [IgxLayoutDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxLinearProgressBarComponent)

- **constructor**(): IgxLinearProgressBarComponent
- **cssClass**: `string`
- **id**: `string` — An
- **role**: `string` — An
- **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>
- **text**: `string` — Set a custom text that is displayed according to the defined position.
 <igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></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 type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [striped]="true"></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 type="error" [textTop]="true"></igx-linear-bar>
- **textVisibility**: `boolean` — Set the text to be visible. By default it is set to true.
 <igx-linear-bar type="default" [textVisibility]="false"></igx-linear-bar>
- **type**: `string` — Set type of the IgxLinearProgressBarComponent. Possible options - default, success, info, warning, and error.
<igx-linear-bar [striped]="false" [max]="100" [value]="0" type="error"></igx-linear-bar>
- **valueMin**: `number`
- **ngAfterContentInit**(): void
- **runAnimation**(value: number): void

### [IgxListActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxListComponent)
Displays a collection of data items in a templatable list format

- **constructor**(element: ElementRef<any>, _displayDensityOptions: IDisplayDensityOptions): 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 the role attribute value.
- **template**: `TemplateRef<any>` — Gets a TemplateRef to the currently used template.

### [IgxListItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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**: `"separator" | "listitem"` — Gets the role attribute of the list item.
let itemRole =  this.listItem.role;
- **width**: `any` — Gets the width of a list item.
let itemWidth = this.listItem.width;

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

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

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

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

### [IgxListLineDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxMaskDirective)

- **constructor**(elementRef: ElementRef<HTMLInputElement>, maskParser: MaskParsingService, renderer: Renderer2, platform: PlatformUtil): IgxMaskDirective
- **_composing**: `boolean`
- **_compositionStartIndex**: `number`
- **displayValuePipe**: `PipeTransform` — Specifies a pipe to be used on blur.
<input [displayValuePipe] = "displayFormatPipe">
- **elementRef**: `ElementRef<HTMLInputElement>`
- **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">
- **maskParser**: `MaskParsingService`
- **platform**: `PlatformUtil`
- **promptChar**: `string` — Sets the character representing a fillable spot in the input mask.
Default value is "'_'".
<input [promptChar] = "'/'">
- **renderer**: `Renderer2`
- **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'">

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

- **activeViewIdx**: `number` — Holds month view index we are operating on.
- **activeView**: `IgxCalendarView` — Gets the current active view.
this.activeView = calendar.activeView;

### [IgxMonthPickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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".
- **selectDate**(value: Date): Date — Selects a date.
 this.monthPicker.selectDate(new Date(2018-06-12));

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

- **constructor**(el: ElementRef<any>): IgxMonthsViewComponent
- **el**: `ElementRef<any>`
- **formatView**: `boolean` — Gets/sets whether the view should be rendered
according to the locale and monthFormat, 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;
- **selected**: `EventEmitter<Date>` — Emits an event when a selection is made in the months view.
Provides reference the date property in the IgxMonthsViewComponent.
<igx-months-view (selected)="onSelection($event)"></igx-months-view>
- **date**: `Date`
- **locale**: `string` — Gets the locale of the months view.
Default value is "en".
let locale =  this.monthsView.locale;
- **monthFormat**: `any` — Gets the month format option of the months view.
let monthFormat = this.monthsView.monthFormat.
- **resetActiveMonth**(): void

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

- **constructor**(): IgxNavDrawerItemDirective

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

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

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

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

### [IgxNavbarActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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` — An
- **id**: `string` — An
- **title**: `string` — An
- **titleId**: `string` — An
- **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/15.1.x/classes/IgxNavbarTitleDirective)

- **constructor**(): IgxNavbarTitleDirective

### [IgxNavigationCloseDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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. Defaults to 68px.

// 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>
- **renderer**: `Renderer2`
- **width**: `string` — Width of the drawer in its open state. Defaults to "280px".

// get
let navDrawerWidth = this.navdrawer.width;


<!--set-->
<igx-nav-drawer [width]="'228px'"></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>
- **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/15.1.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/15.1.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/15.1.x/classes/IgxNumberFilteringOperand)
Provides filtering operations for numbers

- **constructor**(): IgxNumberFilteringOperand

### [IgxNumberSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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**(_factoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector, builder: AnimationBuilder, 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;
}
- **platformUtil**: `PlatformUtil`
- **attach**(element: ElementRef<any>, settings?: OverlaySettings): string — Generates Id. Provide this Id when call show(id) method
- **attach**(component: Type<any>, settings?: OverlaySettings, moduleRef?: any): string — Generates Id. Provide this Id when call show(id) method
- **attach**(component: Type<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): void — Offsets the content along the corresponding axis by the provided amount
- **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/15.1.x/classes/IgxPageNavigationComponent)

- **constructor**(paginator: IgxPaginatorComponent): IgxPageNavigationComponent
- **paginator**: `IgxPaginatorComponent`
- **role**: `string` — An

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

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

### [IgxPaginatorComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxPaginatorComponent)
Base class containing all logic required for implementing DisplayDensity.

- **constructor**(_displayDensityOptions: IDisplayDensityOptions, elementRef: ElementRef<any>, cdr: ChangeDetectorRef): IgxPaginatorComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_page**: `number`
- **_perPage**: `number`
- **_selectOptions**: `number[]`
- **_totalRecords**: `number`
- **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
- **classComfortable**: `boolean`
- **classCompact**: `boolean`
- **classCosy**: `boolean` — Sets the class of the IgxPaginatorComponent based
on the provided displayDensity.
- **isFirstPage**: `boolean` — Returns if the current page is the first page.
const lastPage = this.paginator.isFirstPage;
- **isFirstPageDisabled**: `boolean` — Returns if the first pager buttons should be disabled
- **isLastPage**: `boolean` — Returns if the current page is the last page.
const lastPage = this.paginator.isLastPage;
- **isLastPageDisabled**: `boolean` — Returns if the last pager buttons should be disabled
- **nativeElement**: `any`
- **overlaySettings**: `OverlaySettings` — An
- **page**: `number` — An
- **perPage**: `number` — An
- **resourceStrings**: `IPaginatorResourceStrings` — An accessor that returns the resource strings.
- **selectOptions**: `number[]` — An
- **totalRecords**: `number` — An
- **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();

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

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

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

- **constructor**(): IgxPaginatorModule

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

- **constructor**(): IgxPaginatorTemplateDirective

### [IgxPickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxPickerClearComponent)
Templates the default clear icon in the picker.

- **constructor**(): IgxPickerClearComponent

### [IgxPickerToggleComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxPivotAggregate)

- **constructor**(): IgxPivotAggregate
- static **resourceStrings**: `IGridResourceStrings`
- 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/15.1.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>
- **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>
- **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>
- **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>
- **grid**: `PivotGridType` — Returns the grid.

### [IgxPivotDateAggregate](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxPivotDateDimension)
Configuration of a pivot dimension.

- **constructor**(inBaseDimension: IPivotDimension, inOptions: IPivotDateDimensionOptions): IgxPivotDateDimension
- **dataType**: `GridColumnDataType` — Gets/Sets data type
- **defaultOptions**: `any` — Default options.
- **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.
- **inBaseDimension**: `IPivotDimension`
- **inOptions**: `IPivotDateDimensionOptions`
- **options**: `IPivotDateDimensionOptions` — Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc.
- **resourceStrings**: `IGridResourceStrings`
- **initialize**(inBaseDimension: any, inOptions: any): void

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

- **constructor**(): IgxPivotGridCellStyleClassesPipe
- **transform**(cssClasses: GridStyleCSSProperty, _: any, rowData: IPivotGridRecord, columnData: IPivotGridColumn, index: number, __: number): string

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

- **constructor**(colResizingService: IgxPivotColumnResizingService): IgxPivotGridColumnResizerComponent

### [IgxPivotGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxPivotGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxPivotGridComponent
- **_defaultExpandState**: `boolean`
- **_filterStrategy**: `IFilteringStrategy`
- **columnGroupStates**: `Map<string, boolean>`
- **dimensionDataColumns**: `any`
- **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[]>` — Emitted when a dimension is sorted.
- **emptyPivotGridTemplate**: `TemplateRef<void>` — Gets/Sets a custom template when pivot grid is empty.
- **isPivot**: `boolean`
- **showPivotConfigurationUI**: `boolean`
- **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[]` — Gets the full list of dimensions.
- **allowAdvancedFiltering**: `boolean`
- **allowFiltering**: `boolean`
- **batchEditing**: `boolean`
- **columnDimensions**: `IPivotDimension[]`
- **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.
- **defaultRowHeight**: `number` — Gets the default row height.
- **dimensionsSortingExpressions**: `ISortingExpression[]` — Gets the sorting expressions generated for the dimensions.
- **displayDensity**: `DisplayDensity` — Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
- **dragIndicatorIconTemplate**: `TemplateRef<any>`
- **emptyRowDimension**: `IPivotDimension`
- **filterDimensions**: `IPivotDimension[]`
- **filterMode**: `FilterMode`
- **hideRowSelectors**: `boolean`
- **id**: `string` — Gets/Sets the value of the id attribute.
- **page**: `number`
- **paging**: `boolean`
- **pagingMode**: `GridPagingMode`
- **perPage**: `number`
- **pinning**: `any`
- **pivotConfiguration**: `IPivotConfiguration`
- **pivotContentCalcWidth**: `number`
- **pivotKeys**: `any`
- **pivotPinnedWidth**: `number`
- **pivotUnpinnedWidth**: `number`
- **rowDimensions**: `IPivotDimension[]`
- **rowDraggable**: `boolean`
- **rowEditable**: `boolean`
- **selectedRows**: `any[]`
- **showSummaryOnCollapse**: `boolean`
- **summaryCalculationMode**: `GridSummaryCalculationMode`
- **summaryPosition**: `GridSummaryPosition`
- **summaryRowHeight**: `number`
- **superCompactMode**: `boolean` — Enables a super compact theme for the component.
- **totalRecords**: `number`
- **values**: `IPivotValue[]`
- **_removeDimensionInternal**(dimension: any): void
- **autoSizeRowDimension**(dimension: IPivotDimension): void — Auto-sizes row dimension cells.
- **buildDataView**(data: any[]): void
- **createColumnForDimension**(value: any, data: any, parent: ColumnType, isGroup: boolean): IgxColumnGroupComponent
- **filterDimension**(dimension: IPivotDimension, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree): void — Filters a single IPivotDimension.
- **generateColumnHierarchy**(fields: Map<string, any>, data: any, parent: any): IgxColumnComponent[]
- **generateDimensionColumns**(): IgxColumnComponent[]
- **generateFromData**(fields: string[]): Map<string, any>
- **getColumnGroupExpandState**(col: IgxColumnComponent): boolean
- **getColumnWidthSum**(): number
- **getComponentDensityClass**(baseStyleClass: string): string — Given a style class of a component/element returns the modified version of it based
on the current display density.
- **getDimensionType**(dimension: IPivotDimension): PivotDimensionType
- **getLargesContentWidth**(contents: ElementRef<any>[]): string
- **getMeasureChildren**(data: any, parent: any, hidden: any, parentWidth: any): any[]
- **horizontalScrollHandler**(event: any): void
- **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.
- **resolveColumnDimensionWidth**(dim: IPivotDimension): string
- **resolveToggle**(groupColumn: IgxColumnComponent, state: boolean): void
- **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.
- **verticalScrollHandler**(event: any): void

### [IgxPivotNumericAggregate](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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);

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

- **constructor**(grid: PivotGridType, selectionService: IgxGridSelectionService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, viewRef: ViewContainerRef): IgxPivotRowComponent
- **viewRef**: `ViewContainerRef`
- **data**: `IPivotGridRecord` — The pivot record data passed to the row component.

// get the pivot row data for the first selected row
let selectedRowData = this.grid.selectedRows[0].data;
- **pinned**: `boolean`
- **getCellClass**(col: IgxColumnComponent): any
- **getColumnData**(col: IgxColumnComponent): IPivotGridColumn
- **isCellActive**(visibleColumnIndex: any): boolean

### [IgxPivotTimeAggregate](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxPrependDropStrategy)

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

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

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

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

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

### [IgxQueryBuilderComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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**(cdr: ChangeDetectorRef, iconService: IgxIconService, platform: PlatformUtil, _localeId: string, _displayDensityOptions?: IDisplayDensityOptions): IgxQueryBuilderComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **_localeId**: `string`
- **cdr**: `ChangeDetectorRef`
- **expressionTreeChange**: `EventEmitter<any>` — Event fired as the expression tree is changed.

 <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
- **iconService**: `IgxIconService`
- **platform**: `PlatformUtil`
- **expressionTree**: `IExpressionTree` — Returns the expression tree.
- **fields**: `FieldType[]` — Returns the fields.
- **locale**: `string` — Gets the locale of the query builder.
If not set, defaults to application's locale.
- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings.

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

- **constructor**(): IgxQueryBuilderHeaderComponent
- **showLegend**: `boolean` — An
- **title**: `string` — An
- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings.

### [IgxRadioComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, renderer: Renderer2, ngControl: NgControl): IgxRadioComponent
- **ariaLabel**: `string` — Sets/gets the aria-label attribute of the radio component.
<igx-radio aria-label = "Radio1"></igx-radio>

let ariaLabel =  this.radio.ariaLabel;
- **ariaLabelledBy**: `string` — Sets/gets the aria-labelledby attribute of the radio component.
If not set, the aria-labelledby will be equal to the value of labelId attribute.
<igx-radio aria-labelledby = "Radio1"></igx-radio>

let ariaLabelledBy = this.radio.ariaLabelledBy;
- readonly **change**: `EventEmitter<IChangeRadioEventArgs>` — An event that is emitted after the radio value is changed.
Provides references to the IgxRadioComponent and the value property as event arguments.
- **checked**: `boolean` — Sets/gets  the checked attribute.
Default value is false.
<igx-radio [checked] = "true"></igx-radio>

let isChecked =  this.radio.checked;
- **cssClass**: `string` — Returns the class of the radio component.
let radioClass = this.radio.cssClass;
- **disableRipple**: `boolean` — Enables/disables the ripple effect on the radio button..
If not set, the disableRipple will have value false.
<igx-radio [disableRipple] = "true"></igx-radio>

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

let isFocused =  this.radio.focused;
- **id**: `string` — Sets/gets the id of the radio component.
If not set, the id of the first radio component will be "igx-radio-0".
<igx-radio id = "my-first-radio"></igx-radio>

let radioId =  this.radio.id;
- **labelId**: `string` — Sets/gets the id of the label element in the radio component.
If not set, the id of the label in the first radio component will be "igx-radio-0-label".
<igx-radio labelId = "Label1"></igx-radio>

let labelId =  this.radio.labelId;
- **labelPosition**: `string` — Sets/gets the position of the label in the radio component.
If not set, labelPosition will have value "after".
<igx-radio labelPosition = "before"></igx-radio>

let labelPosition =  this.radio.labelPosition;
- **name**: `string` — Sets/gets the name attribute of the radio component.
<igx-radio name = "Radio1"></igx-radio>
 
let name =  this.radio.name;
- **nativeLabel**: `ElementRef<any>` — Returns reference to native label element.
let labelElement =  this.radio.nativeLabel;
- **nativeRadio**: `ElementRef<any>` — Returns reference to native radio element.
let radioElement =  this.radio.nativeRadio;
- **ngControl**: `NgControl`
- **placeholderLabel**: `ElementRef<any>` — Returns reference to the label placeholder element.
let labelPlaceholder =  this.radio.placeholderLabel;
- **renderer**: `Renderer2`
- **tabindex**: `number` — Sets the value of the tabindex attribute.
<igx-radio [tabindex] = "1"></igx-radio>

let tabIndex =  this.radio.tabindex;
- **value**: `any` — Sets/gets the value attribute.
<igx-radio [value] = "'radioButtonValue'"></igx-radio>

let value =  this.radio.value;
- **disabled**: `boolean` — Sets/gets  the disabled attribute.
Default value is false.
<igx-radio disabled></igx-radio>

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

let isInvalid =  this.radio.invalid;
- **nativeElement**: `any` — Gets the nativeElement of the igx-radio.
- **required**: `boolean` — Sets/gets whether the radio button is required.
If not set, required will have value false.
<igx-radio required></igx-radio>

let isRequired =  this.radio.required;
- **deselect**(): void — Deselects the current radio button.
this.radio.deselect();
- **onStatusChanged**(): void
- **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/15.1.x/classes/IgxRadioGroupDirective)
Radio group directive renders set of radio buttons.

- **constructor**(ngControl: NgControl, _directionality: IgxDirectionality): IgxRadioGroupDirective
- readonly **change**: `EventEmitter<IChangeRadioEventArgs>` — An event that is emitted after the radio group value is changed.
- **ngControl**: `NgControl`
- **radioButtons**: `QueryList<IgxRadioComponent>` — Returns reference to the child radio buttons.
- **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.
- **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.
- **handleClick**(event: MouseEvent): void
- **handleKeyDown**(event: KeyboardEvent): void
- **ngDoCheck**(): void
- **writeValue**(value: any): void — Sets the "checked" property value on the radio input element.

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

- **constructor**(builder: AnimationBuilder, elementRef: ElementRef<any>, renderer: Renderer2, zone: NgZone): IgxRippleDirective
- **builder**: `AnimationBuilder`
- **elementRef**: `ElementRef<any>`
- **renderer**: `Renderer2`
- **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`
- **nativeElement**: `HTMLElement`

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

- **constructor**(): IgxRowDragModule

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

- **constructor**(): IgxRowIslandAPIService
- **change**: `Subject<any>`
- **childGrids**: `Map<any, IgxHierarchicalGridComponent>`
- **childRowIslands**: `Map<string, IgxRowIslandComponent>`
- **destroyMap**: `Map<string, Subject<boolean>>`
- **rowIsland**: `IgxRowIslandComponent`
- **state**: `Map<string, IgxRowIslandComponent>`
- **get**(id: string): IgxRowIslandComponent
- **getChildGridByID**(rowID: any): IgxHierarchicalGridComponent
- **getChildGrids**(inDepth?: boolean): any[]
- **getChildRowIsland**(rowIslandKey: string): IgxRowIslandComponent
- **register**(rowIsland: IgxRowIslandComponent): void
- **registerChildGrid**(parentRowID: any, grid: IgxHierarchicalGridComponent): void
- **registerChildRowIsland**(rowIsland: IgxRowIslandComponent): void
- **reset**(oldId: string, newId: string): void
- **unset**(id: string): void
- **unsetChildRowIsland**(rowIsland: IgxRowIslandComponent): void
- **unsubscribe**(rowIsland: IgxRowIslandComponent): void

### [IgxRowIslandComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxRowIslandComponent)
Base class containing all logic required for implementing DisplayDensity.

- **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, appRef: ApplicationRef, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, rowIslandAPI: IgxRowIslandAPIService, localeId: string, platform: PlatformUtil): IgxRowIslandComponent
- **_childColumns**: `any[]`
- **actionStrips**: `QueryList<IgxActionStripComponent>`
- readonly **data**: `any[]`
- **gridCreated**: `EventEmitter<IGridCreatedEventArgs>` — Event emmited 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>
- **islandPaginatorTemplate**: `TemplateRef<any>`
- **islandToolbarTemplate**: `TemplateRef<IgxGridToolbarTemplateContext>`
- **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`
- **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;
- **updateChildren**(): void
- **updateColumnList**(): void

### [IgxSelectComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, selection: IgxSelectionAPIService, overlayService: IgxOverlayService, _displayDensityOptions: IDisplayDensityOptions, _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` — An
- **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>
- **overlayService**: `IgxOverlayService`
- **overlaySettings**: `OverlaySettings` — An
- **placeholder**: `any` — An
- **prefixes**: `QueryList<IgxPrefixDirective>`
- **suffixes**: `QueryList<IgxSuffixDirective>`
- **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` — An
- **value**: `any` — An
- **inputGroupClick**(event: MouseEvent, overlaySettings?: OverlaySettings): void
- **manageRequiredAsterisk**(): void
- **navigate**(direction: Navigate, currentIndex?: number): void
- **onStatusChanged**(): void
- **open**(overlaySettings?: OverlaySettings): void — Opens the select

this.select.open();

### [IgxSelectGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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` — An

### [IgxSimpleComboComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, _iconService: IgxIconService, platformUtil: PlatformUtil, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector): IgxSimpleComboComponent
- **selectionChanging**: `EventEmitter<ISimpleComboSelectionChangingEventArgs>` — Emitted when item selection is changing, before the selection completes

<igx-simple-combo (selectionChanging)='handleSelection()'></igx-simple-combo>
- **searchValue**: `string`
- **createDisplayText**(newSelection: any[], oldSelection: any[]): string
- **deselect**(): void — Deselect the currently selected item
- **findAllMatches**(element: any): boolean
- **getRemoteSelection**(newSelection: any[], oldSelection: any[]): string
- **registerRemoteEntries**(ids: any[], add: boolean): void — Contains key-value pairs of the selected valueKeys and their resp. displayKeys
- **select**(item: any): void — Select a defined item
- **setSelection**(newSelection: any): void

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

- **constructor**(): IgxSimpleComboModule

### [IgxSlideComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

### [IgxSliderComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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` — An
- **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` — An
- **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` — An
- **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
- **setValue**(value: number | IRangeSliderValue, triggerChange: boolean): void

### [IgxSnackbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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();

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

- **constructor**(): IgxSortActionColumnsPipe
- **transform**(collection: ColumnType[], displayOrder: ColumnDisplayOrder, _pipeTrigger: number): ColumnType[]

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

- **constructor**(): IgxSorting
- **getFieldValue**(obj: T, key: string, isDate: boolean, isTime: boolean): any
- **groupDataRecursive**(data: any[], state: IGroupingState, level: number, parent: IGroupByRecord, metadata: IGroupByRecord[], grid: GridType, groupsRecords: any[], fullResult: IGroupByResult): any[]
- **sort**(data: any[], expressions: ISortingExpression[], grid?: GridType): any[]

### [IgxSplitterComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>): IgxSplitterComponent
- **document**: `any`
- **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

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

- **constructor**(): IgxSplitterModule

### [IgxSplitterPaneComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.
- **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/15.1.x/classes/IgxStepActiveIndicatorDirective)

- **constructor**(): IgxStepActiveIndicatorDirective

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

- **constructor**(): IgxStepCompletedIndicatorDirective

### [IgxStepComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.
- **platform**: `PlatformUtil`
- **renderer**: `Renderer2`
- **stepper**: `IgxStepper`
- **stepperService**: `IgxStepperService`
- **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/15.1.x/classes/IgxStepContentDirective)

- **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/15.1.x/classes/IgxStepIndicatorDirective)

- **constructor**(): IgxStepIndicatorDirective

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

- **constructor**(): IgxStepInvalidIndicatorDirective

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

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

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

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

### [IgxStepperComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.
- **getCurrentElement**(): HTMLElement
- **getPreviousElement**(): HTMLElement
- **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.

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

- **constructor**(): IgxStepperModule

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

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

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

- **constructor**(): IgxStringReplacePipe
- **transform**(value: string, search: string | RegExp, replacement: string): string

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

- **constructor**(element: ElementRef<any>): IgxSummaryCellComponent
- **column**: `ColumnType`
- **density**: `any`
- **firstCellIndentation**: `number`
- **hasSummary**: `boolean`
- **rowIndex**: `number`
- **summaryFormatter**: `any`
- **summaryResults**: `IgxSummaryResult[]`
- **summaryTemplate**: `TemplateRef<any>`
- **attrCellID**: `string`
- **columnDatatype**: `GridColumnDataType`
- **itemHeight**: `number`
- **nativeElement**: `any`
- **selectionNode**: `ISelectionNode`
- **visibleColumnIndex**: `number`
- **width**: `string`
- **activate**(): void
- **translateSummary**(summary: IgxSummaryResult): string

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

- **constructor**(grid: GridType): IgxSummaryDataPipe
- **transform**(id: string, trigger: number): any

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

- **constructor**(): IgxSummaryFormatterPipe
- **transform**(summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand, summaryFormatter: any): any

### [IgxSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxSummaryRow)

- **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[]>` — The IGroupByRecord object, representing the group record, if the row is a GroupByRow.
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

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

- **constructor**(grid: GridType, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxSummaryRowComponent
- **_summaryCells**: `QueryList<IgxSummaryCellComponent>`
- **cdr**: `ChangeDetectorRef`
- **element**: `ElementRef<HTMLElement>`
- **firstCellIndentation**: `number`
- **grid**: `GridType`
- **gridID**: `any`
- **index**: `number`
- **summaries**: `Map<string, IgxSummaryResult[]>`
- **dataRowIndex**: `number`
- **minHeight**: `number`
- **nativeElement**: `HTMLElement`
- **summaryCells**: `QueryList<IgxSummaryCellComponent>`
- **getColumnSummaries**(columnName: string): IgxSummaryResult[]
- **getContext**(row: any): any
- **ngDoCheck**(): void

### [IgxSummaryTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxSwitchComponent)
The Switch component is a binary choice selection component.

- **constructor**(cdr: ChangeDetectorRef, renderer: Renderer2, ngControl: NgControl): IgxSwitchComponent
- **ariaLabel**: `string` — Sets/gets the value of the aria-label attribute.
- **ariaLabelledBy**: `string` — Sets/gets the aria-labelledBy attribute.
If not set, the  value of aria-labelledBy will be equal to the value of labelId attribute.
- readonly **change**: `EventEmitter<IChangeSwitchEventArgs>` — An event that is emitted after the switch state is changed.
Provides references to the IgxSwitchComponent and the checked property as event arguments.
- **cssClass**: `string` — Returns the class of the switch component.
- **disableRipple**: `boolean` — Enables/Disables the ripple effect
If not set, disableRipple will have value false.
- **focused**: `boolean` — Sets/gets whether the switch component is on focus.
Default value is false.
- **id**: `string` — Sets/gets the id of the switch component.
If not set, the id of the first switch component will be "igx-switch-0".
- **labelId**: `string` — Sets/gets the id of the label element of the switch component.
If not set, the label of the first switch component will have value "igx-switch-0-label".
- **labelPosition**: `string` — Sets/gets the position of the label in the switch component.
If not set, labelPosition will have value "after".
- **name**: `string` — Sets/gets the name attribute of the switch component.
- **nativeCheckbox**: `ElementRef<any>` — Returns a reference to the native checkbox element.
- **nativeLabel**: `ElementRef<any>` — Returns reference to the native label element.
- **ngControl**: `NgControl`
- **placeholderLabel**: `ElementRef<any>` — Returns reference to the label placeholder element.
- **renderer**: `Renderer2`
- **tabindex**: `number` — Sets/gets the value of the tabindex attribute.
- **value**: `any` — Sets/gets the value attribute of the switch component.
- **checked**: `boolean`
- **disabled**: `boolean` — Sets/gets the disabled attribute.
Default value is false.
- **invalid**: `boolean` — Sets/gets whether the switch component is invalid.
Default value is false.
- **nativeElement**: `any` — Returns reference to the nativeElement of the igx-switch.
- **required**: `boolean` — Sets/gets whether switch is required.
If not set, required will have value false.

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


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

- **tab**: `IgxTabItemDirective`

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


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

- **platform**: `PlatformUtil`
- **tab**: `IgxTabItemDirective`
- **tabs**: `IgxTabsBase`

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

- **constructor**(): IgxTabHeaderIconDirective

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

- **constructor**(): IgxTabHeaderLabelDirective

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


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

- **disabled**: `boolean` — An
- **selectedChange**: `EventEmitter<boolean>` — Output to enable support for two-way binding on [(selected)]
- **selected**: `boolean` — An

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

- **constructor**(animationService: AnimationService, cdr: ChangeDetectorRef, ngZone: NgZone, dir: IgxDirectionality): IgxTabsComponent
- **tabAlignment**: `string` — An

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

- **dir**: `IgxDirectionality`
- **items**: `QueryList<IgxTabItemDirective>` — Returns the items.
- **selectedIndexChange**: `EventEmitter<number>` — Output to enable support for two-way binding on [(selectedIndex)]
- **selectedIndexChanging**: `EventEmitter<ITabsSelectedIndexChangingEventArgs>` — Emitted when the selected index is about to change.
- **selectedItemChange**: `EventEmitter<ITabsSelectedItemChangeEventArgs>` — Emitted when the selected item is changed.
- **disableAnimation**: `boolean` — Enables/disables the transition animation of the contents.
- **selectedIndex**: `number` — An
- **selectedItem**: `IgxTabItemDirective` — Gets the selected item.

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

- **constructor**(element: ElementRef<any>, 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 aditional 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.
- **renderer**: `Renderer2`
- **row**: `any` — The identifier of the row on which the directive is currently on.

<div
  igxTextHighlight
  [row]="0">
</div>
- static **highlightGroupsMap**: `Map<string, IActiveHighlightInfo>`
- **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.
- static **clearActiveHighlight**(groupName: any): void — Clears any existing highlight.
- static **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/15.1.x/classes/IgxTextSelectionDirective)

- **constructor**(element: ElementRef<any>): IgxTextSelectionDirective
- **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;
}
- **selected**: `boolean` — Returns whether the input element is selectable through the directive.

// get
@ViewChild('firstName',
 {read: IgxTextSelectionDirective})
public firstName: IgxTextSelectionDirective;

public getFirstNameSelectionStatus() {
 return this.firstName.selected;
}
- **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/15.1.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/15.1.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/15.1.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/15.1.x/classes/IgxTimeFilteringOperand)

- **constructor**(): IgxTimeFilteringOperand
- **findValueInSet**(target: any, searchVal: Set<any>): boolean

### [IgxTimePickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxTimePickerActionsDirective)
This directive can be used to add custom action buttons to the dropdown/dialog.

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

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

- **constructor**(element: ElementRef<any>, _localeId: string, _displayDensityOptions: IDisplayDensityOptions, _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`
- **headerOrientation**: `PickerHeaderOrientation` — Sets the orientation of the picker's header.
- **id**: `string` — An
- **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` — An
- **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">`
- **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.
- **onStatusChanged**(): void
- **open**(settings?: OverlaySettings): void — Opens the picker's dialog UI.
- **select**(date: string | Date): void — Selects time from the igxTimePicker.
- **toggle**(settings?: OverlaySettings): void

### [IgxTimePickerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxTimePickerTemplateDirective)
This directive should be used to mark which ng-template will be used from IgxTimePicker when re-templating its input group.

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

### [IgxTimeSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/classes/IgxToggleActionDirective)

- **constructor**(element: ElementRef<any>, navigationService: IgxNavigationService): IgxToggleActionDirective
- **_overlayDefaults**: `OverlaySettings`
- **_target**: `string | IToggleView`
- **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>
- **updateOverlaySettings**(settings: OverlaySettings): OverlaySettings — Updates provided overlay settings

### [IgxToggleDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxToggleDirective)
Common interface for Components with show and collapse functionality

- **_overlayId**: `string`
- **appended**: `EventEmitter<ToggleViewEventArgs>` — Emits an event after the toggle element is appended to the overlay container.

onAppended() {
 alert("Content appended!");
}


<div
  igxToggle
  (onAppended)='onToggleAppended()'>
</div>
- **closed**: `EventEmitter<ToggleViewEventArgs>` — Emits an event after the toggle container is closed.

onToggleClosed(event) {
 alert("Toggle closed!");
}


<div
  igxToggle
  (onClosed)='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>
- **destroy$**: `Subject<boolean>`
- **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
  (onOpened)='onToggleOpened($event)'>
</div>
- **opening**: `EventEmitter<ToggleViewCancelableEventArgs>` — Emits an event before the toggle container is opened.

onToggleOpening(event) {
 alert("Toggle opening!");
}


<div
  igxToggle
  (onOpening)='onToggleOpening($event)'>
</div>
- **overlayService**: `IgxOverlayService`
- **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): void — Offsets the content along the corresponding axis by the provided amount
- **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/15.1.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;
- **forceClose**(overlaySettings?: OverlaySettings): void — If there is close animation in progress this method will finish is.
If there is no close animation in progress this method will close the toggle with no animation.
- **forceOpen**(overlaySettings?: OverlaySettings): void — If there is open animation in progress this method will finish is.
If there is no open animation in progress this method will open the toggle with no animation.

### [IgxTooltipTargetDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/classes/IgxTransactionService)

- **constructor**(): IgxTransactionService<T, S>
- **_redoStack**: `Action<T>[][]`
- **_states**: `Map<any, S>`
- **_transactions**: `T[]`
- **_undoStack**: `Action<T>[][]`
- **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
- **addTransaction**(transaction: T, states: Map<any, S>, recordRef?: any): void
- **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
- **updateRecord**(data: any[], state: S): void — Updates state related record in the provided data
- **updateState**(states: Map<any, S>, transaction: T, recordRef?: any): void — Updates the provided states collection according to passed transaction and recordRef
- **verifyAddedTransaction**(states: Map<any, S>, transaction: T, recordRef?: any): void — Verifies if the passed transaction is correct. If not throws an exception.

### [IgxTreeComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>, _displayDensityOptions?: IDisplayDensityOptions): IgxTreeComponent
- **_displayDensityOptions**: `IDisplayDensityOptions`
- **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;
- **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.

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

- **constructor**(crudService: IgxGridCRUDService, cms: IgxColumnMovingService): IgxTreeGridAPIService
- **addRowToData**(data: any, parentRowID?: any): void
- **allow_expansion_state_change**(rowID: any, expanded: any): boolean
- **deleteRowById**(rowID: any): any
- **deleteRowFromData**(rowID: any, index: number): void
- **expand_path_to_record**(record: ITreeGridRecord): void
- **filterDataByExpressions**(expressionsTree: IFilteringExpressionsTree): any[]
- **filterTreeDataByExpressions**(expressionsTree: IFilteringExpressionsTree): ITreeGridRecord[]
- **get_all_data**(transactions?: boolean): any[]
- **get_rec_by_id**(rowID: any): ITreeGridRecord
- **get_rec_index_by_id**(pk: string | number, dataCollection?: any[]): number — Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
- **get_row_expansion_state**(record: ITreeGridRecord): boolean
- **get_selected_children**(record: ITreeGridRecord, selectedRowIDs: any[]): void
- **get_summary_data**(): any[]
- **row_deleted_transaction**(rowID: any): boolean
- **should_apply_number_style**(column: ColumnType): boolean
- **sortDataByExpressions**(data: ITreeGridRecord[], expressions: ISortingExpression[]): any[]
- **updateData**(grid: GridType, rowID: any, rowValueInDataSource: any, rowCurrentValue: any, rowNewValue: any): void — Updates related row of provided grid's data source with provided new row value
- **update_row_in_array**(value: any, rowID: any, index: number): void

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

- **constructor**(grid: GridType): IgxTreeGridAddRowPipe
- **transform**(collection: any, isPinned: boolean, _pipeTrigger: number): any

### [IgxTreeGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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, appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>): IgxTreeGridComponent
- **_filterStrategy**: `TreeGridFilteringStrategy`
- **_transactions**: `HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>`
- **cascadeOnDelete**: `boolean` — An
- **childDataKey**: `any` — An
- **foreignKey**: `any` — An
- **hasChildrenKey**: `any` — An
- **id**: `string` — An
- **loadChildrenOnDemand**: `any`
- **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[]` — An
- **expansionDepth**: `number` — An
- **hasGroupableColumns**: `boolean` — Returns if the IgxTreeGridComponent has groupable columns.
- **rowLoadingIndicatorTemplate**: `TemplateRef<void>` — An
- **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();
- **findRecordIndexInView**(rec: any): number
- **generateDataFields**(data: any[]): string[]
- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getCellByColumnVisibleIndex**(rowIndex: number, index: number): CellType
- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions.
- **getDefaultExpandState**(record: ITreeGridRecord): boolean
- **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.
- **transactionStatusUpdate**(event: StateUpdateEvent): void
- **unpinRow**(rowID: any): boolean — Unpin the row by its id.
- **writeToData**(rowIndex: number, value: any): void

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

- **children**: `RowType[]` — Returns the child rows.
- **data**: `any` — The data passed to the row component.

let selectedRowData = this.grid.selectedRows[0].data;
- **disabled**: `boolean`
- **expanded**: `boolean` — Gets whether the row is expanded.

let esExpanded = row.expanded;
- **hasChildren**: `boolean` — Returns true if child rows exist. Always return false for IgxGridRow.
- **parent**: `RowType` — Returns the parent row.
- **pinned**: `boolean` — Gets whether the row is pinned.

let isPinned = row.pinned;
- **treeRow**: `ITreeGridRecord` — The ITreeGridRecord with metadata about the row in the context of the tree grid.

const rowParent = this.treeGrid.getRowByKey(1).treeRow.parent;
- **viewIndex**: `number` — Returns the view index calculated per the grid page.

### [IgxTreeNodeComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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>
- **cdr**: `ChangeDetectorRef`
- **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.
- **navService**: `IgxTreeNavigationService`
- **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))
- **selectionService**: `IgxTreeSelectionService`
- **tree**: `IgxTree`
- **treeService**: `IgxTreeService`
- **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();
- **ngOnDestroy**(): void
- **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/15.1.x/classes/IgxYearsViewComponent)

- **constructor**(el: ElementRef<any>): IgxYearsViewComponent
- **el**: `ElementRef<any>`
- **formatView**: `boolean` — Gets/sets whether the view should be rendered
according to the locale and yearFormat, if any.
- **selected**: `EventEmitter<Date>` — Emits an event when a selection is made in the years view.
Provides reference the date property in the IgxYearsViewComponent.
<igx-years-view (selected)="onSelection($event)"></igx-years-view>
- **date**: `Date` — Gets/sets the selected date of the years view.
By default it is the current date.
<igx-years-view [date]="myDate"></igx-years-view>

let date =  this.yearsView.date;
- **locale**: `string` — Gets the locale of the years view.
Default value is "en".
let locale =  this.yearsView.locale;
- **yearFormat**: `any` — Gets the year format option of the years view.
let yearFormat = this.yearsView.yearFormat.

### [NoOpScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

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

- **constructor**(): NoopFilteringStrategy
- **filter**(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[]
- **getFieldValue**(rec: any, _fieldName: string): any
- static **instance**(): NoopFilteringStrategy

### [NoopPivotDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

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

- **constructor**(): NoopSortingStrategy
- **sort**(data: any[]): any[]
- static **instance**(): NoopSortingStrategy

### [PivotColumnDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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[], pivotKeys: IPivotKeys): any[]
- static **instance**(): PivotRowDimensionsStrategy | PivotColumnDimensionsStrategy

### [PivotRowDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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[], pivotKeys: IPivotKeys): IPivotGridRecord[]
- static **instance**(): PivotRowDimensionsStrategy

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

- **constructor**(x: number, y: number): Point
- **x**: `number`
- **y**: `number`

### [ScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

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

- **constructor**(): SortingIndexPipe
- **transform**(columnField: string, sortingExpressions: ISortingExpression[]): number

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

- **constructor**(hierarchicalFilterFields?: string[]): TreeGridFilteringStrategy
- **hierarchicalFilterFields**: `string[]`
- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]
- **getFieldValue**(rec: any, fieldName: string, isDate: boolean, isTime: boolean, grid?: GridType): any
- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>

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

- **constructor**(fields?: string[]): TreeGridFormattedValuesFilteringStrategy
- **shouldFormatFilterValues**(column: ColumnType): boolean

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

- **constructor**(hierarchicalFilterFields?: string[]): TreeGridMatchingRecordsOnlyFilteringStrategy
- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[]

### [θIgxHierarchicalGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/θIgxHierarchicalGridCellComponent)
Providing reference to IgxGridCellComponent:
@ViewChild('grid', { read: IgxGridComponent })
 public grid: IgxGridComponent;

 let column = this.grid.columnList.first;

 let cell = column.cells[0];

- **constructor**(selectionService: IgxGridSelectionService, grid: GridType, overlayService: IgxOverlayService, cdr: ChangeDetectorRef, helement: ElementRef<HTMLElement>, zone: NgZone, touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxHierarchicalGridCellComponent
- **_rootGrid**: `any`
- **ngOnInit**(): void

### [θIgxTreeGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/θIgxTreeGridCellComponent)
Providing reference to IgxGridCellComponent:
@ViewChild('grid', { read: IgxGridComponent })
 public grid: IgxGridComponent;

 let column = this.grid.columnList.first;

 let cell = column.cells[0];

- **constructor**(selectionService: IgxGridSelectionService, grid: GridType, overlayService: IgxOverlayService, cdr: ChangeDetectorRef, element: ElementRef<any>, zone: NgZone, touchManager: HammerGesturesManager, document: any, platformUtil: PlatformUtil): IgxTreeGridCellComponent
- **row**: `RowType` — Gets the row of the cell.
let cellRow = this.cell.row;

### [θIgxTreeGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/θIgxTreeGridRowComponent)

- **constructor**(grid: GridType, selectionService: IgxGridSelectionService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxTreeGridRowComponent
- **_cells**: `QueryList<any>`
- **expanded**: `boolean` — Returns a value indicating whether the row component is expanded.

const row = this.grid.getRowByKey(1) as IgxTreeGridRowComponent;
const expanded = row.expanded;
- **pinned**: `boolean` — Gets whether the row is pinned.
let isPinned = row.pinned;
- **treeRow**: `ITreeGridRecord` — The ITreeGridRecord passed to the row component.

const row = this.grid.getRowByKey(1) as IgxTreeGridRowComponent;
const treeRow = row.treeRow;
- **beginAddChild**(): void — Spawns the add child row UI for the specific row.

### [ϴIgxGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/ϴIgxGridCellComponent)
Providing reference to IgxGridCellComponent:
@ViewChild('grid', { read: IgxGridComponent })
 public grid: IgxGridComponent;

 let column = this.grid.columnList.first;

 let cell = column.cells[0];

- **constructor**(selectionService: IgxGridSelectionService, grid: GridType, overlayService: IgxOverlayService, cdr: ChangeDetectorRef, element: ElementRef<HTMLElement>, zone: NgZone, touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxGridCellComponent
- **_lastSearchInfo**: `ISearchInfo`
- **activeHighlightClass**: `string` — Sets/gets the active highlight class class of the cell.
Default value is "igx-highlight__active".
let activeHighlightClass = this.cell.activeHighlightClass;

this.cell.activeHighlightClass = 'igx-cell-highlight_active';
- **addRowCellTemplate**: `TemplateRef<any>`
- **cdr**: `ChangeDetectorRef`
- **cellTemplate**: `TemplateRef<any>` — Sets/gets the template of the cell.
<ng-template #cellTemplate igxCell let-value>
  <div style="font-style: oblique; color:blueviolet; background:red">
      <span>{{value}}</span>
  </div>
</ng-template>

@ViewChild('cellTemplate',{read: TemplateRef})
cellTemplate: TemplateRef<any>;

this.cell.cellTemplate = this.cellTemplate;

let template =  this.cell.cellTemplate;
- **cellValidationErrorTemplate**: `TemplateRef<any>`
- **column**: `ColumnType` — Gets the column of the cell.
 let cellColumn = this.cell.column;
- **defaultCellTemplate**: `TemplateRef<any>`
- **defaultErrorTemplate**: `TemplateRef<any>` — Gets the default error template.
- **defaultPinnedIndicator**: `TemplateRef<any>`
- **editMode**: `boolean` — Returns whether the cell is in edit mode.
- **formatter**: `any`
- **grid**: `GridType`
- **highlightClass**: `string` — Sets/gets the highlight class of the cell.
Default value is "igx-highlight".
let highlightClass = this.cell.highlightClass;

this.cell.highlightClass = 'igx-cell-highlight';
- **inlineEditorTemplate**: `TemplateRef<any>`
- **overlayService**: `IgxOverlayService`
- **pinnedIndicator**: `TemplateRef<any>`
- **platformUtil**: `PlatformUtil`
- **role**: `string` — Sets/get the role property of the cell.
Default value is "gridcell".
this.cell.role = 'grid-cell';

let cellRole = this.cell.role;
- **rowData**: `any` — Gets the data of the row of the cell.
let rowData = this.cell.rowData;
- **selectionService**: `IgxGridSelectionService`
- **value**: `any` — Sets/gets the cell value.
this.cell.value = "Cell Value";

let cellValue = this.cell.value;
- **width**: `string` — Gets the width of the cell.
let cellWidth = this.cell.width;
- **zone**: `NgZone`
- **ariaSelected**: `boolean`
- **attrCellID**: `string`
- **booleanClass**: `any`
- **cellID**: `any` — Gets the ID of the cell.
let cellID = this.cell.cellID;
- **cellSelectionMode**: `GridSelectionMode`
- **colEnd**: `number`
- **colStart**: `number`
- **columnIndex**: `number` — Gets the index of the cell column.
let columnIndex = this.cell.columnIndex;
- **columnSelected**: `boolean` — Gets whether the cell column is selected.
let isCellColumnSelected = this.cell.columnSelected;
- **context**: `IgxCellTemplateContext` — Gets the cell template context object.
 let context = this.cell.context();
- **editValue**: `any` — Gets the current edit value while a cell is in edit mode.
Only for cell editing mode.
let editValue = this.cell.editValue;
- **editable**: `boolean` — Returns whether the cell is editable.
- **formControl**: `FormControl<any>` — Gets the formControl responsible for value changes and validation for this cell.
- **gridColumnSpan**: `number`
- **gridID**: `any` — Gets the id of the grid in which the cell is stored.
let gridId = this.cell.gridID;
- **gridRowSpan**: `number`
- **highlight**: `IgxTextHighlightDirective`
- **nativeElement**: `HTMLElement` — Returns a reference to the nativeElement of the cell.
let cellNativeElement = this.cell.nativeElement;
- **pinnedIndicatorTemplate**: `TemplateRef<any>` — Gets the pinned indicator template.
let template = this.cell.pinnedIndicatorTemplate;
- **readonly**: `boolean` — Gets whether the cell is editable.
let isCellReadonly = this.cell.readonly;
- **row**: `RowType` — Gets the row of the cell.
let cellRow = this.cell.row;
- **rowEnd**: `number`
- **rowIndex**: `number` — Gets the index of the row where the cell is stored.
let rowIndex = this.cell.rowIndex;
- **rowStart**: `number`
- **selected**: `boolean` — Gets whether the cell is selected.
let isSelected = this.cell.selected;
- **selectionNode**: `ISelectionNode`
- **template**: `TemplateRef<any>` — Gets the cell template.
let template = this.cell.template;
- **title**: `any`
- **visibleColumnIndex**: `number` — Returns the column visible index.
let visibleColumnIndex = this.cell.visibleColumnIndex;
- **clearHighlight**(): void — Clears the highlight of the text in the cell.
this.cell.clearHighLight();
- **highlightText**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number — If the provided string matches the text in the cell, the text gets highlighted.
this.cell.highlightText('Cell Value', true);
- **ngAfterViewInit**(): void
- **setEditMode**(value: boolean): void — Starts/ends edit mode for the cell.

cell.setEditMode(true);
- **update**(val: any): void — Sets new value to the cell.
this.cell.update('New Value');

### [ϴIgxGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/ϴIgxGridRowComponent)

- **constructor**(grid: GridType, selectionService: IgxGridSelectionService, element: ElementRef<HTMLElement>, cdr: ChangeDetectorRef): IgxGridRowComponent
- **mrlRightPinnedOffset**: `string`
- **getContext**(col: any, row: any): any
- **getContextMRL**(pinnedCols: any, row: any): any

## Interfaces

### [Action](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/Action)

- **recordRef**: `any`
- **transaction**: `T`

### [AutocompleteOverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/interfaces/BannerCancelEventArgs)


### [BannerEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/BannerEventArgs)

- **banner**: `IgxBannerComponent`
- **event?**: `Event`

### [CancelableBrowserEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/CancelableBrowserEventArgs)

- **event?**: `Event` — Browser event

### [CancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/CancelableEventArgs)

- **cancel**: `boolean` — Provides the ability to cancel the event.

### [CarouselAnimationSettings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/CarouselAnimationSettings)

- **enterAnimation**: `AnimationReferenceMetadata`
- **leaveAnimation**: `AnimationReferenceMetadata`

### [CellType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/CellType)

- **active**: `boolean`
- **cellID?**: `any`
- **column**: `ColumnType`
- **editMode**: `boolean`
- **editValue**: `any`
- **editable**: `boolean`
- **grid**: `GridType`
- **id?**: `any`
- **nativeElement?**: `HTMLElement`
- **readonly?**: `boolean`
- **row**: `RowType`
- **selected**: `boolean`
- **title?**: `any`
- **update**: `any`
- **validation?**: `IGridValidationState`
- **value**: `any`
- **visibleColumnIndex?**: `number`
- **width**: `string`
- **activate?**: `any`
- **calculateSizeToFit?**: `any`
- **onClick?**: `any`
- **onDoubleClick?**: `any`
- **setEditMode?**: `any`

### [ColumnType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ColumnType)

- **additionalTemplateContext**: `any`
- **allChildren**: `ColumnType[]`
- **applySelectableClass**: `boolean`
- **calcWidth**: `any` — Custom CSS styling, appplied to every column 
calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth
- **children**: `QueryList<ColumnType>`
- **colEnd**: `number`
- **colStart**: `number`
- **collapsible?**: `boolean`
- **collapsibleIndicatorTemplate?**: `TemplateRef<any>`
- **columnGroup**: `boolean`
- **columnLayout**: `boolean`
- **columnLayoutChild**: `boolean`
- **dataType**: `GridColumnDataType`
- **disableHiding**: `boolean`
- **disablePinning**: `boolean`
- **editable**: `boolean`
- **expanded**: `boolean`
- **filterCell**: `any`
- **filterCellTemplate**: `TemplateRef<any>`
- **filterable**: `boolean`
- **filteringExpressionsTree**: `FilteringExpressionsTree`
- **filteringIgnoreCase**: `boolean`
- **grid**: `GridType`
- **gridColumnSpan**: `number`
- **gridRowSpan**: `number`
- **groupable**: `boolean`
- **groupingComparer**: `any`
- **hasNestedPath**: `boolean`
- **hasSummary**: `boolean`
- **header?**: `string`
- **headerCell**: `any`
- **headerClasses**: `any`
- **headerGroup**: `any`
- **headerGroupClasses**: `any`
- **headerGroupStyles**: `any`
- **headerStyles**: `any`
- **headerTemplate**: `TemplateRef<any>`
- **hidden**: `boolean`
- **index**: `number`
- **inlineEditorTemplate**: `TemplateRef<any>`
- **isFirstPinned**: `boolean`
- **isLastPinned**: `boolean`
- **level**: `number`
- **maxWidth**: `string`
- **maxWidthPercent**: `number`
- **maxWidthPx**: `number`
- **minWidth**: `string`
- **minWidthPercent**: `number`
- **minWidthPx**: `number`
- **movable**: `boolean`
- **parent?**: `ColumnType`
- **pinned**: `boolean`
- **pipeArgs**: `IColumnPipeArgs`
- **resizable**: `boolean`
- **resolvedWidth**: `string`
- **rowEnd**: `number`
- **rowStart**: `number`
- **searchable**: `boolean`
- **selectable**: `boolean`
- **selected**: `boolean`
- **sortStrategy**: `ISortingStrategy`
- **sortable**: `boolean`
- **sortingIgnoreCase**: `boolean`
- **summaries**: `any`
- **summaryTemplate**: `TemplateRef<any>`
- **title**: `string`
- **topLevelParent?**: `ColumnType`
- **validators**: `any[]`
- **visibleIndex**: `number`
- **width**: `string`
- **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/15.1.x/interfaces/DatePartDeltas)
Delta values used for spin actions.

- **date?**: `number`
- **hours?**: `number`
- **minutes?**: `number`
- **month?**: `number`
- **seconds?**: `number`
- **year?**: `number`

### [DateRange](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/DateRange)
Represents a range between two dates.

- **end**: `string | Date`
- **start**: `string | Date`

### [DateRangeDescriptor](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/DateRangeDescriptor)

- **dateRange?**: `Date[]`
- **type**: `DateRangeType`

### [GridSelectionRange](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/GridSelectionRange)

- **columnEnd**: `string | number`
- **columnStart**: `string | number`
- **rowEnd**: `number`
- **rowStart**: `number`

### [GridStyleCSSProperty](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/GridStyleCSSProperty)


### [HierarchicalStateRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/HierarchicalStateRecord)

- **rowID**: `any`

### [HierarchicalTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/HierarchicalTransactionService)

- **commit**: `any`

### [IAccordionCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IAccordionCancelableEventArgs)

- **owner**: `IgxAccordionComponent`
- **panel**: `IgxExpansionPanelBase` — Provides a reference to the IgxExpansionPanelComponent which is currently expanding/collapsing.

### [IAccordionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IActionStripResourceStrings)

- **igx_action_strip_button_more_title?**: `string`

### [IActiveHighlightInfo](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IActiveNodeChangeEventArgs)

- **column**: `number`
- **level?**: `number`
- **row**: `number`
- **tag**: `GridKeydownTargetType`

### [IAnimationParams](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IAnimationParams)

- **delay**: `string`
- **direction?**: `string`
- **duration**: `string`
- **easing**: `any`
- **endAngle?**: `number`
- **endDistance?**: `string`
- **endHeight?**: `string`
- **endOpacity?**: `number`
- **endPadding?**: `string`
- **fromPosition?**: `string`
- **fromScale?**: `number`
- **midScale?**: `number`
- **rotateX?**: `number`
- **rotateY?**: `number`
- **rotateZ?**: `number`
- **startAngle?**: `number`
- **startDistance?**: `string`
- **startHeight?**: `string`
- **startOpacity?**: `number`
- **startPadding?**: `string`
- **toPosition?**: `string`
- **toScale?**: `number`
- **xPos?**: `string`
- **yPos?**: `string`

### [IBannerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IBannerResourceStrings)

- **igx_banner_button_dismiss?**: `string`

### [IBaseChipEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IBaseChipEventArgs)

- **originalEvent**: `MouseEvent | KeyboardEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs`
- **owner**: `IgxChipComponent`

### [IBaseChipsAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IBaseChipsAreaEventArgs)

- **originalEvent**: `MouseEvent | KeyboardEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs`
- **owner**: `IgxChipsAreaComponent`

### [IButtonEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IButtonEventArgs)

- **button**: `IgxButtonDirective`

### [IButtonGroupEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IButtonGroupEventArgs)

- **button**: `IgxButtonDirective`
- **index**: `number`

### [ICachedViewLoadedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ICachedViewLoadedEventArgs)

- **oldContext**: `any`

### [ICalendarDate](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ICalendarDate)

- **date**: `Date`
- **isCurrentMonth**: `boolean`
- **isNextMonth**: `boolean`
- **isPrevMonth**: `boolean`

### [ICalendarResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ICalendarResourceStrings)

- **igx_calendar_first_picker_of?**: `string`
- **igx_calendar_multi_selection?**: `string`
- **igx_calendar_next_month?**: `string`
- **igx_calendar_previous_month?**: `string`
- **igx_calendar_range_end?**: `string`
- **igx_calendar_range_selection?**: `string`
- **igx_calendar_range_start?**: `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/15.1.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/15.1.x/interfaces/ICellPosition)

- **rowIndex**: `number`
- **visibleColumnIndex**: `number`

### [IChangeCheckboxEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChangeCheckboxEventArgs)

- **checkbox**: `IgxCheckboxComponent`
- **checked**: `boolean`

### [IChangeProgressEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChangeProgressEventArgs)

- **currentValue**: `number`
- **previousValue**: `number`

### [IChangeRadioEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChangeRadioEventArgs)

- **radio**: `IgxRadioComponent`
- **value**: `any`

### [IChangeSwitchEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChangeSwitchEventArgs)

- **checked**: `boolean`
- **switch**: `IgxSwitchComponent`

### [IChipClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipClickEventArgs)

- **cancel**: `boolean`

### [IChipEnterDragAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipEnterDragAreaEventArgs)

- **dragChip**: `IgxChipComponent`

### [IChipKeyDownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipKeyDownEventArgs)

- **cancel**: `boolean`
- **originalEvent**: `KeyboardEvent`

### [IChipResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipResourceStrings)

- **igx_chip_remove?**: `string`
- **igx_chip_select?**: `string`

### [IChipSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipSelectEventArgs)

- **cancel**: `boolean`
- **selected**: `boolean`

### [IChipsAreaReorderEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipsAreaReorderEventArgs)

- **chipsArray**: `IgxChipComponent[]`

### [IChipsAreaSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IChipsAreaSelectEventArgs)

- **newSelection**: `IgxChipComponent[]`

### [IColumnExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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?**: `HeaderType`
- **level?**: `number`
- **pinnedIndex?**: `number`
- **rowSpan?**: `number`
- **skip**: `boolean`
- **skipFormatter?**: `boolean`
- **startIndex?**: `number`

### [IColumnList](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnList)

- **columnWidths**: `number[]`
- **columns**: `IColumnInfo[]`
- **indexOfLastPinnedColumn**: `number`
- **maxLevel?**: `number`
- **maxRowLevel?**: `number`

### [IColumnMovingEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnMovingEndEventArgs)

- **cancel**: `boolean`
- **source**: `ColumnType`
- **target**: `ColumnType`

### [IColumnMovingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnMovingEventArgs)

- **cancel**: `boolean`
- **source**: `ColumnType`

### [IColumnMovingStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnMovingStartEventArgs)

- **source**: `ColumnType`

### [IColumnPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnPipeArgs)


### [IColumnResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnResizeEventArgs)

- **column**: `ColumnType`
- **newWidth**: `string`
- **prevWidth**: `string`

### [IColumnResizingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnResizingEventArgs)


### [IColumnSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnSelectionEventArgs)

- **added**: `string[]`
- **event?**: `Event`
- **newSelection**: `string[]`
- **oldSelection**: `string[]`
- **removed**: `string[]`

### [IColumnState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnState)

- **columnGroup**: `boolean`
- **dataType**: `GridColumnDataType`
- **disableHiding**: `boolean`
- **editable**: `boolean`
- **field**: `string`
- **filterable**: `boolean`
- **filteringIgnoreCase**: `boolean`
- **groupable**: `boolean`
- **hasSummary**: `boolean`
- **header**: `string`
- **headerClasses**: `string`
- **headerGroupClasses**: `string`
- **hidden**: `boolean`
- **maxWidth**: `string`
- **movable**: `boolean`
- **parent**: `any`
- **pinned**: `boolean`
- **resizable**: `boolean`
- **searchable**: `boolean`
- **sortable**: `boolean`
- **sortingIgnoreCase**: `boolean`
- **width**: `any`

### [IColumnToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IColumnVisibilityChangedEventArgs)

- **column**: `any`
- **newValue**: `boolean` — The new hidden state that the column will have, if operation is succesfull.
Will be true when hiding and false when showing.

### [IColumnVisibilityChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IColumnVisibilityChangingEventArgs)


### [IComboFilteringOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IComboFilteringOptions)
The filtering criteria to be applied on data search

- **caseSensitive**: `boolean` — Defines filtering case-sensitivity
- **filterable**: `boolean` — Defines whether filtering is allowed
- **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/15.1.x/interfaces/IComboItemAdditionEvent)

- **addedItem**: `any`
- **newCollection**: `any[]`
- **oldCollection**: `any[]`

### [IComboResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IComboResourceStrings)

- **igx_combo_empty_message?**: `string`

### [IComboSearchInputEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IComboSelectionChangingEventArgs)
Event emitted when an igx-combo's selection is changing

- **added**: `any[]` — An array containing the values 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 values that will be selected after this event
- **oldSelection**: `any[]` — An array containing the values that are currently selected
- **removed**: `any[]` — An array containing the values that will be removed from the selection (if any)

### [ICsvExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ICsvExportEndedEventArgs)

- **csvData?**: `string`

### [IDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDataCloneStrategy)

- **clone**: `any`

### [IDateParts](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IDatePickerResourceStrings)

- **igx_date_picker_change_date?**: `string`
- **igx_date_picker_choose_date?**: `string`

### [IDateRangePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDateRangePickerResourceStrings)

- **igx_date_range_picker_date_separator?**: `string`
- **igx_date_range_picker_done_button?**: `string`

### [IDensityChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDensityChangedEventArgs)

- **newDensity**: `DisplayDensity`
- **oldDensity**: `DisplayDensity`

### [IDialogCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDialogCancellableEventArgs)


### [IDialogEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDialogEventArgs)

- **dialog**: `IgxDialogComponent`
- **event**: `Event`

### [IDimensionsChange](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.

### [IDisplayDensityOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IDisplayDensityOptions)
Describes the object used to configure the DisplayDensity in Angular DI.

- **displayDensity**: `DisplayDensity`

### [IDragBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IDragCustomTransitionArgs)

- **delay?**: `number`
- **duration?**: `number`
- **timingFunction?**: `string`

### [IDragGhostBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/interfaces/IDragStartEventArgs)

- **cancel**: `boolean` — Set if the the dragging should be canceled.

### [IDropBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.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/15.1.x/interfaces/IDropStrategy)

- **dropAction**: `any`

### [IExcelExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IExcelExportEndedEventArgs)

- **xlsx?**: `Object`

### [IExpansionPanelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IExpansionPanelEventArgs)

- **event**: `Event`

### [IExportRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IExportRecord)

- **data**: `any`
- **hidden?**: `boolean`
- **hierarchicalOwner?**: `string`
- **level**: `number`
- **owner?**: `string | GridType`
- **summaryKey?**: `string`
- **type**: `ExportRecordType`

### [IExpressionTree](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IExpressionTree)

- **fieldName?**: `string`
- **filteringOperands**: `IFilteringExpression | IExpressionTree[]`
- **operator**: `FilteringLogic`

### [IFieldPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IFieldValidationState)

- **field**: `string`

### [IFilteringEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringEventArgs)

- **filteringExpressions**: `IFilteringExpressionsTree`

### [IFilteringExpression](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringExpression)
Represents filtering expressions.

- **condition**: `IFilteringOperation`
- **fieldName**: `string`
- **ignoreCase?**: `boolean`
- **searchVal?**: `any`

### [IFilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringExpressionsTree)

- **filteringOperands**: `IFilteringExpression | IFilteringExpressionsTree[]`
- **type?**: `FilteringExpressionsTreeType`
- **find**: `any`
- **findIndex**: `any`

### [IFilteringOperation](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringOperation)
Interface describing filtering operations

- **hidden?**: `boolean`
- **iconName**: `string`
- **isUnary**: `boolean`
- **logic**: `any`
- **name**: `string`

### [IFilteringState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringState)

- **advancedExpressionsTree?**: `IFilteringExpressionsTree`
- **expressionsTree**: `IFilteringExpressionsTree`
- **strategy?**: `IFilteringStrategy`

### [IFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFilteringStrategy)

- **filter**: `any`
- **getFilterItems**: `any`

### [IForOfDataChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IForOfDataChangingEventArgs)

- **containerSize**: `number`

### [IForOfState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IForOfState)

- **chunkSize?**: `number`
- **startIndex?**: `number`

### [IFormattedParts](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFormattedParts)

- **combined**: `string`
- **literal?**: `string`
- **value**: `string`

### [IFormattingOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFormattingOptions)

- **day?**: `"numeric" | "2-digit"`
- **month?**: `"long" | "short" | "narrow" | "numeric" | "2-digit"`
- **weekday?**: `"long" | "short" | "narrow"`
- **year?**: `"numeric" | "2-digit"`

### [IFormattingViews](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IFormattingViews)

- **day?**: `boolean`
- **month?**: `boolean`
- **year?**: `boolean`

### [IGridCellEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridCellEventArgs)

- **cell**: `CellType`
- **event**: `Event`

### [IGridClipboardEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridClipboardEvent)

- **cancel**: `boolean`
- **data**: `any[]`

### [IGridCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridCreatedEventArgs)

- **grid**: `IgxHierarchicalGridComponent`
- **owner**: `IgxRowIslandComponent`
- **parentID**: `any`

### [IGridEditDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridEditDoneEventArgs)

- **cellID?**: `any`
- **column?**: `ColumnType`
- **event?**: `Event`
- **isAddRow?**: `boolean`
- **newValue?**: `any`
- **oldValue**: `any`
- **owner?**: `GridType`
- **primaryKey**: `any`
- **rowData**: `any`
- **rowID**: `any`
- **valid?**: `boolean`

### [IGridEditEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridEditEventArgs)


### [IGridFormGroupCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridFormGroupCreatedEventArgs)

- **formGroup**: `FormGroup<any>`
- **owner**: `GridType`

### [IGridGroupingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridGroupingStrategy)

- **groupBy**: `any`

### [IGridKeydownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridKeydownEventArgs)

- **cancel**: `boolean`
- **event**: `Event`
- **target**: `any`
- **targetType**: `GridKeydownTargetType`

### [IGridResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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_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_end_group?**: `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_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_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_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_notEmpty?**: `string`
- **igx_grid_filter_notNull?**: `string`
- **igx_grid_filter_not_at?**: `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_no_aggregator?**: `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_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`

### [IGridScrollEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IGridSortingStrategy)

- **sort**: `any`

### [IGridState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridState)

- **advancedFiltering?**: `IFilteringExpressionsTree`
- **cellSelection?**: `GridSelectionRange[]`
- **columnSelection?**: `string[]`
- **columns?**: `IColumnState[]`
- **expansion?**: `any[]`
- **filtering?**: `IFilteringExpressionsTree`
- **groupBy?**: `IGroupingState`
- **id?**: `string`
- **moving?**: `boolean`
- **paging?**: `IPagingState`
- **pinningConfig?**: `IPinningConfig`
- **pivotConfiguration?**: `IPivotConfiguration`
- **rowIslands?**: `IGridStateCollection[]`
- **rowPinning?**: `any[]`
- **rowSelection?**: `any[]`
- **sorting?**: `ISortingExpression[]`

### [IGridStateCollection](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridStateCollection)

- **id**: `string`
- **parentRowID**: `any`
- **state**: `IGridState`

### [IGridStateOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridStateOptions)

- **advancedFiltering?**: `boolean`
- **cellSelection?**: `boolean`
- **columnSelection?**: `boolean`
- **columns?**: `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/15.1.x/interfaces/IGridToolbarExportEventArgs)

- **cancel**: `boolean`
- **exporter**: `IgxBaseExporter`
- **grid**: `GridType`
- **options**: `IgxExporterOptionsBase`

### [IGridValidationState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridValidationState)

- **errors?**: `ValidationErrors`
- **status**: `ValidationStatus`

### [IGridValidationStatusEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGridValidationStatusEventArgs)

- **owner**: `GridType`
- **status**: `ValidationStatus`

### [IGroupByExpandState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupByExpandState)

- **expanded**: `boolean`
- **hierarchy**: `IGroupByKey[]`

### [IGroupByKey](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupByKey)

- **fieldName**: `string`
- **value**: `any`

### [IGroupByRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupByRecord)

- **column?**: `ColumnType`
- **expression**: `ISortingExpression`
- **groupParent**: `IGroupByRecord`
- **groups?**: `IGroupByRecord[]`
- **height**: `number`
- **level**: `number`
- **records**: `GroupedRecords`
- **value**: `any`

### [IGroupingDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupingDoneEventArgs)

- **expressions**: `ISortingExpression | ISortingExpression[]`
- **groupedColumns**: `IgxColumnComponent | IgxColumnComponent[]`
- **ungroupedColumns**: `IgxColumnComponent | IgxColumnComponent[]`

### [IGroupingExpression](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupingExpression)

- **groupingComparer?**: `any`

### [IGroupingState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IGroupingState)

- **defaultExpanded**: `boolean`
- **expansion**: `IGroupByExpandState[]`
- **expressions**: `IGroupingExpression[]`

### [IInputResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IInputResourceStrings)

- **igx_input_file_placeholder?**: `string`
- **igx_input_upload_button?**: `string`

### [IListChild](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IListChild)

- **index**: `number`

### [IListItemClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/interfaces/IListResourceStrings)

- **igx_list_loading?**: `string`
- **igx_list_no_items?**: `string`

### [IMaskEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IMaskEventArgs)
The IgxMaskModule provides the IgxMaskDirective inside your application.

- **formattedValue**: `string`
- **rawValue**: `string`

### [IPageCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPageCancellableEventArgs)

- **current**: `number`
- **next**: `number`

### [IPageEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPageEventArgs)

- **current**: `number`
- **previous**: `number`

### [IPaginatorResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IPagingState)

- **index**: `number`
- **metadata?**: `any`
- **recordsPerPage**: `number`

### [IPanStateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPanStateChangeEventArgs)
Interface for the panStateChange igxList event arguments

- **item**: `IgxListItemComponent`
- **newState**: `IgxListPanState`
- **oldState**: `IgxListPanState`

### [IPinColumnCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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 succesfull,
the value of isPinned will change accordingly when read in the "-ing" and "-ed" event.


### [IPinColumnEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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 succesfull, value of isPinned will change accordingly when read in the "-ing" and "-ed" event.

### [IPinRowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPinRowEventArgs)
Event emitted when a row's pin state changes.

- **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.

### [IPinningConfig](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPinningConfig)
An interface describing settings for row/column pinning position.

- **columns?**: `ColumnPinningPosition`
- **rows?**: `RowPinningPosition`

### [IPivotAggregator](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPivotAggregator)
Interface describing a IPivotAggregator class.
Used for specifying custom aggregator lists.

- **aggregator?**: `any`
- **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/15.1.x/interfaces/IPivotConfiguration)
Configuration of the pivot grid.

- **columnStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the columns.
- **columns**: `IPivotDimension[]` — A list of 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.
- **rowStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the rows.
- **rows**: `IPivotDimension[]` — A list of the rows.
- **values**: `IPivotValue[]` — A list of the values.

### [IPivotDateDimensionOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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.
- **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.
- **level?**: `number` — Level of the dimension.
- **memberFunction?**: `any`
- **memberName**: `string` — Field name to use in order to extract value.
- **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 %.

### [IPivotDimensionData](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/interfaces/IPivotGridColumn)
Interface describing the Pivot column data.
 Contains information on the related column dimensions and their values.

- **dimensionValues**: `Map<string, string>` — Gets/Sets the group value associated with the related column dimension by its memberName. *
- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the column.*
- **field**: `string`
- **value**: `IPivotValue`

### [IPivotGridGroupRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IPivotGridGroupRecord)

- **height?**: `number`
- **rowSpan?**: `number`

### [IPivotGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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. *
- **dimensionValues**: `Map<string, string>` — Gets/Sets the group value associated with the related row dimension by its memberName. *
- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the record.*
- **level?**: `number` — Record level*
- **records?**: `any[]` — List of original data records associated with the current pivoted data. *

### [IPivotKeys](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.

### [IPivotValue](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`
- **member**: `string` — Field name to use in order to extract value.
- **styles?**: `any` — Allow conditionally styling of the IgxPivotGrid cells.

### [IPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IQueryBuilderResourceStrings)

- **igx_query_builder_add_condition?**: `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_create_and_group?**: `string`
- **igx_query_builder_create_or_group?**: `string`
- **igx_query_builder_date_placeholder?**: `string`
- **igx_query_builder_delete?**: `string`
- **igx_query_builder_delete_filters?**: `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_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_notEmpty?**: `string`
- **igx_query_builder_filter_notNull?**: `string`
- **igx_query_builder_filter_not_at?**: `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_initial_text?**: `string`
- **igx_query_builder_or_group?**: `string`
- **igx_query_builder_or_label?**: `string`
- **igx_query_builder_time_placeholder?**: `string`
- **igx_query_builder_title?**: `string`
- **igx_query_builder_ungroup?**: `string`
- **igx_query_builder_value_placeholder?**: `string`

### [IRangeSliderValue](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRangeSliderValue)

- **lower**: `number`
- **upper**: `number`

### [IRecordValidationState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRecordValidationState)

- **fields**: `IFieldValidationState[]`
- **key**: `any`

### [IResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IResourceStrings)


### [IRowDataEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRowDataEventArgs)

- **data**: `any`
- **owner**: `GridType`
- **primaryKey**: `any`

### [IRowDragEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRowDragEndEventArgs)

- **animation**: `boolean`
- **dragData**: `RowType`
- **dragDirective**: `any`
- **dragElement**: `HTMLElement`

### [IRowDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRowDragStartEventArgs)

- **dragData**: `RowType`
- **dragDirective**: `any`
- **dragElement**: `HTMLElement`

### [IRowExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IRowSelectionEventArgs)

- **added**: `any[]`
- **allRowsSelected?**: `boolean`
- **event?**: `Event`
- **newSelection**: `any[]`
- **oldSelection**: `any[]`
- **removed**: `any[]`

### [IRowToggleEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IRowToggleEventArgs)

- **cancel**: `boolean`
- **event?**: `Event`
- **expanded**: `boolean`
- **rowID**: `any`

### [IScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/ISearchInfo)

- **activeMatchIndex**: `number`
- **caseSensitive**: `boolean`
- **exactMatch**: `boolean`
- **matchInfoCache**: `any[]`
- **searchText**: `string`

### [ISelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISelectionEventArgs)
Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection.

- **newSelection**: `IgxDropDownItemBaseDirective`
- **oldSelection**: `IgxDropDownItemBaseDirective`

### [ISimpleComboSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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 value that will be selected after this event
- **oldSelection**: `any` — An object which represents the value that is currently selected

### [ISlideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISlideEventArgs)

- **carousel**: `IgxCarouselComponent`
- **slide**: `IgxSlideComponent`

### [ISliderValueChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISliderValueChangeEventArgs)

- **oldValue**: `number | IRangeSliderValue`
- **value**: `number | IRangeSliderValue`

### [ISortingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISortingEventArgs)

- **groupingExpressions?**: `IGroupingExpression | IGroupingExpression[]`
- **sortingExpressions?**: `ISortingExpression | ISortingExpression[]`

### [ISortingExpression](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISortingExpression)

- **dir**: `SortingDirection`
- **fieldName**: `string`
- **ignoreCase?**: `boolean`
- **strategy?**: `ISortingStrategy`

### [ISortingOptions](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISortingOptions)

- **mode**: `"multiple" | "single"`

### [ISortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISortingStrategy)

- **sort**: `any`

### [ISplitterBarResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISplitterBarResizeEventArgs)

- **pane**: `IgxSplitterPaneComponent`
- **sibling**: `IgxSplitterPaneComponent`

### [IStepChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IStepChangedEventArgs)

- **index**: `number`
- **owner**: `IgxStepper`

### [IStepChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IStepChangingEventArgs)

- **newIndex**: `number`
- **oldIndex**: `number`
- **owner**: `IgxStepper`

### [ISummaryExpression](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISummaryExpression)

- **customSummary?**: `any`
- **fieldName**: `string`

### [ISummaryRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ISummaryRecord)

- **cellIndentation?**: `number`
- **max?**: `number`
- **summaries**: `Map<string, IgxSummaryResult[]>`

### [ITabsBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITabsBaseEventArgs)

- **owner**: `IgxTabsDirective`

### [ITabsSelectedIndexChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITabsSelectedIndexChangingEventArgs)

- **cancel**: `boolean`
- **newIndex**: `number`
- **oldIndex**: `number`

### [ITabsSelectedItemChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITabsSelectedItemChangeEventArgs)

- **newItem**: `IgxTabItemDirective`
- **oldItem**: `IgxTabItemDirective`

### [ITimePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/interfaces/ITooltipHideEventArgs)

- **cancel**: `boolean`
- **target**: `IgxTooltipTargetDirective`
- **tooltip**: `IgxTooltipDirective`

### [ITooltipShowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITooltipShowEventArgs)

- **cancel**: `boolean`
- **target**: `IgxTooltipTargetDirective`
- **tooltip**: `IgxTooltipDirective`

### [ITreeGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/ITreeNodeEditedEvent)

- **node**: `IgxTreeNode<any>`
- **value**: `any`

### [ITreeNodeEditingEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeEditingEvent)

- **node**: `IgxTreeNode<any>`
- **value**: `string`

### [ITreeNodeSelectionEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeSelectionEvent)

- **added**: `IgxTreeNode<any>[]`
- **event?**: `Event`
- **newSelection**: `IgxTreeNode<any>[]`
- **oldSelection**: `IgxTreeNode<any>[]`
- **removed**: `IgxTreeNode<any>[]`

### [ITreeNodeToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeToggledEventArgs)

- **node**: `IgxTreeNode<any>`

### [ITreeNodeTogglingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeTogglingEventArgs)

- **node**: `IgxTreeNode<any>`

### [ITreeResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeResourceStrings)

- **igx_collapse?**: `string`
- **igx_expand?**: `string`

### [IValuesChange](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IViewChangeEventArgs)

- **context**: `any`
- **owner**: `IgxTemplateOutletDirective`
- **view**: `EmbeddedViewRef<any>`

### [IViewDateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IViewDateChangeEventArgs)

- **currentValue**: `Date`
- **previousValue**: `Date`

### [IgxCellTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxCellTemplateContext)

- **$implicit**: `any`
- **additionalTemplateContext**: `any`
- **cell**: `CellType`
- **defaultErrorTemplate?**: `TemplateRef<any>`
- **formControl?**: `FormControl<any>`

### [IgxColumnTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxColumnTemplateContext)

- **$implicit**: `ColumnType`
- **column**: `ColumnType`

### [IgxDateTimeEditorEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxDateTimeEditorEventArgs)

- **newValue?**: `Date`
- **oldValue?**: `Date`
- **userInput**: `string`

### [IgxDragCustomEventDetails](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxDragCustomEventDetails)

- **originalEvent**: `any`
- **owner**: `IgxDragDirective`
- **pageX**: `number`
- **pageY**: `number`
- **startX**: `number`
- **startY**: `number`

### [IgxExporterEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxExporterEvent)

- **cancel**: `boolean`
- **exporter**: `IgxBaseExporter`
- **grid**: `GridType`
- **options**: `IgxExporterOptions`

### [IgxFilterItem](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxFilterItem)

- **children?**: `IgxFilterItem[]`
- **label?**: `string`
- **value**: `any`

### [IgxGridEmptyTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridEmptyTemplateContext)

- **$implicit**: `undefined`

### [IgxGridHeaderTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridHeaderTemplateContext)

- **$implicit**: `HeaderType`

### [IgxGridMasterDetailContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridMasterDetailContext)

- **$implicit**: `any`
- **index**: `number`

### [IgxGridRowDragGhostContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridRowDragGhostContext)

- **$implicit**: `any`
- **data**: `any`
- **grid**: `GridType`

### [IgxGridRowEditActionsTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridRowEditActionsTemplateContext)

- **$implicit**: `any`

### [IgxGridRowEditTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridRowEditTemplateContext)

- **$implicit**: `undefined`
- **endEdit**: `any`
- **rowChangesCount**: `number`

### [IgxGridRowEditTextTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridRowEditTextTemplateContext)

- **$implicit**: `number`

### [IgxGridRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridRowTemplateContext)

- **$implicit**: `RowType`

### [IgxGridTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridTemplateContext)

- **$implicit**: `GridType`

### [IgxGridToolbarTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGridToolbarTemplateContext)

- **$implicit**: `GridType`

### [IgxGroupByRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGroupByRowSelectorTemplateContext)

- **$implicit**: `IgxGroupByRowSelectorTemplateDetails`

### [IgxGroupByRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGroupByRowSelectorTemplateDetails)

- **groupRow**: `IGroupByRecord`
- **selectedCount**: `number`
- **totalCount**: `number`

### [IgxGroupByRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxGroupByRowTemplateContext)

- **$implicit**: `IGroupByRecord`

### [IgxHeadSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxHeadSelectorTemplateContext)

- **$implicit**: `IgxHeadSelectorTemplateDetails`

### [IgxHeadSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxHeadSelectorTemplateDetails)

- **deselectAll?**: `any`
- **selectAll?**: `any`
- **selectedCount**: `number`
- **totalCount**: `number`

### [IgxIconLoadedEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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

### [IgxPivotGridValueTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxPivotGridValueTemplateContext)

- **$implicit**: `IPivotValue`

### [IgxRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxRowSelectorTemplateContext)

- **$implicit**: `IgxRowSelectorTemplateDetails`

### [IgxRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxRowSelectorTemplateDetails)

- **deselect?**: `any`
- **index**: `number`
- **key**: `any`
- **rowID**: `any`
- **select?**: `any`
- **selected**: `boolean`

### [IgxStep](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxStep)

- **active**: `boolean`
- **activeChange**: `EventEmitter<boolean>`
- **cdr**: `ChangeDetectorRef`
- **completed**: `boolean`
- **disabled**: `boolean`
- **id**: `string`
- **index**: `number`
- **isValid**: `boolean`
- **optional**: `boolean`
- **tabIndex**: `number`

### [IgxStepper](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxStepper)

- **activeStepChanged**: `EventEmitter<IStepChangedEventArgs>`
- **activeStepChanging**: `EventEmitter<IStepChangingEventArgs>`
- **animationDuration**: `number`
- **contentTop**: `boolean`
- **horizontalAnimationType**: `HorizontalAnimationType`
- **linear**: `boolean`
- **orientation**: `IgxStepperOrientation`
- **stepType**: `IgxStepType`
- **steps**: `IgxStepComponent[]`
- **titlePosition**: `IgxStepperTitlePosition`
- **verticalAnimationType**: `VerticalAnimationType`
- **navigateTo**: `any`
- **next**: `any`
- **prev**: `any`
- **reset**: `any`

### [IgxSummaryResult](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/interfaces/IgxSummaryTemplateContext)

- **$implicit**: `IgxSummaryResult[]`

### [IgxTimePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/IgxTimePickerValidationFailedEventArgs)

- **currentValue**: `string | Date`
- **previousValue**: `string | Date`

### [IgxTree](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`
- **collapseAll**: `any`
- **deselectAll**: `any`
- **expandAll**: `any`
- **findNodes**: `any`

### [IgxTreeNode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`

### [OverlayAnimationEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/OverlayAnimationEventArgs)

- **animationPlayer**: `AnimationPlayer` — Animation player that will play the animation
- **animationType**: `"open" | "close"` — 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/15.1.x/interfaces/OverlayCancelableEventArgs)


### [OverlayClosingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/OverlayClosingEventArgs)


### [OverlayEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/OverlayEventArgs)

- **componentRef?**: `ComponentRef<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/15.1.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

### [PivotRowHeaderGroupType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/PivotRowHeaderGroupType)

- **grid**: `any`
- **header**: `any`
- **headerID**: `string`
- **parent**: `any`
- **rowIndex**: `number`

### [PositionSettings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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
- **target?**: `HTMLElement | Point`
- **verticalDirection?**: `VerticalAlignment` — Direction in which the component should show
- **verticalStartPoint?**: `VerticalAlignment` — Target's starting point

### [RowType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/RowType)

- **addRowUI?**: `boolean`
- **beginAddRow?**: `any`
- **cells?**: `QueryList<CellType> | CellType[]`
- **children?**: `RowType[]`
- **data?**: `any`
- **delete?**: `any`
- **deleted?**: `boolean`
- **disabled?**: `boolean`
- **expanded?**: `boolean`
- **focused?**: `boolean`
- **grid**: `GridType`
- **groupRow?**: `IGroupByRecord`
- **hasChildren?**: `boolean`
- **inEditMode?**: `boolean`
- **index**: `number`
- **isGroupByRow?**: `boolean`
- **isSummaryRow?**: `boolean`
- **key?**: `any`
- **nativeElement?**: `HTMLElement`
- **onClick?**: `any`
- **onRowSelectorClick?**: `any`
- **parent?**: `RowType`
- **pin?**: `any`
- **pinned?**: `boolean`
- **selected?**: `boolean`
- **summaries?**: `Map<string, IgxSummaryResult[]>`
- **treeRow?**: `ITreeGridRecord`
- **unpin?**: `any`
- **update?**: `any`
- **validation?**: `IGridValidationState`
- **viewIndex**: `number`
- **virtDirRow?**: `IgxGridForOfDirective<any>`

### [State](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/State)

- **recordRef**: `any`
- **type**: `TransactionType`
- **value**: `any`

### [StateUpdateEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/StateUpdateEvent)

- **actions**: `Action<Transaction>[]`
- **origin**: `TransactionEventOrigin`

### [ToggleViewCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ToggleViewCancelableEventArgs)


### [ToggleViewEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ToggleViewEventArgs)

- **event?**: `Event`
- **id**: `string` — Id of the toggle view

### [Transaction](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/Transaction)

- **id**: `any`
- **newValue**: `any`
- **type**: `TransactionType`

### [TransactionService](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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`

## Enumerations

### [AbsolutePosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/enums/ColumnPinningPosition)

- **End** = 1
- **Start** = 0

### [CsvFileTypes](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/enums/DatePart)
Specify a particular date, time or AmPm part.

- **AmPm** = "ampm"
- **Date** = "date"
- **Hours** = "hours"
- **Literal** = "literal"
- **Minutes** = "minutes"
- **Month** = "month"
- **Seconds** = "seconds"
- **Year** = "year"

### [DateRangeType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/DateRangeType)

- **After** = 0
- **Before** = 1
- **Between** = 2
- **Specific** = 3
- **Weekdays** = 4
- **Weekends** = 5

### [Direction](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/Direction)

- **NEXT** = 1
- **NONE** = 0
- **PREV** = 2

### [DragDirection](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/DragDirection)

- **BOTH** = 2
- **HORIZONTAL** = 1
- **VERTICAL** = 0

### [DropPosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/DropPosition)
This enumeration is used to configure whether the drop position is set before or after
the target.

- **AfterDropTarget** = 1
- **BeforeDropTarget** = 0

### [ExportRecordType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.x/enums/FilteringExpressionsTreeType)

- **Advanced** = 1
- **Regular** = 0

### [FilteringLogic](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/FilteringLogic)

- **And** = 0
- **Or** = 1

### [GridInstanceType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/GridInstanceType)

- **Grid** = 0
- **TreeGrid** = 1

### [GridPagingMode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/GridPagingMode)

- **Local** = 0
- **Remote** = 1

### [HeaderType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/HeaderType)

- **ColumnHeader** = "ColumnHeader"
- **MultiColumnHeader** = "MultiColumnHeader"
- **MultiRowHeader** = "MultiRowHeader"
- **RowHeader** = "RowHeader"

### [HorizontalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/HorizontalAlignment)

- **Center** = -0.5
- **Left** = -1
- **Right** = 0

### [IgxInputState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/IgxInputState)

- **INITIAL** = 0
- **INVALID** = 2
- **VALID** = 1

### [IgxListPanState](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/IgxListPanState)

- **LEFT** = 1
- **NONE** = 0
- **RIGHT** = 2

### [PagingError](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/PagingError)

- **IncorrectPageIndex** = 1
- **IncorrectRecordsPerPage** = 2
- **None** = 0

### [PivotDimensionType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/PivotDimensionType)
The dimension types - Row, Column or Filter.

- **Column** = 1
- **Filter** = 2
- **Row** = 0

### [RelativePosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/enums/RowPinningPosition)

- **Bottom** = 1
- **Top** = 0

### [ScrollMonth](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/ScrollMonth)

- **NEXT** = "next"
- **NONE** = "none"
- **PREV** = "prev"

### [SortingDirection](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/SortingDirection)

- **Asc** = 1
- **Desc** = 2
- **None** = 0

### [SplitterType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/enums/TransactionEventOrigin)

- **ADD** = "add"
- **CLEAR** = "clear"
- **END** = "endPending"
- **REDO** = "redo"
- **UNDO** = "undo"

### [TransactionType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/TransactionType)

- **ADD** = "add"
- **DELETE** = "delete"
- **UPDATE** = "update"

### [VerticalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/VerticalAlignment)

- **Bottom** = 0
- **Middle** = -0.5
- **Top** = -1

### [WEEKDAYS](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/enums/WEEKDAYS)

- **FRIDAY** = 5
- **MONDAY** = 1
- **SATURDAY** = 6
- **SUNDAY** = 0
- **THURSDAY** = 4
- **TUESDAY** = 2
- **WEDNESDAY** = 3

## Functions

### [changei18n](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/changei18n)
`changei18n(resourceStrings: IResourceStrings): void`
Changes the resource strings for all components in the application
@param resourceStrings to be applied

### [getCurrentResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/getCurrentResourceStrings)
`getCurrentResourceStrings(): IResourceStrings`
Returns current resource strings for all components

### [getTypeNameForDebugging](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/getTypeNameForDebugging)
`getTypeNameForDebugging(type: any): string`

### [hierarchicalTransactionServiceFactory](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/hierarchicalTransactionServiceFactory)
`hierarchicalTransactionServiceFactory(): IgxTransactionService<Transaction, State>`

### [isDateInRanges](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/isDateInRanges)
`isDateInRanges(date: Date, ranges: DateRangeDescriptor[]): boolean`

### [isLeap](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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/15.1.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/15.1.x/functions/range)
`range(start: number, stop: any, step: number): any[]`

### [toPercent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/toPercent)
`toPercent(value: number, max: number): number`

### [toValue](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/toValue)
`toValue(value: number, max: number): number`

### [valueInRange](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/valueInRange)
`valueInRange(value: number, max: number, min: number): number`

### [weekDay](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/functions/weekDay)
`weekDay(year: number, month: number, day: number): number`

## Variables

### [ButtonGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/ButtonGroupAlignment)
`any`
Determines the Button Group alignment

### [CalendarSelection](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/CalendarSelection)
`any`
Sets the selection type - single, multi or range.

### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/CarouselIndicatorsOrientation)
`any`

### [ColumnDisplayOrder](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/ColumnDisplayOrder)
`any`

### [DEFAULT_OWNER](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/DEFAULT_OWNER)
`"default"`

### [DEFAULT_PIVOT_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/DEFAULT_PIVOT_KEYS)
`any`
Default pivot keys used for data processing in the pivot pipes.

### [DisplayDensity](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/DisplayDensity)
`any`
Defines the possible values of the components' display density.

### [DisplayDensityToken](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/DisplayDensityToken)
`InjectionToken<IDisplayDensityOptions>`
Defines the DisplayDensity DI token.

### [FilterMode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/FilterMode)
`any`

### [GRID_LEVEL_COL](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GRID_LEVEL_COL)
`"GRID_LEVEL_COL"`

### [GRID_PARENT](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GRID_PARENT)
`"grid-parent"`

### [GRID_ROOT_SUMMARY](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GRID_ROOT_SUMMARY)
`"igxGridRootSummary"`

### [GridSelectionMode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GridSelectionMode)
`any`

### [GridSummaryCalculationMode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GridSummaryCalculationMode)
`any`

### [GridSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/GridSummaryPosition)
`any`

### [HorizontalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/HorizontalAnimationType)
`any`

### [IGX_GRID_BASE](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_GRID_BASE)
`InjectionToken<GridType>`

### [IGX_INPUT_GROUP_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_INPUT_GROUP_TYPE)
`InjectionToken<IgxInputGroupType>`
Defines the InputGroupType DI token.

### [IGX_STEPPER_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_STEPPER_COMPONENT)
`InjectionToken<IgxStepperComponent>`

### [IGX_STEP_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_STEP_COMPONENT)
`InjectionToken<IgxStepComponent>`

### [IgxAvatarSize](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxAvatarSize)
`any`

### [IgxAvatarType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxAvatarType)
`any`

### [IgxBadgeType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxBadgeType)
`any`
Determines the igxBadge type

### [IgxCalendarView](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxCalendarView)
`any`

### [IgxCardActionsLayout](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxCardActionsLayout)
`any`

### [IgxCardType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxCardType)
`any`
Card provides a way to display organized content in appealing way.

### [IgxDividerType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxDividerType)
`any`

### [IgxHierarchicalTransactionServiceFactory](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxHierarchicalTransactionServiceFactory)
`any`

### [IgxProgressType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxProgressType)
`any`

### [IgxSliderType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxSliderType)
`any`

### [IgxStepType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxStepType)
`any`

### [IgxStepperOrientation](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxStepperOrientation)
`any`

### [IgxStepperTitlePosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxStepperTitlePosition)
`any`

### [IgxTabsAlignment](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxTabsAlignment)
`any`

### [IgxTextAlign](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxTextAlign)
`any`

### [IgxTreeSelectionType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IgxTreeSelectionType)
`any`

### [LabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/LabelPosition)
`any`

### [PickerInteractionMode](https://www.infragistics.com/api/angular/igniteui-angular/15.1.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.

### [RadioGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/RadioGroupAlignment)
`any`
Determines the Radio Group alignment

### [RadioLabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/RadioLabelPosition)
`any`

### [SPLITTER_INTERACTION_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/SPLITTER_INTERACTION_KEYS)
`Set<string>`

### [SliderHandle](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/SliderHandle)
`any`

### [SwitchLabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/SwitchLabelPosition)
`any`

### [TickLabelsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/TickLabelsOrientation)
`any`
Slider Tick labels Orientation

### [TicksOrientation](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/TicksOrientation)
`any`
Slider Ticks orientation

### [VerticalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/VerticalAnimationType)
`any`

### [blink](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/blink)
`AnimationReferenceMetadata`

### [fadeIn](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/fadeIn)
`AnimationReferenceMetadata`

### [fadeOut](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/fadeOut)
`AnimationReferenceMetadata`

### [flipBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipBottom)
`AnimationReferenceMetadata`

### [flipHorBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipHorBck)
`AnimationReferenceMetadata`

### [flipHorFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipHorFwd)
`AnimationReferenceMetadata`

### [flipLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipLeft)
`AnimationReferenceMetadata`

### [flipRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipRight)
`AnimationReferenceMetadata`

### [flipTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipTop)
`AnimationReferenceMetadata`

### [flipVerBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipVerBck)
`AnimationReferenceMetadata`

### [flipVerFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/flipVerFwd)
`AnimationReferenceMetadata`

### [growVerIn](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/growVerIn)
`AnimationReferenceMetadata`

### [growVerOut](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/growVerOut)
`AnimationReferenceMetadata`

### [heartbeat](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/heartbeat)
`AnimationReferenceMetadata`

### [pulsateBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/pulsateBck)
`AnimationReferenceMetadata`

### [pulsateFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/pulsateFwd)
`AnimationReferenceMetadata`

### [rotateInBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInBl)
`AnimationReferenceMetadata`

### [rotateInBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInBottom)
`AnimationReferenceMetadata`

### [rotateInBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInBr)
`AnimationReferenceMetadata`

### [rotateInCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInCenter)
`AnimationReferenceMetadata`

### [rotateInDiagonal1](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInDiagonal1)
`AnimationReferenceMetadata`

### [rotateInDiagonal2](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInDiagonal2)
`AnimationReferenceMetadata`

### [rotateInHor](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInHor)
`AnimationReferenceMetadata`

### [rotateInLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInLeft)
`AnimationReferenceMetadata`

### [rotateInRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInRight)
`AnimationReferenceMetadata`

### [rotateInTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInTl)
`AnimationReferenceMetadata`

### [rotateInTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInTop)
`AnimationReferenceMetadata`

### [rotateInTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInTr)
`AnimationReferenceMetadata`

### [rotateInVer](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateInVer)
`AnimationReferenceMetadata`

### [rotateOutBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutBl)
`AnimationReferenceMetadata`

### [rotateOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutBottom)
`AnimationReferenceMetadata`

### [rotateOutBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutBr)
`AnimationReferenceMetadata`

### [rotateOutCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutCenter)
`AnimationReferenceMetadata`

### [rotateOutDiagonal1](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutDiagonal1)
`AnimationReferenceMetadata`

### [rotateOutDiagonal2](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutDiagonal2)
`AnimationReferenceMetadata`

### [rotateOutHor](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutHor)
`AnimationReferenceMetadata`

### [rotateOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutLeft)
`AnimationReferenceMetadata`

### [rotateOutRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutRight)
`AnimationReferenceMetadata`

### [rotateOutTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutTl)
`AnimationReferenceMetadata`

### [rotateOutTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutTop)
`AnimationReferenceMetadata`

### [rotateOutTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutTr)
`AnimationReferenceMetadata`

### [rotateOutVer](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/rotateOutVer)
`AnimationReferenceMetadata`

### [scaleInBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInBl)
`AnimationReferenceMetadata`

### [scaleInBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInBottom)
`AnimationReferenceMetadata`

### [scaleInBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInBr)
`AnimationReferenceMetadata`

### [scaleInCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInCenter)
`AnimationReferenceMetadata`

### [scaleInHorCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInHorCenter)
`AnimationReferenceMetadata`

### [scaleInHorLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInHorLeft)
`AnimationReferenceMetadata`

### [scaleInHorRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInHorRight)
`AnimationReferenceMetadata`

### [scaleInLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInLeft)
`AnimationReferenceMetadata`

### [scaleInRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInRight)
`AnimationReferenceMetadata`

### [scaleInTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInTl)
`AnimationReferenceMetadata`

### [scaleInTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInTop)
`AnimationReferenceMetadata`

### [scaleInTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInTr)
`AnimationReferenceMetadata`

### [scaleInVerBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInVerBottom)
`AnimationReferenceMetadata`

### [scaleInVerCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInVerCenter)
`AnimationReferenceMetadata`

### [scaleInVerTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleInVerTop)
`AnimationReferenceMetadata`

### [scaleOutBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutBl)
`AnimationReferenceMetadata`

### [scaleOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutBottom)
`AnimationReferenceMetadata`

### [scaleOutBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutBr)
`AnimationReferenceMetadata`

### [scaleOutCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutCenter)
`AnimationReferenceMetadata`

### [scaleOutHorCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutHorCenter)
`AnimationReferenceMetadata`

### [scaleOutHorLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutHorLeft)
`AnimationReferenceMetadata`

### [scaleOutHorRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutHorRight)
`AnimationReferenceMetadata`

### [scaleOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutLeft)
`AnimationReferenceMetadata`

### [scaleOutRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutRight)
`AnimationReferenceMetadata`

### [scaleOutTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutTl)
`AnimationReferenceMetadata`

### [scaleOutTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutTop)
`AnimationReferenceMetadata`

### [scaleOutTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutTr)
`AnimationReferenceMetadata`

### [scaleOutVerBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutVerBottom)
`AnimationReferenceMetadata`

### [scaleOutVerCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutVerCenter)
`AnimationReferenceMetadata`

### [scaleOutVerTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/scaleOutVerTop)
`AnimationReferenceMetadata`

### [shakeBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeBl)
`AnimationReferenceMetadata`

### [shakeBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeBottom)
`AnimationReferenceMetadata`

### [shakeBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeBr)
`AnimationReferenceMetadata`

### [shakeCenter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeCenter)
`AnimationReferenceMetadata`

### [shakeHor](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeHor)
`AnimationReferenceMetadata`

### [shakeLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeLeft)
`AnimationReferenceMetadata`

### [shakeRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeRight)
`AnimationReferenceMetadata`

### [shakeTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeTl)
`AnimationReferenceMetadata`

### [shakeTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeTop)
`AnimationReferenceMetadata`

### [shakeTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeTr)
`AnimationReferenceMetadata`

### [shakeVer](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/shakeVer)
`AnimationReferenceMetadata`

### [slideInBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInBl)
`AnimationReferenceMetadata`

### [slideInBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInBottom)
`AnimationReferenceMetadata`

### [slideInBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInBr)
`AnimationReferenceMetadata`

### [slideInLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInLeft)
`AnimationReferenceMetadata`

### [slideInRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInRight)
`AnimationReferenceMetadata`

### [slideInTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInTl)
`AnimationReferenceMetadata`

### [slideInTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInTop)
`AnimationReferenceMetadata`

### [slideInTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideInTr)
`AnimationReferenceMetadata`

### [slideOutBl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutBl)
`AnimationReferenceMetadata`

### [slideOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutBottom)
`AnimationReferenceMetadata`

### [slideOutBr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutBr)
`AnimationReferenceMetadata`

### [slideOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutLeft)
`AnimationReferenceMetadata`

### [slideOutRight](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutRight)
`AnimationReferenceMetadata`

### [slideOutTl](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutTl)
`AnimationReferenceMetadata`

### [slideOutTop](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutTop)
`AnimationReferenceMetadata`

### [slideOutTr](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/slideOutTr)
`AnimationReferenceMetadata`

### [swingInBottomBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInBottomBck)
`AnimationReferenceMetadata`

### [swingInBottomFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInBottomFwd)
`AnimationReferenceMetadata`

### [swingInLeftBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInLeftBck)
`AnimationReferenceMetadata`

### [swingInLeftFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInLeftFwd)
`AnimationReferenceMetadata`

### [swingInRightBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInRightBck)
`AnimationReferenceMetadata`

### [swingInRightFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInRightFwd)
`AnimationReferenceMetadata`

### [swingInTopBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInTopBck)
`AnimationReferenceMetadata`

### [swingInTopFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingInTopFwd)
`AnimationReferenceMetadata`

### [swingOutBottomBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutBottomBck)
`AnimationReferenceMetadata`

### [swingOutBottomFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutBottomFwd)
`AnimationReferenceMetadata`

### [swingOutLeftBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutLeftBck)
`AnimationReferenceMetadata`

### [swingOutLefttFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutLefttFwd)
`AnimationReferenceMetadata`

### [swingOutRightBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutRightBck)
`AnimationReferenceMetadata`

### [swingOutRightFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutRightFwd)
`AnimationReferenceMetadata`

### [swingOutTopBck](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutTopBck)
`AnimationReferenceMetadata`

### [swingOutTopFwd](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/swingOutTopFwd)
`AnimationReferenceMetadata`
