diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index 81553cfa8..c921146c3 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular index 28ea802da..655ad2006 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular @@ -1 +1 @@ -Subproject commit 28ea802da6e8bd841b82e336a16781159d69e779 +Subproject commit 655ad2006a44d3fa0fb3a563a43dcf788ab2e481 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples index 76bad07ab..43e730b4c 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-examples @@ -1 +1 @@ -Subproject commit 76bad07ab3e31a884b974eec7011f4af959c4b05 +Subproject commit 43e730b4cd191f8cc66b06d5be958bb45717662e diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples index b964bb411..aa7991c90 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-angular-samples @@ -1 +1 @@ -Subproject commit b964bb411beb08ac2a9e1267fe6ed8daf13a515a +Subproject commit aa7991c9033d4f9167dce09027385b233418043c diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx index 70d396063..557f56e67 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx +++ b/packages/igniteui-mcp/igniteui-doc-mcp/angular/igniteui-docfx @@ -1 +1 @@ -Subproject commit 70d3960633dbedc233ffc1ee4b5543bca5b27bb7 +Subproject commit 557f56e6727eb5c04c0271d85b596d4eda0a62a4 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs index b9bfff038..2c65d6adb 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs +++ b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/api-docs @@ -1 +1 @@ -Subproject commit b9bfff038f1a20ebbf9f1d46ef61136db227d73f +Subproject commit 2c65d6adb8d22cac6c6b68dcf0c116e67e490bdd diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor index 2230443f0..9ea6951d5 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor +++ b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor @@ -1 +1 @@ -Subproject commit 2230443f010a959ba9fc365c400a177a73024abc +Subproject commit 9ea6951d54fb2cfa5e9ad0c7cedda9cfd297bcda diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples index d16e43a34..4b0549bd1 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples +++ b/packages/igniteui-mcp/igniteui-doc-mcp/blazor/igniteui-blazor-examples @@ -1 +1 @@ -Subproject commit d16e43a34b900b79e8aeda92ea20e7cc02c70899 +Subproject commit 4b0549bd11273f0dc8dd03531bcd9b46b7fa94ab diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs b/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs index 29664d3e0..3cf2afb01 160000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs +++ b/packages/igniteui-mcp/igniteui-doc-mcp/common/igniteui-xplat-docs @@ -1 +1 @@ -Subproject commit 29664d3e048fb8f5234587ac9da69d79558eb486 +Subproject commit 3cf2afb01bfa01ab99c336a32c91adcd9d3ac833 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index 3b822c05b..c921146c3 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-gauges/latest/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-gauges/latest/llms-full.txt index bdc9b7b90..116491269 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-gauges/latest/llms-full.txt +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-gauges/latest/llms-full.txt @@ -1,4 +1,4 @@ -# Ignite UI for Angular Gauges latest — Full API Reference +# Ignite UI for Angular Gauges vlatest — Full API Reference > Complete API reference for the Ignite UI for Angular Gauges package (latest). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-layouts/latest/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-layouts/latest/llms-full.txt index c35fe1c4f..50db4b5c4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-layouts/latest/llms-full.txt +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular-layouts/latest/llms-full.txt @@ -1,4 +1,4 @@ -# Ignite UI for Angular Layouts latest — Full API Reference +# Ignite UI for Angular Layouts vlatest — Full API Reference > Complete API reference for the Ignite UI for Angular Layouts package (latest). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/15.1.x/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/15.1.x/llms-full.txt new file mode 100644 index 000000000..219a063d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/15.1.x/llms-full.txt @@ -0,0 +1,9846 @@ +# 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 +- **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, elementRect: Partial, 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 + +### [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` +- **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, 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"; + + +const accordionId = this.accordion.id; +- **panelCollapsed**: `EventEmitter` — Emitted after a panel has been collapsed. + + + +- **panelCollapsing**: `EventEmitter` — Emitted before a panel is collapsed. +- **panelExpanded**: `EventEmitter` — Emitted after a panel has been expanded. + + + + + +public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) { + const expandedPanel: IgxExpansionPanelComponent = event.panel; + console.log("Panel is expanded: ", expandedPanel.id); +} +- **panelExpanding**: `EventEmitter` — Emitted before a panel is expanded. +- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that panels should use when expanding/collpasing. + + + + +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 + + +... + + + +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): IgxActionStripMenuItemDirective +- **templateRef**: `TemplateRef` + +### [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: + + + +- **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: + + + + {{town}} + + + +- **constructor**(ngModel: NgModel, formControl: FormControlName, group: IgxInputGroupComponent, elementRef: ElementRef, cdr: ChangeDetectorRef): IgxAutocompleteDirective +- **_composing**: `boolean` +- **autocompleteSettings**: `AutocompleteOverlaySettings` — Provide overlay settings for the autocomplete drop down + +// get +let settings = this.autocomplete.autocompleteSettings; + + + + +// 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 +public disabled = true; +- **elementRef**: `ElementRef` +- **formControl**: `FormControlName` +- **group**: `IgxInputGroupComponent` +- **id**: `string` +- **ngModel**: `NgModel` +- **selectionChanging**: `EventEmitter` — Emitted after item from the drop down is selected + + +- **model**: `FormControlName | NgModel` +- **target**: `IgxDropDownComponent` — Sets the target of the autocomplete directive + + + +... + +... + +- **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): 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` +- **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: + + + Our privacy settings have changed. + + + + + + +- **constructor**(elementRef: ElementRef): IgxBannerComponent +- **closed**: `EventEmitter` — Fires after the banner hides +public handleClosed(event) { + ... +} + + +- **closing**: `EventEmitter` — Fires before the banner hides +public handleClosing(event) { + ... +} + + +- **cssClass**: `string` +- **elementRef**: `ElementRef` +- **opened**: `EventEmitter` — Fires after the banner shows up +public handleOpened(event) { + ... +} + + +- **opening**: `EventEmitter` — Fires before the banner shows up +public handleOpening(event) { + ... +} + + +- **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(); + + + +... + + +- **open**(event?: Event): void — Opens the banner + + myBanner.open(); + + + +... + + +- **toggle**(event?: Event): void — Toggles the banner + + myBanner.toggle(); + + + +... + + + +### [IgxBaseExporter](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxBaseExporter) + +- **constructor**(): IgxBaseExporter +- **_ownersMap**: `Map` +- **_sort**: `any` +- **columnExporting**: `EventEmitter` — This event is emitted when a column is exported. +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +- **exportEnded**: `EventEmitter` +- **pivotGridFilterFieldsCount**: `number` +- **rowExporting**: `EventEmitter` — 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 +- **_isPending**: `boolean` +- **_pendingStates**: `Map` +- **_pendingTransactions**: `T[]` +- **onStateUpdate**: `EventEmitter` — 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): 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, 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, _renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxButtonDirective +- **_displayDensityOptions**: `IDisplayDensityOptions` +- **buttonClick**: `EventEmitter` — Called when the button is clicked. +- **buttonSelected**: `EventEmitter` — Called when the button is selected. +- **element**: `ElementRef` +- **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: + + + +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` +- **buttonSelectedNotifier$**: `Subject` +- **deselected**: `EventEmitter` — An +- **id**: `string` — An +- **multiSelection**: `boolean` — An +- **queryListNotifier$**: `Subject` +- **selected**: `EventEmitter` — 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. + + +//... +@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): IgxCalendarMonthDirective +- **date**: `Date` +- **elementRef**: `ElementRef` +- **index**: `any` +- **monthSelection**: `EventEmitter` +- **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: + + +

First Slide Header

+

First slide Content

+ + +

Second Slide Header

+

Second Slide Content

+ + +- **constructor**(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil): IgxCarouselComponent +- **animationType**: `HorizontalAnimationType` — Gets/sets the animation type of carousel. +Default value is slide. + + +- **carouselPaused**: `EventEmitter` — An event that is emitted after the carousel has been paused. +Provides a reference to the IgxCarouselComponent as an event argument. + +- **carouselPlaying**: `EventEmitter` — An event that is emitted after the carousel has resumed transitioning between slides. +Provides a reference to the IgxCarouselComponent as an event argument. + +- **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. + +- **id**: `string` — Sets the id of the carousel. +If not set, the id of the first carousel component will be "igx-carousel-0". + +- **indicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel indicators + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.indicatorTemplate = myCustomTemplate; + + + + ... + + brightness_7 + brightness_5 + + +- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Gets/sets the display mode of carousel indicators. It can be top or bottom. +Default value is bottom. + + +- **keyboardSupport**: `boolean` — Controls whether the carousel should support keyboard navigation. +Default value is true. + +- **loop**: `boolean` — Sets whether the carousel should loop back to the first slide after reaching the last slide. +Default value is true. + +- **maximumIndicatorsCount**: `number` — Controls the maximum indexes that can be shown. +Default value is 5. + +- **navigation**: `boolean` — Controls whether the carousel should render the left/right navigation buttons. +Default value is true. + +- **nextButtonTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel next button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.nextButtonTemplate = myCustomTemplate; + + + + ... + + + + +- **pause**: `boolean` — Sets whether the carousel will pause the slide transitions on user interactions. +Default value is true. + +- **prevButtonTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel previous button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.nextButtonTemplate = myCustomTemplate; + + + + ... + + + + +- **previousItem**: `IgxSlideComponent` +- **role**: `string` — Returns the role attribute of the carousel. +let carouselRole = this.carousel.role; +- **slideAdded**: `EventEmitter` — An event that is emitted after a slide has been added to the carousel. +Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments. + +- **slideChanged**: `EventEmitter` — An event that is emitted after a slide transition has happened. +Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments. + +- **slideRemoved**: `EventEmitter` — An event that is emitted after a slide has been removed from the carousel. +Provides references to the IgxCarouselComponent and IgxSlideComponent as event arguments. + +- **slides**: `QueryList` — The collection of slides currently in the carousel. +let slides: QueryList = 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): IgxCellEditorTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellEditorTemplateDirective, context: unknown): context + +### [IgxCellHeaderTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxCellHeaderTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCellHeaderTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellHeaderTemplateDirective, context: unknown): context + +### [IgxCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxCellTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCellTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellTemplateDirective, context: unknown): context + +### [IgxCellValidationErrorDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxCellValidationErrorDirective) + +- **constructor**(template: TemplateRef): IgxCellValidationErrorDirective +- **template**: `TemplateRef` +- 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` — 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` — Returns reference to the native checkbox element. +- **nativeLabel**: `ElementRef` — Returns reference to the native label element. + +@example +let labelElement = this.checkbox.nativeLabel; +- **ngControl**: `NgControl` +- **placeholderLabel**: `ElementRef` — 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, cdr: ChangeDetectorRef): IgxChildGridRowComponent +- **cdr**: `ChangeDetectorRef` +- **container**: `ViewContainerRef` +- **element**: `ElementRef` +- **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; +} + + + + + +### [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, renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxChipComponent +- **_displayDensityOptions**: `IDisplayDensityOptions` +- **_movedWhileRemoving**: `boolean` +- **_selected**: `boolean` +- **_selectedItemClass**: `string` +- **_tabIndex**: `any` +- **animateOnRelease**: `boolean` — An +- **cdr**: `ChangeDetectorRef` +- **chipClick**: `EventEmitter` — 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` — 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` — 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` — 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` — 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` — 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` — Emits an event when the IgxChipComponent moving ends. +Returns the moved IgxChipComponent. +- **moveStart**: `EventEmitter` — Emits an event when the IgxChipComponent moving starts. +Returns the moving IgxChipComponent. +- **removable**: `boolean` — An +- **remove**: `EventEmitter` — Emits an event when the IgxChipComponent is removed. +Returns the removed IgxChipComponent. +- **removeIcon**: `TemplateRef` — An +- **role**: `string` — Returns the role attribute of the chip. +- **selectIcon**: `TemplateRef` — An +- **selectable**: `boolean` — An +- **selectedChanged**: `EventEmitter` — Emits event when the IgxChipComponent is selected/deselected and any related animations and transitions also end. +- **selectedChanging**: `EventEmitter` — 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, _iterableDiffers: IterableDiffers): IgxChipsAreaComponent +- **ariaLabel**: `string` — Returns the aria-label attribute of the chips area. +- **cdr**: `ChangeDetectorRef` +- **chipsList**: `QueryList` — Holds the IgxChipComponent in the IgxChipsAreaComponent. +- **destroy$**: `Subject` +- **element**: `ElementRef` +- **height**: `number` — An +- **moveEnd**: `EventEmitter` — Emits an event after an IgxChipComponent in the IgxChipsAreaComponent is moved. +- **moveStart**: `EventEmitter` — Emits an event when an IgxChipComponent in the IgxChipsAreaComponent is moved. +- **reorder**: `EventEmitter` — 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` — 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. + + +let text = this.circularBar.text; +- **textTemplate**: `IgxProcessBarTextTemplateDirective` +- **textVisibility**: `boolean` — Sets the text visibility. By default it is set to true. + +- **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): IgxCollapsibleIndicatorTemplateDirective +- **template**: `TemplateRef` +- 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` +- **columnItems**: `QueryList` — Gets the checkbox components representing column items currently present in the dropdown +- **columnToggled**: `EventEmitter` — 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. + +- **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. + + + + {{ props }} + + +- **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; + + +- **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 }; + + + +- **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' +} + + +- **children**: `QueryList` — 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 + + + +- **colStart**: `number` — Column index from which the field is starting. + + + +- **dataType**: `GridColumnDataType` — Sets/gets the data type of the column values. +Default value is string. +let columnDataType = this.column.dataType; + + +- **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; + + +- **filteringIgnoreCase**: `boolean` — Sets/gets whether the column filtering should be case sensitive. +Default value is true. +let filteringIgnoreCase = this.column.filteringIgnoreCase; + + +- **formatter**: `any` +- **grid**: `GridType` +- **header**: `string` — Sets/gets the header value. +let columnHeader = this.column.header; + + +- **headerClasses**: `string` — Sets/gets the class selector of the column header. +let columnHeaderClass = this.column.headerClasses; + + +- **headerGroupClasses**: `string` — Sets/gets the class selector of the column group header. +let columnHeaderClass = this.column.headerGroupClasses; + + +- **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' +} + + +- **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' +} + + +- **maxWidth**: `string` — Sets/gets the maximum width of the column. +let columnMaxWidth = this.column.width; + + +- **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; + + +- **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 + + + +- **rowStart**: `number` — Row index from which the field is starting. + + + +- **searchable**: `boolean` — Sets/gets whether the column is searchable. +Default value is true. +let isSearchable = this.column.searchable'; + + +- **sortable**: `boolean` — Sets/gets whether the column is sortable. +Default value is false. +let isSortable = this.column.sortable; + + +- **sortingIgnoreCase**: `boolean` — Sets/gets whether the column sorting should be case sensitive. +Default value is true. +let sortingIgnoreCase = this.column.sortingIgnoreCase; + + +- **summaryFormatter**: `any` +- **title**: `string` — Sets/gets the title value. +let title = this.column.title; + + +- **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` — 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` — 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` — 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; + + +- **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` — 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` — 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` — 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): string +- **getFilledChildColumnSizes**(children: QueryList): string[] +- **getInitialChildColumnSizes**(children: QueryList): 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` — Sets/gets the children columns. +let columnChildren = this.column.children; + +this.column.children = childrenColumns; +- **collapsibleIndicatorTemplate**: `TemplateRef` — 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; + + +- **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, renderer: Renderer2, _: NgZone, cms: IgxColumnMovingService): IgxColumnMovingDropDirective +- **column**: `ColumnType` +- **data**: `ColumnType | IgxForOfDirective` +- **horizontalScroll**: `IgxGridForOfDirective` +- **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, 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; + + + + +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **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, 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` — 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): IgxDataLoadingTemplateDirective +- **template**: `TemplateRef` + +### [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, _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 | 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` — 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` — Emitted when the user types/spins invalid date in the date-picker editor. +- **valueChange**: `EventEmitter` — 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, _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, _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 | 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` — 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, _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, 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` — Emitted when the editor is not within a specified range or when the editor's value is in an invalid state. +- **valueChange**: `EventEmitter` — 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". + + +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: + + +
+ + + + +
+
+ + + + +
+ + +- **constructor**(elementRef: ElementRef, navService: IgxNavigationService): IgxDialogComponent +- **closed**: `EventEmitter` — An event that is emitted after the dialog is closed. + + +- **closing**: `EventEmitter` — An event that is emitted before the dialog is closed. + + +- **destroy$**: `Subject` +- **focusTrap**: `boolean` — An +- **id**: `string` — An +- **leftButtonBackgroundColor**: `string` — An +- **leftButtonColor**: `string` — An +- **leftButtonLabel**: `string` — An +- **leftButtonRipple**: `string` — An +- **leftButtonSelect**: `EventEmitter` — An event that is emitted when the left button is clicked. + + +- **leftButtonType**: `IgxButtonType` — An +- **message**: `string` — An +- **opened**: `EventEmitter` — An event that is emitted after the dialog is opened. + + +- **opening**: `EventEmitter` — An event that is emitted before the dialog is opened. + + +- **rightButtonBackgroundColor**: `string` — An +- **rightButtonColor**: `string` — An +- **rightButtonLabel**: `string` — An +- **rightButtonRipple**: `string` — An +- **rightButtonSelect**: `EventEmitter` — An event that is emitted when the right button is clicked. + + +- **rightButtonType**: `IgxButtonType` — An +- **title**: `string` — An +- **toggleRef**: `IgxToggleDirective` +- **closeOnEscape**: `boolean` — Controls whether the dialog should close when Esc key is pressed. Defaults to true + +- **closeOnOutsideSelect**: `boolean` — An +- **isCollapsed**: `boolean` +- **isModal**: `boolean` — Controls whether the dialog should be shown as modal. Defaults to true + +- **isOpen**: `boolean` — State of the dialog. + +// get +let dialogIsOpen = this.dialog.isOpen; + + + + + + +Two-way data binding. + + +- **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"; + + +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; + +- **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, 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` +- **_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` — Event triggered when the draggable element is clicked. +
+ Drag Me! +
+ +public onDragClick(){ + alert("The element has been clicked!"); +} +- **dragDirection**: `DragDirection` — An +- **dragEnd**: `EventEmitter` — Event triggered when the draggable element is released. +
+ Drag Me! +
+ +public onDragEnd(){ + alert("The drag has ended!"); +} +- **dragMove**: `EventEmitter` — Event triggered when the draggable element has been moved. +
+ Drag Me! +
+ +public onDragMove(){ + alert("The element has moved!"); +} +- **dragStart**: `EventEmitter` — Event triggered when the draggable element drag starts. +
+ Drag Me! +
+ +public onDragStart(){ + alert("The drag has stared!"); +} +- **dragTolerance**: `number` — An +- **element**: `ElementRef` +- **ghost**: `boolean` — An +- **ghostClass**: `string` — Sets a custom class that will be added to the ghostElement element. +
+ Drag Me! +
+- **ghostContext**: `any` +- **ghostCreate**: `EventEmitter` — Event triggered when the drag ghost element is created. +
+ Drag Me! +
+ +public ghostCreated(){ + alert("The ghost has been created!"); +} +- **ghostDestroy**: `EventEmitter` — Event triggered when the drag ghost element is created. +
+ Drag Me! +
+ +public ghostDestroyed(){ + alert("The ghost has been destroyed!"); +} +- **ghostHost**: `any` — An +- **ghostTemplate**: `TemplateRef` — An +- **platformUtil**: `PlatformUtil` +- **renderer**: `Renderer2` +- **scrollContainer**: `HTMLElement` — An +- **transitioned**: `EventEmitter` — Event triggered after the draggable element is released and after its animation has finished. +
+ Drag Me! +
+ +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 | 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): IgxDragHandleDirective +- **baseClass**: `boolean` +- **element**: `ElementRef` + +### [IgxDragIgnoreDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxDragIgnoreDirective) + +- **constructor**(element: ElementRef): IgxDragIgnoreDirective +- **baseClass**: `boolean` +- **element**: `ElementRef` + +### [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, _renderer: Renderer2, _zone: NgZone): IgxDropDirective +- **_dropStrategy**: `IDropStrategy` +- **dropChannel**: `string | number | string[] | number[]` — An +- **dropped**: `EventEmitter` — 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. +
+
+ +public dragDrop(){ + alert("A draggable element has been dropped in the chip area!"); +} +- **element**: `ElementRef` +- **enter**: `EventEmitter` — Event triggered when dragged element enters the area of the element. +
+
+ +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +- **leave**: `EventEmitter` — Event triggered when dragged element leaves the area of the element. +
+
+ +public dragLeave(){ + alert("A draggable element has left the chip area!"); +} +- **over**: `EventEmitter` — Event triggered when dragged element enters the area of the element. +
+
+ +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, 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` +- **height**: `string` — Gets/Sets the height of the drop down + +// get +let myDropDownCurrentHeight = this.dropdown.height; + + + +- **maxHeight**: `any` — Gets/Sets the drop down's container max height. + +// get +let maxHeight = this.dropdown.maxHeight; + + + +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **width**: `string` — Gets/Sets the width of the drop down + +// get +let myDropDownCurrentWidth = this.dropdown.width; + + + +- **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; + + + +- **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: + + + {{ item.value }} + + + +- **constructor**(elementRef: ElementRef, 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; + + + + +- **closed**: `EventEmitter` — Emitted after the dropdown is closed + + +- **closing**: `EventEmitter` — Emitted before the dropdown is closed + + +- **destroy$**: `Subject` +- **labelledBy**: `string` — An +- **opened**: `EventEmitter` — Emitted after the dropdown is opened + + +- **opening**: `EventEmitter` — Emitted before the dropdown is opened + + +- **scrollContainerRef**: `ElementRef` +- **selection**: `IgxSelectionAPIService` +- **toggleDirective**: `IgxToggleDirective` +- **virtDir**: `IgxForOfDirective` +- **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; + + + +- **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 is a container intended for row items in +a 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; +... + + + + + {{ item.text }} + + + + +**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'; +... + + + + ... + +- **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, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxDropDownItemBaseDirective +- **_disabled**: `boolean` +- **_index**: `any` +- **_label**: `any` +- **_selected**: `boolean` +- **dropDown**: `IDropDownBase` +- **elementRef**: `ElementRef` +- **group**: `IgxDropDownGroupComponent` +- **id**: `string` — Sets/gets the id of the 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; + + + + +
+ {{item.field}} +
+ +- **role**: `string` — Gets/sets the role attribute of the item. Default is 'option'. + + +- **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; + + + +
+ {{item.field}} +
+ + +**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 + +- **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 is a container intended for row items in +a container. + +- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef, 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 + +- **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): IgxEmptyListTemplateDirective +- **template**: `TemplateRef` + +### [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` — 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): IgxExcelStyleLoadingValuesTemplateDirective +- **template**: `TemplateRef` +- 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, cdr: ChangeDetectorRef): IgxExpansionPanelBodyComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **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'; + + +- **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): 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: + +- **contentCollapsed**: `EventEmitter` — Emitted when the expansion panel finishes collapsing + handleCollapsed(event: IExpansionPanelEventArgs) + + + ... + +- **contentCollapsing**: `EventEmitter` — Emitted when the expansion panel starts collapsing + handleCollapsing(event: IExpansionPanelCancelableEventArgs) + + + ... + +- **contentExpanded**: `EventEmitter` — Emitted when the expansion panel finishes expanding + handleExpanded(event: IExpansionPanelEventArgs) + + + ... + +- **contentExpanding**: `EventEmitter` — Emitted when the expansion panel starts expanding + handleExpanding(event: IExpansionPanelCancelableEventArgs) + + + ... + +- **id**: `string` — Sets/gets the id of the expansion panel component. +If not set, id will have value "igx-expansion-panel-0"; + + +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 + + ... + +``` +- **close**(evt?: Event): void +- **collapse**(evt?: Event): void — Collapses the panel + + + ... + + +- **expand**(evt?: Event): void — Expands the panel + + + ... + + +- **open**(evt?: Event): void +- **toggle**(evt?: Event): void — Toggles the panel + + + ... + + + +### [IgxExpansionPanelHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxExpansionPanelHeaderComponent) + +- **constructor**(panel: IgxExpansionPanelBase, cdr: ChangeDetectorRef, elementRef: ElementRef): IgxExpansionPanelHeaderComponent +- **cdr**: `ChangeDetectorRef` +- **elementRef**: `ElementRef` +- **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'; + + +- **id**: `string` — Sets/gets the id of the expansion panel header. +let panelHeaderId = this.panel.header.id; +- **interaction**: `EventEmitter` — Emitted whenever a user interacts with the header host + handleInteraction(event: IExpansionPanelCancelableEventArgs) { + ... +} + + + ... + +- **lv**: `string` — Gets/sets the aria-level attribute of the header +Get + const currentAriaLevel = this.panel.header.lv; + +Set + this.panel.header.lv = '5'; + + +- **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'; + + +- **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; + + + ... + +- **iconRef**: `ElementRef` — 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): IgxFilterCellTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxFilterCellTemplateDirective, context: unknown): context + +### [IgxFilterDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxFilterDirective) + +- **constructor**(element: ElementRef): IgxFilterDirective +- **filterOptions**: `IgxFilterOptions` +- **filtered**: `EventEmitter` +- **filtering**: `EventEmitter` +- **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 — 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. + +
Content
+- **flex**: `string` — Applies the directive to an element. + +Possible values include igxFlexGrow, igxFlexShrink, igxFlexOrder, igxFlexBasis. + +
Content
+- **grow**: `number` — Applies the grow attribute to an element that uses the directive. + +Default value is 1. + +
+
Content1
+
Content2
+
Content3
+
+- **order**: `number` — Applies the order attribute to an element that uses the directive. + +Default value is 0. + +
+
Content1
+
Content2
+
Content3
+
+- **shrink**: `number` — Applies the shrink attribute to an element that uses the directive. + +Default value is 1. + +
+
Content1
+
Content2
+
Content3
+
+ +### [IgxFocusDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxFocusDirective) + +- **constructor**(element: ElementRef, 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 +- **$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>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService, platformUtil: PlatformUtil, document: any): IgxForOfDirective +- **_bScrollInternal**: `boolean` — If the next onScroll event is triggered due to internal setting of scrollTop +- **_differ**: `IterableDiffer` +- **_differs**: `IterableDiffers` +- **_embeddedViews**: `EmbeddedViewRef[]` +- **_sizesCache**: `number[]` +- **_template**: `TemplateRef>>` +- **_trackByFn**: `TrackByFunction` +- **_virtHeight**: `number` — Height that is being virtualized. +- **_virtScrollTop**: `number` — Internal track for scroll top that is being virtualized +- **_zone**: `NgZone` +- **beforeViewDestroyed**: `EventEmitter>` +- **cdr**: `ChangeDetectorRef` +- **chunkLoad**: `EventEmitter` — An event that is emitted after a new chunk has been loaded. + + +loadChunk(e){ +alert("chunk loaded!"); +} +- **chunkPreload**: `EventEmitter` — 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. + + +chunkPreload(e){ +alert("chunk is loading!"); +} +- **contentObserver**: `ResizeObserver` +- **contentResizeNotify**: `Subject` +- **contentSizeChange**: `EventEmitter` — An event that is emitted after the rendered content size of the igxForOf has been changed. +- **dataChanged**: `EventEmitter` — An event that is emitted after data has been changed. + + +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. + +
+ +
{{rowIndex}} : {{item.text}}
+ +
+ +- **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. + +- **igxForTrackBy**: `TrackByFunction` — 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 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` +- **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` +- **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, 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): IgxGridBaseDirective +- **_allowAdvancedFiltering**: `boolean` +- **_allowFiltering**: `boolean` +- **_autoGeneratedCols**: `any[]` +- **_batchEditing**: `boolean` +- **_cdrRequestRepaint**: `boolean` +- **_dataView**: `any[]` +- **_defaultExpandState**: `boolean` +- **_defaultTargetRecordNumber**: `number` +- **_diTransactions**: `TransactionService` +- **_displayDensityOptions**: `IDisplayDensityOptions` +- **_expansionStates**: `Map` +- **_filterMode**: `FilterMode` +- **_filterStrategy**: `IFilteringStrategy` +- **_headerFeaturesWidth**: `number` +- **_init**: `boolean` +- **_pinnedRecordIDs**: `any[]` +- **_sortingOptions**: `ISortingOptions` +- **_summaryRowList**: `QueryList` +- **_transactions**: `TransactionService` +- **_userOutletDirective**: `IgxOverlayOutletDirective` +- **actionStrip**: `IgxActionStripComponent` +- **activeNodeChange**: `EventEmitter` — Emmited when the active node is changed. +- **addRowEmptyTemplate**: `TemplateRef` — Gets/Sets a custom template for adding row UI when grid is empty. +- **advancedFilteringExpressionsTreeChange**: `EventEmitter` — 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` — Emitted when a cell is clicked. +- **cellEdit**: `EventEmitter` — Emitted when cell has been edited. +- **cellEditDone**: `EventEmitter` — Emitted after cell has been edited and editing has been committed. +- **cellEditEnter**: `EventEmitter` — Emitted when cell enters edit mode. +- **cellEditExit**: `EventEmitter` — Emitted when cell exits edit mode. +- **clipboardOptions**: `any` — Controls the copy behavior of the grid. +- **colResizingService**: `IgxColumnResizingService` +- **columnInit**: `EventEmitter` — Emitted when a column is initialized. +- **columnMoving**: `EventEmitter` — Emitted during the column moving operation. +- **columnMovingEnd**: `EventEmitter` — Emitted when column moving ends. +- **columnMovingStart**: `EventEmitter` — Emitted when column moving starts. +- **columnPin**: `EventEmitter` — Emitted before IgxColumnComponent is pinned. +- **columnPinned**: `EventEmitter` — Emitted after IgxColumnComponent is pinned. +- **columnResized**: `EventEmitter` — Emitted after column is resized. +- **columnSelectionChanging**: `EventEmitter` — Emitted when IgxColumnComponent is selected. +- **columnVisibilityChanged**: `EventEmitter` — Emitted after column visibility is changed. +- **columnVisibilityChanging**: `EventEmitter` — Emitted before column visibility is changed. +- **contextMenu**: `EventEmitter` — Emitted when a cell is right clicked. +- **data**: `any[]` +- **dataChanged**: `EventEmitter` — Emitted after the grid's data view is changed because of a data operation, rebinding, etc. +- **dataChanging**: `EventEmitter` — Emitted before the grid's data view is changed because of a data operation, rebinding, etc. +- **differs**: `IterableDiffers` +- **document**: `any` +- **doubleClick**: `EventEmitter` — Emitted when a cell is double clicked. +- **dragRowID**: `any` — Gets the row ID that is being dragged. +- **emptyFilteredGridTemplate**: `TemplateRef` — A template reference for the template when the filtered grid is empty. +- **emptyGridDefaultTemplate**: `TemplateRef` — A template reference for the template when the grid is empty. +- **emptyGridTemplate**: `TemplateRef` — Gets/Sets a custom template when empty. +- **envInjector**: `EnvironmentInjector` +- **evenRowCSS**: `string` +- **excelStyleHeaderIconDirectiveTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a row expand indicator. +- **filtering**: `EventEmitter` — Emitted before filtering expressions are applied. +- **filteringDone**: `EventEmitter` — Emitted after filtering is performed through the UI. +- **filteringExpressionsTreeChange**: `EventEmitter` — Emitted after filtering is performed. +- **filteringService**: `IgxFilteringService` +- **formGroupCreated**: `EventEmitter` — Emitted when formGroup is created on edit of row/cell. +- **gridAPI**: `GridServiceType` +- **gridCopy**: `EventEmitter` — Emitted when a copy operation is executed. +- **gridKeydown**: `EventEmitter` — Emitted when keydown is triggered over element inside grid's body. +- **gridScroll**: `EventEmitter` — Emitted when grid is scrolled horizontally/vertically. +- **headerCollapseIndicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a header collapse indicator. +- **headerExpandIndicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a header expand indicator. +- **injector**: `Injector` +- **isPivot**: `boolean` +- **loadingGridTemplate**: `TemplateRef` — 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` +- **pagingDone**: `EventEmitter` +- **perPageChange**: `EventEmitter` +- **platform**: `PlatformUtil` +- **primaryKey**: `any` — Gets/Sets the primary key. +- **rangeSelected**: `EventEmitter` — Emitted when making a range selection. +- **rendered**: `EventEmitter` — Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM +- **rowAdd**: `EventEmitter` — Emmited just before the newly added row is commited. +- **rowAdded**: `EventEmitter` — 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 }; + + +- **rowCollapsedIndicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a row collapse indicator. +- **rowDelete**: `EventEmitter` — Emmited when deleting a row. +- **rowDeleted**: `EventEmitter` — Emitted when a row is deleted. +- **rowDragEnd**: `EventEmitter` — Emitted when dropping a row. +- **rowDragStart**: `EventEmitter` — Emitted when start dragging a row. +- **rowEdit**: `EventEmitter` — Emitted when exiting edit mode for a row. +- **rowEditDone**: `EventEmitter` — Emitted after exiting edit mode for a row and editing has been committed. +- **rowEditEnter**: `EventEmitter` — Emitted when a row enters edit mode. +- **rowEditExit**: `EventEmitter` — Emitted when row editing is canceled. +- **rowExpandedIndicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a row expand indicator. +- **rowPinned**: `EventEmitter` — Emitted when the pinned state of a row is changed. +- **rowPinning**: `EventEmitter` — Emitted when the pinned state of a row is changed. +- **rowSelectionChanging**: `EventEmitter` — 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' +} + + +- **rowToggle**: `EventEmitter` — Emitted when the expanded state of a row gets changed. +- **selected**: `EventEmitter` — 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` +- **sorting**: `EventEmitter` — Emitted before sorting expressions are applied. +- **sortingDone**: `EventEmitter` — Emitted after sorting is completed. +- **sortingExpressionsChange**: `EventEmitter` — Emitted before sorting is performed. +- **summaryService**: `IgxGridSummaryService` +- **toolbarExporting**: `EventEmitter` — Emitted when an export process is initiated by the user. +- **transactionFactory**: `IgxFlatTransactionFactory` +- **uniqueColumnValuesStrategy**: `any` +- **validation**: `IgxGridValidationService` +- **validationStatusChange**: `EventEmitter` — 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` — 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` — Gets the custom template, if any, used for row drag ghost. +- **dragIndicatorIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the row drag indicator icon +- **emptyFilteredGridMessage**: `string` +- **emptyGridMessage**: `string` +- **excelStyleHeaderIconTemplate**: `TemplateRef` — Gets the excel style header icon. +- **expansionStates**: `Map` — 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` — Gets the header row selector template. +- **headerCellList**: `IgxGridHeaderComponent[]` — A list of all IgxGridHeaderComponent. +- **headerContainer**: `IgxGridForOfDirective` +- **headerDragContainer**: `ElementRef` +- **headerGroupContainer**: `ElementRef` +- **headerGroups**: `IgxGridHeaderGroupComponent[]` +- **headerGroupsList**: `IgxGridHeaderGroupComponent[]` — A list of all IgxGridHeaderGroupComponent. +- **headerSelectorContainer**: `ElementRef` +- **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` — Gets the row add text template. +- **rowDraggable**: `boolean` — Gets/Sets whether rows can be moved. +- **rowEditActionsTemplate**: `TemplateRef` — Gets the row edit actions template. +- **rowEditTextTemplate**: `TemplateRef` — Gets the row edit text template. +- **rowEditable**: `boolean` — Gets/Sets whether the rows are editable. +- **rowHeight**: `number` — Gets/Sets the row height. +- **rowList**: `QueryList` — A list of IgxGridRowComponent. +- **rowSelection**: `GridSelectionMode` — Gets/Sets row selection mode +- **rowSelectorTemplate**: `TemplateRef` — 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` — The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. +- **sortDescendingHeaderIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. +- **sortHeaderIconTemplate**: `TemplateRef` — 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` — 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, 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): IgxGridComponent +- **dataPreLoad**: `EventEmitter` — Emitted when a new chunk of data is loaded from virtualization. +- **defaultGroupTemplate**: `TemplateRef` +- **detailTemplateContainer**: `TemplateRef` +- **dropAreaTemplate**: `TemplateRef` — Gets/Sets the template that will be rendered as a GroupBy drop area. +- **groupingDone**: `EventEmitter` — 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` +- **data**: `any[]` — Gets/Sets the array of data that populates the IgxGridComponent. +- **detailTemplate**: `TemplateRef` — 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` — Gets/Sets the template reference of the IgxGridComponent's group area. +- **groupByRowSelectorTemplate**: `TemplateRef` — Gets the group by row selector template. +- **groupRowTemplate**: `TemplateRef` — 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` — 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: + + + +- **constructor**(cdr: ChangeDetectorRef, element: ElementRef, platform: PlatformUtil, gridAPI?: GridType): IgxGridExcelStyleFilteringComponent +- **gridAPI**: `GridType` +- **mainDropdown**: `ElementRef` +- **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, zone: NgZone, touchManager: HammerGesturesManager, document: any, platformUtil: PlatformUtil): IgxGridExpandableCellComponent +- **document**: `any` +- **indentationDiv**: `ElementRef` +- **indicator**: `ElementRef` + +### [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>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, _platformUtil: PlatformUtil, _document: any, syncScrollService: IgxForOfScrollSyncService, syncService: IgxForOfSyncService): IgxGridForOfDirective +- **igxGridForOfUniqueSizeCache**: `boolean` +- **igxGridForOfVariableSizes**: `boolean` +- **syncService**: `IgxForOfSyncService` +- **igxGridForOf**: `any[]` +- **itemsDimension**: `any` +- **_applyChanges**(): void +- **_updateSizeCache**(changes: IterableChanges): number +- **_updateViews**(prevChunkSize: any): void +- **addLastElem**(): void +- **getItemSize**(item: any): number +- **handleCacheChanges**(changes: IterableChanges): 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, cdr: ChangeDetectorRef, filteringService: IgxFilteringService): IgxGridGroupByRowComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **filteringService**: `IgxFilteringService` +- **grid**: `GridType` +- **gridID**: `string` — An +- **gridSelection**: `IgxGridSelectionService` +- **groupContent**: `ElementRef` — 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` +- **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` — 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. + + +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): 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): IgxGridToolbarDirective +- **template**: `TemplateRef` +- 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` — Emitted on successful ending of an export operation. +- **exportExcel**: `boolean` — Show entry for Excel export. +- **exportStarted**: `EventEmitter` — 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>` +- **childRowIslands**: `Map` +- **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, 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): IgxHierarchicalGridBaseDirective +- **dataPreLoad**: `EventEmitter` — 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 +- **_createColGroupComponent**(col: IgxColumnGroupComponent): ComponentRef +- **_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, 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): IgxHierarchicalGridComponent +- **childTemplate**: `TemplateRef` +- **hierarchicalRecordTemplate**: `TemplateRef` +- **paginatorOutlet**: `ViewContainerRef` +- **toolbarOutlet**: `ViewContainerRef` +- **toolbarTemplate**: `TemplateRef` +- **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` +- **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, cdr: ChangeDetectorRef): IgxHierarchicalRowComponent +- **_cells**: `QueryList` +- **expander**: `ElementRef` +- **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 — 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, 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` +- **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` — 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` — 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-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, cdr: ChangeDetectorRef, renderer: Renderer2): IgxInputDirective +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **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, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, document: any, platform: PlatformUtil, cdr: ChangeDetectorRef): IgxInputGroupComponent +- **_prefixes**: `QueryList` +- **_suffixes**: `QueryList` +- **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` +- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+ +### [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. + +- **text**: `string` — Set a custom text that is displayed according to the defined position. + +- **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; +} + //... + + +- **textTop**: `boolean` — Set the position that defines if the text should be aligned above the progress line. By default is set to false. + +- **textVisibility**: `boolean` — Set the text to be visible. By default it is set to true. + +- **type**: `string` — Set type of the IgxLinearProgressBarComponent. Possible options - default, success, info, warning, and error. + +- **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, _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` — Returns a collection of all items and headers in the list. +- **dataLoadingTemplate**: `IgxDataLoadingTemplateDirective` — Sets/gets the list loading template. +- **element**: `ElementRef` +- **emptyListTemplate**: `IgxEmptyListTemplateDirective` — Sets/gets the empty list template. +- **endPan**: `EventEmitter` — 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` — Event emitted when a list item is clicked. +- **leftPan**: `EventEmitter` — 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` — Event emitted when a pan gesture is executed on a list item. +- **resetPan**: `EventEmitter` — Event emitted when a pan item is returned to its original position. +- **rightPan**: `EventEmitter` — Event emitted when a right pan gesture is executed on a list item. +- **startPan**: `EventEmitter` — 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` — 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: + + Contacts + + {{ contact.name }} + {{ contact.phone }} + + + +- **constructor**(list: IgxListBaseDirective, elementRef: ElementRef, _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. +Hidden Item + +let isHidden = this.listItem.hidden; +- **isHeader**: `boolean` — Sets/gets whether the list item is a header. +Header + +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): IgxListItemLeftPanningTemplateDirective +- **template**: `TemplateRef` + +### [IgxListItemRightPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxListItemRightPanningTemplateDirective) + +- **constructor**(template: TemplateRef): IgxListItemRightPanningTemplateDirective +- **template**: `TemplateRef` + +### [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, maskParser: MaskParsingService, renderer: Renderer2, platform: PlatformUtil): IgxMaskDirective +- **_composing**: `boolean` +- **_compositionStartIndex**: `number` +- **displayValuePipe**: `PipeTransform` — Specifies a pipe to be used on blur. + +- **elementRef**: `ElementRef` +- **focusedValuePipe**: `PipeTransform` — Specifies a pipe to be used on focus. + +- **includeLiterals**: `boolean` — Specifies if the bound value includes the formatting symbols. + +- **maskParser**: `MaskParsingService` +- **platform**: `PlatformUtil` +- **promptChar**: `string` — Sets the character representing a fillable spot in the input mask. +Default value is "'_'". + +- **renderer**: `Renderer2` +- **valueChanged**: `EventEmitter` — Emits an event each time the value changes. +Provides rawValue: string and formattedValue: string as event arguments. + +- **mask**: `string` — Sets the input mask. + + +### [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): IgxMonthsViewComponent +- **el**: `ElementRef` +- **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". + + +let monthsViewId = this.monthsView.id; +- **selected**: `EventEmitter` — Emits an event when a selection is made in the months view. +Provides reference the date property in the IgxMonthsViewComponent. + +- **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): IgxNavDrawerMiniTemplateDirective +- **template**: `TemplateRef` + +### [IgxNavDrawerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxNavDrawerTemplateDirective) + +- **constructor**(template: TemplateRef): IgxNavDrawerTemplateDirective +- **template**: `TemplateRef` + +### [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: + + search + favorite + more_vert + + +- **constructor**(): IgxNavbarComponent +- **action**: `EventEmitter` — 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!"); +} + //.. + + +- **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: + + +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: + + + + + + +- **constructor**(elementRef: ElementRef, _state: IgxNavigationService, renderer: Renderer2, _touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxNavigationDrawerComponent +- **closed**: `EventEmitter` — Event fired when the Navigation Drawer has closed. + + +- **closing**: `EventEmitter` — Event fired as the Navigation Drawer is about to close. + + +- **disableAnimation**: `boolean` — Enables/disables the animation, when toggling the drawer. Set to false by default. +html + +- **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; + + + + +- **id**: `string` — ID of the component + +// get +let myNavDrawerId = this.navdrawer.id; + + + + +- **miniWidth**: `string` — Width of the drawer in its mini state. Defaults to 68px. + +// get +let navDrawerMiniWidth = this.navdrawer.miniWidth; + + + + +- **opened**: `EventEmitter` — Event fired when the Navigation Drawer has opened. + + +- **opening**: `EventEmitter` — Event fired as the Navigation Drawer is about to open. + + +- **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; + + + + +- **pinChange**: `EventEmitter` — Pinned state change output for two-way binding. + + +- **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; + + + + +- **position**: `string` — Position of the Navigation Drawer. Can be "left"(default) or "right". + +// get +let myNavDrawerPosition = this.navdrawer.position; + + + + +- **renderer**: `Renderer2` +- **width**: `string` — Width of the drawer in its open state. Defaults to "280px". + +// get +let navDrawerWidth = this.navdrawer.width; + + + + +- **isOpen**: `boolean` — State of the drawer. + +// get +let navDrawerIsOpen = this.navdrawer.isOpen; + + + + + + +Two-way data binding. + + +- **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: + + +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: +
+ +- **constructor**(element: ElementRef): IgxOverlayOutletDirective +- **element**: `ElementRef` + +### [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` — Emitted just before the overlay animation start. +animationStarting(event: OverlayAnimationEventArgs){ + const animationStarting = event; +} +- **closed**: `EventEmitter` — Emitted after the overlay content is closed and all animations are finished. +closed(event: OverlayEventArgs){ + const closed = event; +} +- **closing**: `EventEmitter` — Emitted just before the overlay content starts to close. +closing(event: OverlayCancelableEventArgs){ + const closing = event; +} +- **contentAppended**: `EventEmitter` — Emitted after the content is appended to the overlay, and before animations are started. +contentAppended(event: OverlayEventArgs){ + const contentAppended = event; +} +- **contentAppending**: `EventEmitter` — Emitted before the content is appended to the overlay. +contentAppending(event: OverlayEventArgs){ + const contentAppending = event; +} +- **opened**: `EventEmitter` — Emitted after the overlay content is opened and all animations are finished. +opened(event: OverlayEventArgs){ + const opened = event; +} +- **opening**: `EventEmitter` — Emitted just before the overlay content starts to open. +opening(event: OverlayCancelableEventArgs){ + const opening = event; +} +- **platformUtil**: `PlatformUtil` +- **attach**(element: ElementRef, settings?: OverlaySettings): string — Generates Id. Provide this Id when call show(id) method +- **attach**(component: Type, settings?: OverlaySettings, moduleRef?: any): string — Generates Id. Provide this Id when call show(id) method +- **attach**(component: Type, 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 | 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, cdr: ChangeDetectorRef): IgxPaginatorComponent +- **_displayDensityOptions**: `IDisplayDensityOptions` +- **_page**: `number` +- **_perPage**: `number` +- **_selectOptions**: `number[]` +- **_totalRecords**: `number` +- **pageChange**: `EventEmitter` — Emitted after the current page is changed. +- **paging**: `EventEmitter` — Emitted before paging is performed. +- **pagingDone**: `EventEmitter` — Emitted after paging is performed. +- **perPageChange**: `EventEmitter` — 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): IgxPaginatorDirective +- **template**: `TemplateRef` + +### [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): IgxPickerActionsDirective +- **template**: `TemplateRef` + +### [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` +- **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 + + + +Two-way data binding: + +- **filtersExpanded**: `boolean` — Gets/sets whether the filters panel is expanded +Get + const filtersPanelState: boolean = this.dataSelector.filtersExpanded; + +Set + + + +Two-way data binding: + +- **rowsExpanded**: `boolean` — Gets/sets whether the rows panel is expanded +Get + const rowsPanelState: boolean = this.dataSelector.rowsExpanded; + +Set + + + +Two-way data binding: + +- **valuesExpanded**: `boolean` — Gets/sets whether the values panel is expanded +Get + const valuesPanelState: boolean = this.dataSelector.valuesExpanded; + +Set + + + +Two-way data binding: + +- **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, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef, 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): IgxPivotGridComponent +- **_defaultExpandState**: `boolean` +- **_filterStrategy**: `IFilteringStrategy` +- **columnGroupStates**: `Map` +- **dimensionDataColumns**: `any` +- **dimensionInit**: `EventEmitter` — Emitted when the dimension is initialized. +- **dimensionsChange**: `EventEmitter` — Emitted when the dimension collection is changed via the grid chip area. +- **dimensionsSortingExpressionsChange**: `EventEmitter` — Emitted when a dimension is sorted. +- **emptyPivotGridTemplate**: `TemplateRef` — Gets/Sets a custom template when pivot grid is empty. +- **isPivot**: `boolean` +- **showPivotConfigurationUI**: `boolean` +- **valueChipTemplate**: `TemplateRef` — Gets/Sets a custom template for the value chips. +- **valueInit**: `EventEmitter` — Emitted when the value is initialized. +- **valuesChange**: `EventEmitter` — 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` +- **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, data: any, parent: any): IgxColumnComponent[] +- **generateDimensionColumns**(): IgxColumnComponent[] +- **generateFromData**(fields: string[]): Map +- **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[]): 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, 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): IgxProcessBarTextTemplateDirective +- **template**: `TemplateRef` + +### [IgxProgressBarGradientDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxProgressBarGradientDirective) + +- **constructor**(template: TemplateRef): IgxProgressBarGradientDirective +- **template**: `TemplateRef` + +### [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` — Event fired as the expression tree is changed. + + +- **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: + + Simple radio button + + +- **constructor**(cdr: ChangeDetectorRef, renderer: Renderer2, ngControl: NgControl): IgxRadioComponent +- **ariaLabel**: `string` — Sets/gets the aria-label attribute of the radio component. + + +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. + + +let ariaLabelledBy = this.radio.ariaLabelledBy; +- readonly **change**: `EventEmitter` — 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. + + +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. + + +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". + + +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". + + +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". + + +let labelPosition = this.radio.labelPosition; +- **name**: `string` — Sets/gets the name attribute of the radio component. + + +let name = this.radio.name; +- **nativeLabel**: `ElementRef` — Returns reference to native label element. +let labelElement = this.radio.nativeLabel; +- **nativeRadio**: `ElementRef` — Returns reference to native radio element. +let radioElement = this.radio.nativeRadio; +- **ngControl**: `NgControl` +- **placeholderLabel**: `ElementRef` — Returns reference to the label placeholder element. +let labelPlaceholder = this.radio.placeholderLabel; +- **renderer**: `Renderer2` +- **tabindex**: `number` — Sets the value of the tabindex attribute. + + +let tabIndex = this.radio.tabindex; +- **value**: `any` — Sets/gets the value attribute. + + +let value = this.radio.value; +- **disabled**: `boolean` — Sets/gets the disabled attribute. +Default value is false. + + +let isDisabled = this.radio.disabled; +- **invalid**: `boolean` — Sets/gets whether the radio button is invalid. +Default value is false. + + +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. + + +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` — An event that is emitted after the radio group value is changed. +- **ngControl**: `NgControl` +- **radioButtons**: `QueryList` — 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, renderer: Renderer2, zone: NgZone): IgxRippleDirective +- **builder**: `AnimationBuilder` +- **elementRef**: `ElementRef` +- **renderer**: `Renderer2` +- **rippleColor**: `string` — Sets/gets the ripple color. + + +@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. + + +@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. + + +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let rippleDuration = this.ripple.rippleDuration; +- **rippleTarget**: `string` — Sets/gets the ripple target. +
+ +@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. +
+ +
+- **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` +- **childGrids**: `Map` +- **childRowIslands**: `Map` +- **destroyMap**: `Map>` +- **rowIsland**: `IgxRowIslandComponent` +- **state**: `Map` +- **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, 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` +- readonly **data**: `any[]` +- **gridCreated**: `EventEmitter` — Event emmited when a grid is being created based on this row island. + + + + + +- **gridInitialized**: `EventEmitter` — Emitted after a grid is being initialized for this row island. +The emitting is done in ngAfterViewInit. + + + + + +- **islandPaginatorTemplate**: `TemplateRef` +- **islandToolbarTemplate**: `TemplateRef` +- **key**: `string` — Sets the key of the row island by which child data would be taken from the row data if such is provided. + + + + + +- **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: + + + + {{ item.field }} + + + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, overlayService: IgxOverlayService, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector): IgxSelectComponent +- **closed**: `EventEmitter` — Emitted after the dropdown is closed + + +- **closing**: `EventEmitter` — Emitted before the dropdown is closed + + +- **disabled**: `boolean` — An +- **footerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the FOOTER for the select items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.footerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom footer +
+ + +- **headerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the HEADER for the select items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.headerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom header +
+ + +- **opened**: `EventEmitter` — Emitted after the dropdown is opened + + +- **opening**: `EventEmitter` — Emitted before the dropdown is opened + + +- **overlayService**: `IgxOverlayService` +- **overlaySettings**: `OverlaySettings` — An +- **placeholder**: `any` — An +- **prefixes**: `QueryList` +- **suffixes**: `QueryList` +- **toggleIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.toggleIconTemplate = myCustomTemplate; + + + + ... + + {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} + + +- **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 is a container intended for row items in +a container. + +- **constructor**(): IgxSelectGroupComponent + +### [IgxSelectItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxSelectItemComponent) +The is a container intended for row items in +a container. + +- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef, 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, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _iconService: IgxIconService, platformUtil: PlatformUtil, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector): IgxSimpleComboComponent +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **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. + + + + + +- **constructor**(elementRef: ElementRef): 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. + + + +- **index**: `number` — Gets/sets the index of the slide inside the 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. + + + + + +Two-way data binding. + + + +- **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: + + + +- **constructor**(renderer: Renderer2, _el: ElementRef, _cdr: ChangeDetectorRef, _ngZone: NgZone, _dir: IgxDirectionality): IgxSliderComponent +- **dragFinished**: `EventEmitter` — This event is emitted at the end of every slide interaction. +public change(event){ + alert("The value has been changed!"); +} + + +- **id**: `string` — An +- **lowerValueChange**: `EventEmitter` — 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}); +} + + +- **primaryTickLabels**: `boolean` — show/hide primary tick labels + +- **secondaryTickLabels**: `boolean` — show/hide secondary tick labels + +- **showTicks**: `boolean` — Show/hide slider ticks + +- **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 + +- **ticksOrientation**: `TicksOrientation` — Changes ticks orientation: +bottom - The default orienation, below the slider track. +top - Above the slider track +mirror - combines top and bottom orientation. + +- **upperValueChange**: `EventEmitter` — 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}); +} + + +- **valueChange**: `EventEmitter` — This event is emitted every time the value is changed. +public change(event){ + alert("The value has been changed!"); +} + + +- **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: + +
+ + Message sent + +
+ +- **actionText**: `string` — Sets/gets the actionText attribute. + +- **animationDone**: `EventEmitter` — An event that will be emitted when the snackbar animation ends. +Provides reference to the ToggleViewEventArgs interface as an argument. + +- **animationStarted**: `EventEmitter` — An event that will be emitted when the snackbar animation starts. +Provides reference to the ToggleViewEventArgs interface as an argument. + +- **clicked**: `EventEmitter` — An event that will be emitted when the action button is clicked. +Provides reference to the IgxSnackbarComponent as an argument. + +- **id**: `string` — Sets/gets the id of the snackbar. +If not set, the id of the first snackbar component will be "igx-snackbar-0"; + + +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): IgxSplitterComponent +- **document**: `any` +- **panes**: `QueryList` — Gets the list of splitter panes. +- **resizeEnd**: `EventEmitter` — Event fired when resizing of panes ends. +- **resizeStart**: `EventEmitter` — Event fired when resizing of panes starts. +- **resizing**: `EventEmitter` — 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): IgxSplitterPaneComponent +- **collapsedChange**: `EventEmitter` — 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, dir: IgxDirectionality): IgxStepComponent +- **activeChange**: `EventEmitter` — Emitted when the step's active property changes. Can be used for two-way binding. + + + + + +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"; + + +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. + + ... +
+
+ ... +
+
+ +- **tabIndex**: `number` + +### [IgxStepContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxStepContentDirective) + +- **constructor**(step: IgxStep, stepperService: IgxStepperService, elementRef: ElementRef): IgxStepContentDirective +- **defaultClass**: `boolean` +- **elementRef**: `ElementRef` +- **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): IgxStepperComponent +- **activeStepChanged**: `EventEmitter` — Emitted when the active step is changed. +- **activeStepChanging**: `EventEmitter` — Emitted when the stepper's active step is changing. + + + + + +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. + + +- **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): IgxSummaryCellComponent +- **column**: `ColumnType` +- **density**: `any` +- **firstCellIndentation**: `number` +- **hasSummary**: `boolean` +- **rowIndex**: `number` +- **summaryFormatter**: `any` +- **summaryResults**: `IgxSummaryResult[]` +- **summaryTemplate**: `TemplateRef` +- **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` — 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, cdr: ChangeDetectorRef): IgxSummaryRowComponent +- **_summaryCells**: `QueryList` +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **firstCellIndentation**: `number` +- **grid**: `GridType` +- **gridID**: `any` +- **index**: `number` +- **summaries**: `Map` +- **dataRowIndex**: `number` +- **minHeight**: `number` +- **nativeElement**: `HTMLElement` +- **summaryCells**: `QueryList` +- **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): IgxSummaryTemplateDirective +- **template**: `TemplateRef` +- 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` — 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` — Returns a reference to the native checkbox element. +- **nativeLabel**: `ElementRef` — Returns reference to the native label element. +- **ngControl**: `NgControl` +- **placeholderLabel**: `ElementRef` — 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` — 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` — Returns the items. +- **selectedIndexChange**: `EventEmitter` — Output to enable support for two-way binding on [(selectedIndex)] +- **selectedIndexChanging**: `EventEmitter` — Emitted when the selected index is about to change. +- **selectedItemChange**: `EventEmitter` — 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, 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. + +
+
+- **column**: `any` — The identifier of the column on which the directive is currently on. + +
+
+- **cssClass**: `string` — Determines the CSS class of the highlight elements. +This allows the developer to provide custom CSS to customize the highlight. + +
+
+- **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. + +
+
+- **metadata**: `Map` — 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. + +
+
+- static **highlightGroupsMap**: `Map` +- **value**: `any` — The underlying value of the element that will be highlighted. + +// get +const elementValue = this.textHighlight.value; + + + +
+
+- **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): IgxTextSelectionDirective +- **nativeElement**: `any` — Returns the nativeElement of the element where the directive was applied. + + + + + +@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. + + + + + +@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 + + + {{value}} + + +- **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 + + + {{value}} + + +- **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): 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): IgxTimePickerActionsDirective +- **template**: `TemplateRef` + +### [IgxTimePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/classes/IgxTimePickerComponent) + +- **constructor**(element: ElementRef, _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` — Emitted after a selection has been done. +- **spinLoop**: `boolean` — An +- **validationFailed**: `EventEmitter` — Emitted when the user types/spins invalid time in the time-picker editor. +- **valueChange**: `EventEmitter` — 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` +- **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. + + +@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): IgxTimePickerTemplateDirective +- **template**: `TemplateRef` + +### [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: + + + Notification displayed + + +- **constructor**(_element: ElementRef, 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". + + +let toastId = this.toast.id; +- **role**: `string` — Sets/gets the role attribute. +If not set, role will have value "alert". + + +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, navigationService: IgxNavigationService): IgxToggleActionDirective +- **_overlayDefaults**: `OverlaySettings` +- **_target**: `string | IToggleView` +- **outlet**: `ElementRef | IgxOverlayOutletDirective` — Determines where the toggle element overlay should be attached. + + +
+ +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 + } + +--- + +
+- **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` — Emits an event after the toggle element is appended to the overlay container. + +onAppended() { + alert("Content appended!"); +} + + +
+
+- **closed**: `EventEmitter` — Emits an event after the toggle container is closed. + +onToggleClosed(event) { + alert("Toggle closed!"); +} + + +
+
+- **closing**: `EventEmitter` — Emits an event before the toggle container is closed. + +onToggleClosing(event) { + alert("Toggle closing!"); +} + + +
+
+- **destroy$**: `Subject` +- **id**: `string` — Identifier which is registered into IgxNavigationService + +let myToggleId = this.toggle.id; +- **opened**: `EventEmitter` — Emits an event after the toggle container is opened. + +onToggleOpened(event) { + alert("Toggle opened!"); +} + + +
+
+- **opening**: `EventEmitter` — Emits an event before the toggle container is opened. + +onToggleOpening(event) { + alert("Toggle opening!"); +} + + +
+
+- **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: + +Hello there, I am a tooltip! + +- **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: + +Hello there, I am a tooltip! + +- **constructor**(_element: ElementRef, _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; + + + + +Hello there, I am a tooltip! +- **showDelay**: `number` — Gets/sets the amount of milliseconds that should pass before showing the tooltip. + +// get +let tooltipShowDelay = this.tooltipTarget.showDelay; + + + + +Hello there, I am a tooltip! +- **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; + + + + +Hello there, I am a tooltip! +- **tooltipHide**: `EventEmitter` — 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!"); +} + + + +Hello there, I am a tooltip! +- **tooltipShow**: `EventEmitter` — 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!"); +} + + + +Hello there, I am a tooltip! +- **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 +- **_redoStack**: `Action[][]` +- **_states**: `Map` +- **_transactions**: `T[]` +- **_undoStack**: `Action[][]` +- **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, 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, transaction: T, recordRef?: any): void — Updates the provided states collection according to passed transaction and recordRef +- **verifyAddedTransaction**(states: Map, 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, _displayDensityOptions?: IDisplayDensityOptions): IgxTreeComponent +- **_displayDensityOptions**: `IDisplayDensityOptions` +- **activeNodeChanged**: `EventEmitter>` — Emitted when the active node is changed. +- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that branches should use when expanding/collpasing. + + + + + +const animationSettings: ToggleAnimationSettings = { + openAnimation: growVerIn, + closeAnimation: growVerOut +}; + +this.tree.animationSettings = animationSettings; +- **cssClass**: `string` +- **expandIndicator**: `TemplateRef` — A custom template to be used for the expand indicator of nodes + + + {{ expanded ? "close_fullscreen": "open_in_full"}} + + +- **nodeCollapsed**: `EventEmitter` — Emitted when a node is collapsed, after it finishes +- **nodeCollapsing**: `EventEmitter` — Emitted when a node is collapsing, before it finishes + + + + + +public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) { + const collapsedNode: IgxTreeNode = event.node; + if (collapsedNode.alwaysOpen) { + event.cancel = true; + } +} +- **nodeExpanded**: `EventEmitter` — Emitted when a node is expanded, after it finishes + + + + + +public handleNodeExpanded(event: ITreeNodeToggledEventArgs) { + const expandedNode: IgxTreeNode = event.node; + console.log("Node is expanded: ", expandedNode.data); +} +- **nodeExpanding**: `EventEmitter` — Emitted when a node is expanding, before it finishes + + + + + +public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) { + const expandedNode: IgxTreeNode = event.node; + if (expandedNode.disabled) { + event.cancel = true; + } +} +- **nodeSelection**: `EventEmitter` — Emitted when the node selection is changed through interaction + + + + + +public handleNodeSelection(event: ITreeNodeSelectionEvent) { + const newSelection: IgxTreeNode[] = event.newSelection; + const added: IgxTreeNode[] = 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 + + +... + + + +const tree: IgxTree = this.tree; +this.tree.singleBranchExpand = false; +- **rootNodes**: `IgxTreeNodeComponent[]` — Returns all **root level** nodes + +const tree: IgxTree = this.tree; +const rootNodes: IgxTreeNodeComponent[] = tree.rootNodes; +- **selection**: `IgxTreeSelectionType` — Gets/Sets tree selection mode +- **collapseAll**(nodes?: IgxTreeNode[]): void — Collapses all of the passed nodes. +If no nodes are passed, collapses ALL nodes +- **deselectAll**(nodes?: IgxTreeNodeComponent[]): void — Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection. +- **expandAll**(nodes?: IgxTreeNode[]): void — Expands all of the passed nodes. +If no nodes are passed, expands ALL nodes +- **findNodes**(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNodeComponent[] — 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: + + + + + + +- **constructor**(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxHierarchicalTransactionFactory, _elementRef: ElementRef, _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): IgxTreeGridComponent +- **_filterStrategy**: `TreeGridFilteringStrategy` +- **_transactions**: `HierarchicalTransactionService` +- **cascadeOnDelete**: `boolean` — An +- **childDataKey**: `any` — An +- **foreignKey**: `any` — An +- **hasChildrenKey**: `any` — An +- **id**: `string` — An +- **loadChildrenOnDemand**: `any` +- **processedRecords**: `Map` — 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` — 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` — 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: + + + ... + + {{ data.FirstName }} {{ data.LastName }} + + ... + + +- **constructor**(tree: IgxTree, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, navService: IgxTreeNavigationService, cdr: ChangeDetectorRef, animationService: AnimationService, element: ElementRef, parentNode: IgxTreeNode): IgxTreeNodeComponent +- **cdr**: `ChangeDetectorRef` +- **data**: `T` — The data entry that the node is visualizing. +- **expandedChange**: `EventEmitter` — Emitted when the node's expanded property changes. + + + + + + + +const node: IgxTreeNode = 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` +- **selectedChange**: `EventEmitter` — Emitted when the node's selected property changes. + + + + + + + +const node: IgxTreeNode = 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[]` — 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 + + + ... + + {{ node.label }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const expanded = node.expanded; +node.expanded = true; +- **level**: `number` — The depth of the node, relative to the root + + + ... + + My level is {{ node.level }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[12])[0]; +const level: number = node.level; +- **path**: `IgxTreeNode[]` — Retrieves the full path to the node incuding itself + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const path: IgxTreeNode[] = node.path; +- **resourceStrings**: `ITreeResourceStrings` — An accessor that returns the resource strings. +- **selected**: `boolean` — Get/set whether the node is selected. Supporst two-way binding. + + + ... + + {{ node.label }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const selected = node.selected; +node.selected = true; +- **collapse**(): void — Collapses the node, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; +myNode.collapse(); +- **expand**(): void — Expands the node, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; +myNode.expand(); +- **ngOnDestroy**(): void +- **toggle**(): void — Toggles the node expansion state, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = 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): IgxYearsViewComponent +- **el**: `ElementRef` +- **formatView**: `boolean` — Gets/sets whether the view should be rendered +according to the locale and yearFormat, if any. +- **selected**: `EventEmitter` — Emits an event when a selection is made in the years view. +Provides reference the date property in the IgxYearsViewComponent. + +- **date**: `Date` — Gets/sets the selected date of the years view. +By default it is the current date. + + +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 + +### [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, 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, 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, cdr: ChangeDetectorRef): IgxTreeGridRowComponent +- **_cells**: `QueryList` +- **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, 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` +- **cdr**: `ChangeDetectorRef` +- **cellTemplate**: `TemplateRef` — Sets/gets the template of the cell. + +
+ {{value}} +
+ + +@ViewChild('cellTemplate',{read: TemplateRef}) +cellTemplate: TemplateRef; + +this.cell.cellTemplate = this.cellTemplate; + +let template = this.cell.cellTemplate; +- **cellValidationErrorTemplate**: `TemplateRef` +- **column**: `ColumnType` — Gets the column of the cell. + let cellColumn = this.cell.column; +- **defaultCellTemplate**: `TemplateRef` +- **defaultErrorTemplate**: `TemplateRef` — Gets the default error template. +- **defaultPinnedIndicator**: `TemplateRef` +- **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` +- **overlayService**: `IgxOverlayService` +- **pinnedIndicator**: `TemplateRef` +- **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` — 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` — 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` — 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, 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 | 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` +- **colEnd**: `number` +- **colStart**: `number` +- **collapsible?**: `boolean` +- **collapsibleIndicatorTemplate?**: `TemplateRef` +- **columnGroup**: `boolean` +- **columnLayout**: `boolean` +- **columnLayoutChild**: `boolean` +- **dataType**: `GridColumnDataType` +- **disableHiding**: `boolean` +- **disablePinning**: `boolean` +- **editable**: `boolean` +- **expanded**: `boolean` +- **filterCell**: `any` +- **filterCellTemplate**: `TemplateRef` +- **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` +- **hidden**: `boolean` +- **index**: `number` +- **inlineEditorTemplate**: `TemplateRef` +- **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` +- **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` — 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` +- **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` — 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` — Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.* +- **children?**: `Map` — 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` — 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` + +### [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` +- **value**: `any` + +### [ITreeNodeEditingEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeEditingEvent) + +- **node**: `IgxTreeNode` +- **value**: `string` + +### [ITreeNodeSelectionEvent](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeSelectionEvent) + +- **added**: `IgxTreeNode[]` +- **event?**: `Event` +- **newSelection**: `IgxTreeNode[]` +- **oldSelection**: `IgxTreeNode[]` +- **removed**: `IgxTreeNode[]` + +### [ITreeNodeToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeToggledEventArgs) + +- **node**: `IgxTreeNode` + +### [ITreeNodeTogglingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/interfaces/ITreeNodeTogglingEventArgs) + +- **node**: `IgxTreeNode` + +### [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` + +### [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` +- **formControl?**: `FormControl` + +### [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` +- **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` +- **activeStepChanging**: `EventEmitter` +- **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>` +- **animationSettings**: `ToggleAnimationSettings` +- **expandIndicator**: `TemplateRef` +- **nodeCollapsed**: `EventEmitter` +- **nodeCollapsing**: `EventEmitter` +- **nodeExpanded**: `EventEmitter` +- **nodeExpanding**: `EventEmitter` +- **nodeSelection**: `EventEmitter` +- **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` +- **level**: `number` +- **loading**: `boolean` +- **parentNode?**: `IgxTreeNode` +- **path**: `IgxTreeNode[]` +- **selected**: `boolean` +- **selectedChange**: `EventEmitter` +- **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` — Available when Type is provided to the attach() method and allows access to the created Component instance +- **elementRef?**: `ElementRef` — 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 | 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[]` +- **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` +- **treeRow?**: `ITreeGridRecord` +- **unpin?**: `any` +- **update?**: `any` +- **validation?**: `IGridValidationState` +- **viewIndex**: `number` +- **virtDirRow?**: `IgxGridForOfDirective` + +### [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[]` +- **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` — 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` + +### [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` +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` + +### [IGX_INPUT_GROUP_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_INPUT_GROUP_TYPE) +`InjectionToken` +Defines the InputGroupType DI token. + +### [IGX_STEPPER_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_STEPPER_COMPONENT) +`InjectionToken` + +### [IGX_STEP_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/15.1.x/variables/IGX_STEP_COMPONENT) +`InjectionToken` + +### [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` + +### [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` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/22.0.0/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/22.0.0/llms-full.txt new file mode 100644 index 000000000..402bde199 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/22.0.0/llms-full.txt @@ -0,0 +1,11206 @@ +# Ignite UI for Angular v22.0.0 — Full API Reference + +> Complete API reference for the Ignite UI for Angular package (22.0.0). 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: 22.0.0 + +## Classes + +### [AbsoluteScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/AutoPositionStrategy) +Positions the element as in **Connected** positioning strategy and re-positions the element in +the view port (calculating a different start point) in case the element is partially getting out of view + +- **constructor**(settings?: PositionSettings): AutoPositionStrategy + +### [BaseFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/BaseFilteringStrategy) + +- **constructor**(): BaseFilteringStrategy +- **filter**(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridTypeBase): any[] +- **findMatchByExpression**(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridTypeBase): boolean +- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise +- **matchRecord**(rec: any, expressions: IFilteringExpression | IFilteringExpressionsTree, grid?: GridTypeBase, entity?: string): boolean + +### [BaseFitPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/BaseFitPositionStrategy) +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): BaseFitPositionStrategy +- **position**(contentElement: HTMLElement, _size: Size, document?: Document, initialCall?: boolean, target?: HTMLElement | Point): void — Position the element based on the PositionStrategy implementing this interface. + +### [BaseFormatter](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/BaseFormatter) + +- **constructor**(): BaseFormatter +- **formatCurrency**(value: string | number, locale?: string, display?: string, currencyCode?: string, digitsInfo?: string): string — Format number as a currency based on locale +- **formatDate**(value: string | number | Date, format: string, locale: string, timezone?: string): string — Format provided date to reflect locales format. Similar to Angular's formatDate. +- **formatNumber**(value: string | number, locale: string, digitsInfo?: string): string — Format number value based on locale +- **formatPercent**(value: string | number, locale: string, digitsInfo?: string): string — Format number value as percent based on locale +- **getCurrencyCode**(locale: string, overrideCode?: string): string — Retrieve the currency code of the locale provided. +Angular provides locale data for them, if using that. +When using Intl, it should be user defined and defaults to USD. +- **getCurrencySymbol**(currencyCode: string, locale: string, currencyDisplay: any): string — Get the currency symbol based on a currency code. +- **getFormatOptions**(format: string): DateTimeFormatOptions — Get Intl options based on format provided: + +date and time formats - short, medium, long, full + +date formats - shortDate, mediumDate, longDate, fullDate + +time formats - shortTime, mediumTime, longTime, fullTime +- **getLocaleDateTimeFormat**(locale: string, forceLeadingZero: boolean, options?: DateTimeFormatOptions): string — Returns the date and time format based on a provided locale and options. +- **getLocaleFirstDayOfWeek**(locale: string): number — Get first day of the week. +Angular's default: 0...6. +Intl default: 1...7. +- **verifyLocale**(locale: string): string + +### [BlockScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 + +### [ByLevelTreeGridMergeStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/ByLevelTreeGridMergeStrategy) +Merge strategy interface. + +- **constructor**(): ByLevelTreeGridMergeStrategy +- **comparer**(prevRecord: any, record: any, field: string, isDate: boolean, isTime: boolean): boolean — Function that compares values for merging. Returns true if same, false if different. + +### [CachedDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/CachedDataCloneStrategy) +Data clone strategy that is uses cache to deep clone primitive values, dates and objects. +It allows using circular references inside object. + +- **constructor**(): CachedDataCloneStrategy +- **clone**(data: any): any — Clones provided data + +### [Calendar](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/Calendar) + +- **constructor**(): Calendar +- **timedelta**(date: Date, interval: string, units: number): Date + +### [CalendarDay](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/CalendarDay) + +- **constructor**(args: CalendarDayParams): CalendarDay +- **date**: `number` — Returns the date +- **day**: `number` — Returns the day of the week (Sunday = 0). +- **month**: `number` — Returns the month. +- **native**: `Date` — Returns the underlying native date instance. +- **timestamp**: `number` — Returns the timestamp since epoch in milliseconds. +- **week**: `number` — Returns the ISO 8601 week number. +- **weekend**: `boolean` — Whether the current date is a weekend day. +- **year**: `number` — Returns the full year. +- static **today**: `CalendarDay` — Constructs and returns the current day. +- **add**(unit: DayInterval, value: number): CalendarDay +- **clone**(): CalendarDay — Returns a copy of this instance. +- **equalTo**(value: DayParameter): boolean +- **getWeekNumber**(weekStart: number): number — Gets the week number based on week start day. +Uses ISO 8601 (first Thursday rule) only when weekStart is Monday (1). +For other week starts, uses simple counting from January 1st. +- **greaterThan**(value: DayParameter): boolean +- **greaterThanOrEqual**(value: DayParameter): boolean +- **lessThan**(value: DayParameter): boolean +- **lessThanOrEqual**(value: DayParameter): boolean +- **set**(args: Partial): CalendarDay — Returns a new instance with values replaced. +- **toString**(): string +- static **from**(date: Date): CalendarDay — Constructs a new CalendarDay instance from a Date object. + +### [CheckboxBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/CheckboxBaseDirective) + +- **constructor**(): CheckboxBaseDirective +- **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` — An event that is emitted after the checkbox state is changed. +Provides references to the checkbox and the checked property as event arguments. +- **cssClass**: `string` +- **disabled**: `boolean` +- **disableRipple**: `boolean` — Enables/Disables the ripple effect. +If not set, disableRipple will have value false. +- **focused**: `boolean` +- **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` +- **invalid**: `boolean` +- **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. +- **nativeInput**: `ElementRef` — Returns reference to the native checkbox element. +- **nativeLabel**: `ElementRef` — Returns reference to the native label element. + +@example +let labelElement = this.component.nativeLabel; +- **ngControl**: `NgControl` +- **placeholderLabel**: `ElementRef` — Returns reference to the label placeholder element. + +@example +let labelPlaceholder = this.component.placeholderLabel; +- **readonly**: `boolean` +- **tabindex**: `number` — Sets/gets the value of the tabindex attribute. +- **value**: `any` — Sets/gets the value attribute. +- **checked**: `boolean` +- **nativeElement**: `any` — Returns reference to the nativeElement of the igx-checkbox/igx-switch. +- **required**: `boolean` — Sets/gets whether the checkbox is required. +If not set, required will have value false. + +### [CloseScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/ConnectedPositioningStrategy) +Positions the element based on the directions and start point passed in trough PositionSettings. +It is possible to either pass a start point or an HTMLElement as a positioning base. + +- **constructor**(settings?: PositionSettings): ConnectedPositioningStrategy +- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay +- **clone**(): IPositionStrategy — Creates clone of this position strategy +- **position**(contentElement: HTMLElement, _size: Size, _document?: Document, _initialCall?: boolean, target?: HTMLElement | Point): void — Position the element based on the PositionStrategy implementing this interface. + +### [ContainerPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 +- **dispose**(): void — Disposes the observer and cleans up references. +- **position**(contentElement: HTMLElement): void — Position the element based on the PositionStrategy implementing this interface. + +### [DefaultDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultDataCloneStrategy) +Simplified data clone strategy that deep clones primitive values, dates and objects. +Does not support circular references in objects. + +- **constructor**(): DefaultDataCloneStrategy +- **clone**(data: any): any — Clones provided data + +### [DefaultMergeStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultMergeStrategy) +Merge strategy interface. + +- **constructor**(): DefaultMergeStrategy +- **comparer**(prevRecord: any, record: any, field: string, isDate: boolean, isTime: boolean): boolean — Function that compares values for merging. Returns true if same, false if different. +- **merge**(data: any[], field: string, comparer: any, result: any[], activeRowIndexes: number[], isDate: boolean, isTime: boolean, grid?: GridTypeBase): any[] — Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. +- static **instance**(): DefaultMergeStrategy + +### [DefaultPivotGridRecordSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultPivotGridRecordSortingStrategy) + +- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, _valueResolver: any, isDate?: boolean, isTime?: boolean, _grid?: PivotGridType): any[] +- static **instance**(): DefaultPivotGridRecordSortingStrategy + +### [DefaultPivotSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultPivotSortingStrategy) + +- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, _valueResolver: any, isDate?: boolean, isTime?: boolean, grid?: PivotGridType): any[] +- static **instance**(): DefaultPivotSortingStrategy + +### [DefaultSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultSortingStrategy) + +- **compareValues**(a: any, b: any): number +- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean): any[] +- static **instance**(): DefaultSortingStrategy + +### [DefaultTreeGridMergeStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DefaultTreeGridMergeStrategy) +Merge strategy interface. + +- **constructor**(): DefaultTreeGridMergeStrategy +- **comparer**(prevRecord: any, record: any, field: string, isDate: boolean, isTime: boolean): boolean — Function that compares values for merging. Returns true if same, false if different. + +### [DimensionValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/DimensionValuesFilteringStrategy) + +- **constructor**(fields?: string[]): DimensionValuesFilteringStrategy +- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise + +### [ElasticPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/ElasticPositionStrategy) +Positions the element as in **Connected** positioning strategy and resize the element +to fit in the view port in case the element is partially getting out of view + +- **constructor**(settings?: PositionSettings): ElasticPositionStrategy + +### [ExpressionsTreeUtil](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/ExpressionsTreeUtil) + +- **constructor**(): ExpressionsTreeUtil +- static **find**(tree: IFilteringExpressionsTree, fieldName: string): IFilteringExpression | IFilteringExpressionsTree — Returns the filtering expression for a column with the provided tree and fieldName. +let filteringExpression = ExpressionsTreeUtil.find(gridExpressionTree, 'Column Field'); +- static **findIndex**(tree: IFilteringExpressionsTree, fieldName: string): number — Returns the index of the filtering expression for a column with the provided tree and fieldName. +let filteringExpressionIndex = ExpressionsTreeUtil.findIndex(gridExpressionTree, 'Column Field'); + +### [FilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/FilteringExpressionsTree) + +- **constructor**(operator: FilteringLogic, fieldName?: string, entity?: string, returnFields?: string[]): FilteringExpressionsTree +- **entity**: `string` — Sets/gets the entity. +gridExpressionsTree.entity = 'Entity A'; + +let entity = gridExpressionsTree.entity; +- **fieldName**: `string` — Sets/gets the field name of the column where the filtering expression is placed. +gridExpressionTree.fieldName = 'Column Field'; + +let columnField = expressionTree.fieldName; +- **filteringOperands**: `IFilteringExpression | IFilteringExpressionsTree[]` — Sets/gets the filtering operands. +const gridExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And); +const expression = [ +{ + condition: IgxStringFilteringOperand.instance().condition('contains'), + fieldName: 'Column Field', + searchVal: 'Value', + ignoreCase: false +}]; +gridExpressionsTree.filteringOperands.push(expression); +this.grid.filteringExpressionsTree = gridExpressionsTree; + +let filteringOperands = gridExpressionsTree.filteringOperands; +- **operator**: `FilteringLogic` — Sets/gets the operator. +gridExpressionsTree.operator = FilteringLogic.And; + +let operator = gridExpressionsTree.operator; +- **returnFields**: `string[]` — Sets/gets the return fields. +gridExpressionsTree.returnFields = ['Column Field 1', 'Column Field 2']; + +let returnFields = gridExpressionsTree.returnFields; +- **type**: `FilteringExpressionsTreeType` — Sets/gets the type of the filtering expressions tree. +gridExpressionTree.type = FilteringExpressionsTree.Advanced; + +let type = expressionTree.type; +- **find**(fieldName: string): IFilteringExpression | IFilteringExpressionsTree — Returns the filtering expression for a column with the provided fieldName. +let filteringExpression = gridExpressionTree.find('Column Field'); +- **findIndex**(fieldName: string): number — Returns the index of the filtering expression for a column with the provided fieldName. +let filteringExpressionIndex = gridExpressionTree.findIndex('Column Field'); +- static **empty**(expressionTree: IFilteringExpressionsTree): boolean — Checks if filtering expressions tree is empty. + +### [FilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/FilteringStrategy) + +- **constructor**(): FilteringStrategy +- **filter**(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree, grid: GridTypeBase): T[] +- static **instance**(): FilteringStrategy + +### [FilterUtil](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/FilterUtil) + +- **constructor**(): FilterUtil +- static **filter**(data: T[], state: IFilteringState, grid?: GridTypeBase): T[] + +### [FormattedValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/FormattedValuesFilteringStrategy) + +- **constructor**(fields?: string[]): FormattedValuesFilteringStrategy + +### [FormattedValuesSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/FormattedValuesSortingStrategy) + +- **constructor**(): FormattedValuesSortingStrategy +- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any, isDate?: boolean, isTime?: boolean, grid?: GridTypeBase): any[] +- static **instance**(): FormattedValuesSortingStrategy + +### [GlobalPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/GlobalPositionStrategy) +Positions the element based on the directions passed in trough PositionSettings. +These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection + +- **constructor**(settings?: PositionSettings): GlobalPositionStrategy +- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay +- **clone**(): IPositionStrategy — Clone the strategy instance. +settings.positionStrategy.clone(); +- **position**(contentElement: HTMLElement): void — Position the element based on the PositionStrategy implementing this interface. + +### [GroupMemberCountSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/GroupMemberCountSortingStrategy) + +- **groupBy**(data: any, key: any): any +- **sort**(data: any[], fieldName: string, dir: SortingDirection): any[] +- static **instance**(): GroupMemberCountSortingStrategy + +### [IgcFormControlDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgcFormControlDirective) + +- **constructor**(): IgcFormControlDirective + +### [IgSizeDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgSizeDirective) + +- **constructor**(): IgSizeDirective +- **igSize**: `string` + +### [IgxAccordionComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAccordionComponent) +Accordion is a container-based component that contains that can house multiple expansion panels. + +- **constructor**(): IgxAccordionComponent +- **id**: `string` — Get/Set the id of the accordion component. +Default value is "igx-accordion-0"; + + +const accordionId = this.accordion.id; +- **panelCollapsed**: `EventEmitter` — Emitted after a panel has been collapsed. + + + +- **panelCollapsing**: `EventEmitter` — Emitted before a panel is collapsed. +- **panelExpanded**: `EventEmitter` — Emitted after a panel has been expanded. + + + + + +public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) { + const expandedPanel: IgxExpansionPanelComponent = event.panel; + console.log("Panel is expanded: ", expandedPanel.id); +} +- **panelExpanding**: `EventEmitter` — Emitted before a panel is expanded. +- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that panels should use when expanding/collpasing. + + + + +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 + + +... + + + +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/22.0.0/classes/IgxActionStripComponent) +Action Strip provides templatable area for one or more actions. + +- **constructor**(): IgxActionStripComponent +- **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` — Gets/Sets the visibility of the Action Strip. +Could be used to set if the Action Strip will be initially hidden. +- **resourceStrings**: `IActionStripResourceStrings` +- **hide**(): void — Hiding the Action Strip and removing it from its current context element. +- **show**(context?: any): void — Showing the Action Strip and appending it the specified context element. + +### [IgxActionStripMenuItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxActionStripMenuItemDirective) + +- **constructor**(): IgxActionStripMenuItemDirective +- **templateRef**: `TemplateRef` + +### [IgxAddRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAddRow) + +- **constructor**(id: any, index: number, data: any, recordRef: any, grid: GridType): IgxAddRow +- **recordRef**: `any` +- **isAddRow**: `boolean` +- **createRowEditDoneEventArgs**(_cachedRowData: any, event?: Event): IGridEditDoneEventArgs +- **createRowEditEventArgs**(includeNewValue: boolean, event?: Event): IGridEditEventArgs + +### [IgxAdvancedFilteringDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + +- **constructor**(): IgxAdvancedFilteringDialogComponent +- **cdr**: `ChangeDetectorRef` +- **grid**: `GridType` — Returns the grid. + +### [IgxAngularAnimationPlayer](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAngularAnimationPlayer) + +- **constructor**(internalPlayer: AnimationPlayer): IgxAngularAnimationPlayer +- **animationEnd**: `EventEmitter` — Emits when the animation ends +- **animationStart**: `EventEmitter` — Emits when the animation starts +- **position**: `number` — Current position of the animation. +- **destroy**(): void — Destroys the animation. +- **finish**(): void — Ends the animation +- **hasStarted**(): boolean — Reports whether the animation has started. +- **init**(): void — Initialize the animation +- **play**(): void — Runs the animation +- **reset**(): void — Resets the animation to its initial state + +### [IgxAngularAnimationService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAngularAnimationService) + +- **constructor**(): IgxAngularAnimationService +- **buildAnimation**(animationMetaData: AnimationReferenceMetadata, element: HTMLElement): AnimationPlayer — Creates an AnimationPlayer instance + +### [IgxAppendDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAppendDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxAppendDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void + +### [IgxAutocompleteDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + + {{town}} + + + +- **constructor**(): IgxAutocompleteDirective +- **autocompleteSettings**: `AutocompleteOverlaySettings` — Provide overlay settings for the autocomplete drop down + +// get +let settings = this.autocomplete.autocompleteSettings; + + + + +// set +this.settings = { + positionStrategy: new ConnectedPositioningStrategy({ + closeAnimation: null, + openAnimation: null + }) +}; +- **disabled**: `boolean` — Enables/disables autocomplete component + +// get +let disabled = this.autocomplete.disabled; + + + + +// set +public disabled = true; +- **selectionChanging**: `EventEmitter` — Emitted after item from the drop down is selected + + +- **target**: `IgxDropDownComponent` — Sets the target of the autocomplete directive + + + +... + +... + +- **close**(): void — Closes autocomplete drop down +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **open**(): void — Opens autocomplete drop down + +### [IgxAvatarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxAvatarComponent) +Avatar provides a way to display an image, icon or initials to the user. + +- **constructor**(): 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` +- **icon**: `string` — Sets an icon to the avatar. All icons from the material icon set are supported. +- **id**: `string` — Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0". +- **initials**: `string` — Sets initials to the avatar. +- **role**: `string` — Returns the role attribute of the avatar. +- **roleDescription**: `string` — Returns the type of the avatar. +The avatar can be: +- "initials type avatar" +- "icon type avatar" +- "image type avatar". +- "custom type avatar". +- **shape**: `"circle" | "rounded" | "square"` — Sets square, rounded or circular shape to the avatar. +By default the shape of the avatar is square. +- **size**: `string` — Returns the size of the avatar. +- **src**: `string` +- **type**: `IgxAvatarType` — Returns the type of the avatar. + +### [IgxBadgeComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBadgeComponent) +Badge provides visual notifications used to decorate avatars, menus, etc. + +- **constructor**(): IgxBadgeComponent +- **cssClass**: `string` — Sets/gets the css class to use on the badge. +- **dot**: `boolean` — Sets/gets whether the badge is displayed as a dot. +When true, the badge will be rendered as a minimal 8px indicator without any content. +Default value is false. +- **icon**: `string` — Sets/gets an icon for the badge from the material icons set. +- **iconSet**: `string` — The name of the icon set. Used in case the icon is from a different icon set. +- **id**: `string` — Sets/gets the id of the badge. +- **label**: `string` — Sets/gets the aria-label attribute value. +- **outlined**: `boolean` — Sets/gets whether the badge is outlined. +Default value is false. +- **role**: `string` — Sets/gets the role attribute value. +- **shape**: `"rounded" | "square"` — Sets a square shape to the badge, if shape is set to square. +By default the shape of the badge is rounded. +- **type**: `string` — Sets/gets the type of the badge. +- **value**: `string | number` — Sets/gets the value to be displayed inside the badge. +- **errorClass**: `boolean` +- **infoClass**: `boolean` +- **successClass**: `boolean` +- **warningClass**: `boolean` + +### [IgxBannerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBannerActionsDirective) + +- **constructor**(): IgxBannerActionsDirective + +### [IgxBannerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + Our privacy settings have changed. + + + + + + +- **constructor**(): IgxBannerComponent +- **closed**: `EventEmitter` — Fires after the banner hides +public handleClosed(event) { + ... +} + + +- **closing**: `EventEmitter` — Fires before the banner hides +public handleClosing(event) { + ... +} + + +- **cssClass**: `string` +- **elementRef**: `ElementRef` +- **opened**: `EventEmitter` — Fires after the banner shows up +public handleOpened(event) { + ... +} + + +- **opening**: `EventEmitter` — Fires before the banner shows up +public handleOpening(event) { + ... +} + + +- **animationSettings**: `ToggleAnimationSettings` — Get the animation settings used by the banner open/close methods +let currentAnimations: ToggleAnimationSettings = banner.animationSettings +- **collapsed**: `boolean` — Gets whether the banner is collapsed. + +const isCollapsed: boolean = banner.collapsed; +- **element**: `HTMLElement` — Returns the native element of the banner component + const myBannerElement: HTMLElement = banner.element; +- **expanded**: `boolean` — Gets/Sets whether the banner is expanded (visible) or collapsed (hidden). +Defaults to false. +Setting to true opens the banner, while false closes it. +- **resourceStrings**: `IBannerResourceStrings` +- **close**(event?: Event): void — Closes the banner + + myBanner.close(); + + + +... + + +- **open**(event?: Event): void — Opens the banner + + myBanner.open(); + + + +... + + +- **toggle**(event?: Event): void — Toggles the banner + + myBanner.toggle(); + + + +... + + + +### [IgxBaseExporter](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBaseExporter) + +- **constructor**(): IgxBaseExporter +- **columnExporting**: `EventEmitter` — This event is emitted when a column is exported. +this.exporterService.columnExporting.subscribe((args: IColumnExportingEventArgs) => { +// put event handler code here +}); +- **exportEnded**: `EventEmitter` +- **rowExporting**: `EventEmitter` — This event is emitted when a row is exported. +this.exporterService.rowExporting.subscribe((args: IRowExportingEventArgs) => { +// put event handler code here +}); +- **export**(grid: GridTypeBase, options: IgxExporterOptionsBase): void — Method for exporting grid component's data. +this.exporterService.export(this.igxGridForExport, this.exportOptions); +- **exportData**(data: any[], options: IgxExporterOptionsBase): void — Method for exporting any kind of array data. +this.exporterService.exportData(this.arrayForExport, this.exportOptions); + +### [IgxBaseTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBaseTransactionService) + +- **constructor**(): IgxBaseTransactionService +- **onStateUpdate**: `EventEmitter` — Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo +- **canRedo**: `boolean` +- **canUndo**: `boolean` +- **cloneStrategy**: `IDataCloneStrategy` — Gets/Sets the data clone strategy used to clone data +- **enabled**: `boolean` — Returns whether transaction is enabled for this service +- **add**(transaction: T, recordRef?: any): void — Adds provided transaction with recordRef if any +- **clear**(_id?: any): void — Clears all transactions +- **commit**(_data: any[], _id?: any): void — Applies all transactions over the provided data +- **endPending**(_commit: boolean): void — Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction +- **getAggregatedChanges**(mergeChanges: boolean): T[] — Returns aggregated changes from all transactions +- **getAggregatedValue**(id: any, mergeChanges: boolean): any — Returns value of the required id including all uncommitted changes +- **getState**(id: any): S — Returns the state of the record with provided id +- **getTransactionLog**(_id?: any): T[] — Returns all recorded transactions in chronological order +- **redo**(): void — Applies the last undone transaction if any +- **startPending**(): void — Starts pending transactions. All transactions passed after call to startPending +will not be added to transaction log +- **undo**(): void — Remove the last transaction if any + +### [IgxBooleanFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBooleanFilteringOperand) +Provides filtering operations for booleans + + +### [IgxBottomNavComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavComponent) +Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view. + +- **constructor**(): IgxBottomNavComponent + +### [IgxBottomNavContentComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavContentComponent) + +- **constructor**(): IgxBottomNavContentComponent + +### [IgxBottomNavHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavHeaderComponent) + +- **constructor**(): IgxBottomNavHeaderComponent + +### [IgxBottomNavHeaderIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavHeaderIconDirective) + +- **constructor**(): IgxBottomNavHeaderIconDirective + +### [IgxBottomNavHeaderLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavHeaderLabelDirective) + +- **constructor**(): IgxBottomNavHeaderLabelDirective + +### [IgxBottomNavItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxBottomNavItemComponent) + +- **constructor**(): IgxBottomNavItemComponent + +### [IgxButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxButtonDirective) +The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button. + +- **constructor**(): IgxButtonDirective +- **buttonSelected**: `EventEmitter` — Called when the button is selected. +- **label**: `string` +- **selected**: `boolean` +- **type**: `IgxButtonType` + +### [IgxButtonGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxButtonGroupComponent) +**Ignite UI for Angular Button Group** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html) + +The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports +single, multi and singleRequired selection. + +Example: + + + +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**(): IgxButtonGroupComponent +- **deselected**: `EventEmitter` — An +- **id**: `string` — Gets/Sets the value of the id attribute. If not set it will be automatically generated. + +- **selected**: `EventEmitter` — An +- **values**: `any` — Property that configures the buttons in the button group using a collection of Button objects. + public ngOnInit() { + this.cities = [ + new Button({ + label: "Sofia" + }), + new Button({ + label: "London" + }), + new Button({ + label: "New York", + selected: true + }), + new Button({ + label: "Tokyo" + }) + ]; + } + //.. + + +- **alignment**: `ButtonGroupAlignment` — Returns the alignment of the igx-buttongroup. +@ViewChild("MyChild") +public buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let buttonAlignment = this.buttonG.alignment; +} +- **buttons**: `IgxButtonDirective[]` — A collection containing all buttons inside the button group. +- **disabled**: `boolean` — Disables the igx-buttongroup component. By default it's false. + +- **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. + + +//... +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let orientation = this.buttonG.isVertical; +} +- **itemContentCssClass**: `string` — Returns the CSS class of the item content of the button group. + @ViewChild("MyChild") +public buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let buttonSelect = this.buttonG.itemContentCssClass; +} +- **multiSelection**: `boolean` — Enables selecting multiple buttons. By default, multi-selection is false. +- **selectedButtons**: `IgxButtonDirective[]` — Gets the selected button/buttons. +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + let selectedButton = this.buttonG.selectedButtons; +} +- **selectionMode**: `"single" | "multi" | "singleRequired"` — Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'. + +- **deselectButton**(index: number): void — Deselects a button by its index. +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + this.buttonG.deselectButton(2); + this.cdr.detectChanges(); +} +- **selectButton**(index: number): void — Selects a button by its index. +@ViewChild("MyChild") +private buttonG: IgxButtonGroupComponent; +ngAfterViewInit(){ + this.buttonG.selectButton(2); + this.cdr.detectChanges(); +} +- **updateDeselected**(index: number): void + +### [IgxCalendarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCalendarComponent) +Calendar provides a way to display date information. + +- **hasHeader**: `boolean` — Sets/gets whether the calendar has header. +Default value is true. +- **headerOrientation**: `"horizontal" | "vertical"` +- **id**: `string` — Sets/gets the id of the calendar. +- **orientation**: `"horizontal" | "vertical"` +- **showWeekNumbers**: `boolean` — Show/hide week numbers +- **vertical**: `boolean` — Sets/gets whether the calendar header will be in vertical position. +Default value is false. +- **context**: `any` — Gets the context for the template marked with either igxCalendarSubHeaderMonth +or igxCalendarSubHeaderYear directive. +- **headerContext**: `any` — Gets the context for the template marked with the igxCalendarHeader directive. +- **headerTemplate**: `any` — Gets the header template. +- **headerTitleTemplate**: `any` — Gets the header template. +- **monthsViewNumber**: `number` — Sets/gets the number of month views displayed. +Default value is 1. +- **subheaderTemplate**: `any` — Gets the subheader template. +- **deselectDate**(value?: string | Date | Date[]): void — Deselects date(s) (based on the selection type). +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **updateActiveDescendant**(date: Date): void + +### [IgxCalendarMonthDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCalendarMonthDirective) + +- **constructor**(): IgxCalendarMonthDirective +- **isActive**: `boolean` +- **isCurrent**: `boolean` +- **isSelected**: `boolean` + +### [IgxCalendarViewBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCalendarViewBaseDirective) + +- **constructor**(): IgxCalendarViewBaseDirective +- **date**: `Date` +- **elementRef**: `ElementRef` +- **itemSelection**: `EventEmitter` +- **showActive**: `boolean` +- **value**: `Date` +- **isActive**: `boolean` +- **isCurrent**: `boolean` +- **isSelected**: `boolean` +- **nativeElement**: `any` +- **onMouseDown**(event: MouseEvent): void + +### [IgxCardActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardActionsComponent) +Card actions is container for the card actions. + +- **constructor**(): IgxCardActionsComponent +- **card**: `IgxCardComponent` +- **layout**: `string` — Sets the layout style of the actions. +You can justify the elements slotted in the igx-card-action container +so that they are positioned equally from one another taking up all the +space available along the card actions axis. +- **vertical**: `boolean` — Sets the vertical attribute of the actions. +When set to true the actions will be layed out vertically. +- **isJustifyLayout**: `boolean` — A getter that returns true when the layout has been +set to justify. + +### [IgxCardComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardComponent) +Card provides a way to display organized content in appealing way. + +- **constructor**(): IgxCardComponent +- **elevated**: `boolean` — Sets/gets whether the card is elevated. +Default value is false. +- **horizontal**: `boolean` — Sets the value of the horizontal attribute of the card. +Setting this to true will make the different card sections align horizontally, +essentially flipping the card to the side. +- **id**: `string` — Sets/gets the id of the card. +If not set, id will have value "igx-card-0"; +- **role**: `string` — Sets the value of the role attribute of the card. +By default the value is set to group. + +### [IgxCardContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardContentDirective) +Card content is container for the card content. + +- **constructor**(): IgxCardContentDirective + +### [IgxCardFooterDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardFooterDirective) +Card footer is container for the card footer + +- **constructor**(): IgxCardFooterDirective +- **role**: `string` — Sets the value of the role attribute of the card footer. +By default the value is set to footer. + +### [IgxCardHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardHeaderComponent) +Card header is container for the card header + +- **constructor**(): IgxCardHeaderComponent +- **vertical**: `boolean` — Sets the layout style of the header. +By default the header elements(thumbnail and title/subtitle) are aligned horizontally. + +### [IgxCardHeaderSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/classes/IgxCardMediaDirective) +Card media is container for the card media section. +Use it to wrap images and videos. + +- **constructor**(): IgxCardMediaDirective +- **height**: `string` — Sets the height style property of the media container. +If not provided it will be set to auto. +- **role**: `string` — Sets the role attribute of the media container. +- **width**: `string` — Sets the width and min-width style property +of the media container. If not provided it will be set to auto. + +### [IgxCardThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCardThumbnailDirective) +Card thumbnail 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/22.0.0/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: + + +

First Slide Header

+

First slide Content

+ + +

Second Slide Header

+

Second Slide Content

+ + +- **constructor**(): IgxCarouselComponent +- **animationType**: `CarouselAnimationType` — Gets/sets the animation type of carousel. +Default value is slide. + + +- **carouselPaused**: `EventEmitter` — An event that is emitted after the carousel has been paused. +Provides a reference to the carousel as an event argument. + +- **carouselPlaying**: `EventEmitter` — An event that is emitted after the carousel has resumed transitioning between slides. +Provides a reference to the carousel as an event argument. + +- **cssClass**: `string` — Returns the class of the carousel component. +let class = this.carousel.cssClass; +- **gesturesSupport**: `boolean` — Controls whether the carousel should support gestures. +Default value is true. + +- **id**: `string` — Sets the id of the carousel. +If not set, the id of the first carousel component will be "igx-carousel-0". + +- **indicators**: `boolean` — Controls whether the carousel should render the indicators. +Default value is true. + +- **indicatorsOrientation**: `CarouselIndicatorsOrientation` — Gets/sets the display mode of carousel indicators. It can be start or end. +Default value is end. + + +- **indicatorTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel indicators + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.indicatorTemplate = myCustomTemplate; + + + + ... + + brightness_7 + brightness_5 + + +- **loop**: `boolean` — Sets whether the carousel should loop back to the first slide after reaching the last slide. +Default value is true. + +- **maximumIndicatorsCount**: `number` — Controls the maximum indexes that can be shown. +Default value is 10. + +- **navigation**: `boolean` — Controls whether the carousel should render the left/right navigation buttons. +Default value is true. + +- **nextButtonTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel next button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.nextButtonTemplate = myCustomTemplate; + + + + ... + + + + +- **pause**: `boolean` — Sets whether the carousel will pause the slide transitions on user interactions. +Default value is true. + +- **prevButtonTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering carousel previous button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.carousel.prevButtonTemplate = myCustomTemplate; + + + + ... + + + + +- **role**: `string` — Returns the role attribute of the carousel. +let carouselRole = this.carousel.role; +- **slideAdded**: `EventEmitter` — An event that is emitted after a slide has been added to the carousel. +Provides references to the carousel and slide components as event arguments. + +- **slideChanged**: `EventEmitter` — An event that is emitted after a slide transition has happened. +Provides references to the carousel and slide components as event arguments. + +- **slideRemoved**: `EventEmitter` — An event that is emitted after a slide has been removed from the carousel. +Provides references to the carousel and slide components as event arguments. + +- **slides**: `QueryList` — The collection of slides currently in the carousel. +let slides: QueryList = this.carousel.slides; +- **vertical**: `boolean` — Controls whether the carousel has vertical alignment. +Default value is false. + +- **current**: `number` — The index of the slide being currently shown. +let currentSlideNumber = this.carousel.current; +- **interval**: `number` — Returns the time interval in milliseconds before the slide changes. +let timeInterval = this.carousel.interval; +- **isDestroyed**: `boolean` — Returns а boolean indicating if the carousel is destroyed. +let isDestroyed = this.carousel.isDestroyed; +- **isPlaying**: `boolean` — Returns a boolean indicating if the carousel is playing. +let isPlaying = this.carousel.isPlaying; +- **nativeElement**: `any` — Returns a reference to the carousel element in the DOM. +let nativeElement = this.carousel.nativeElement; +- **resourceStrings**: `ICarouselResourceStrings` — An accessor that returns the resource strings. +- **total**: `number` — Returns the total number of slides in the carousel. +let slideCount = this.carousel.total; +- **touchAction**: `"auto" | "pan-y"` — Gets the touch-action style of the list item. +let touchAction = this.listItem.touchAction; +- **add**(slide: IgxSlideComponent): void — Adds a new slide to the carousel. +this.carousel.add(newSlide); +- **get**(index: number): IgxSlideComponent — Returns the slide corresponding to the provided index or null. +let slide1 = this.carousel.get(1); +- **next**(): void — Transitions to the next slide in the carousel. +this.carousel.next(); +- **play**(): void — Resumes playing of the carousel if in paused state. +No operation otherwise. +this.carousel.play(); +} +- **prev**(): void — Transitions to the previous slide in the carousel. +this.carousel.prev(); +- **remove**(slide: IgxSlideComponent): void — Removes a slide from the carousel. +this.carousel.remove(slide); +- **select**(slide: IgxSlideComponent, direction?: CarouselAnimationDirection): void — Switches to the passed-in slide with a given direction. +const slide = this.carousel.get(2); +this.carousel.select(slide, CarouselAnimationDirection.NEXT); +- **select**(index: number, direction?: CarouselAnimationDirection): void — Switches to slide by index with a given direction. +this.carousel.select(2, CarouselAnimationDirection.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/22.0.0/classes/IgxCarouselIndicatorDirective) + +- **constructor**(): IgxCarouselIndicatorDirective + +### [IgxCarouselNextButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCarouselNextButtonDirective) + +- **constructor**(): IgxCarouselNextButtonDirective + +### [IgxCarouselPrevButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCarouselPrevButtonDirective) + +- **constructor**(): IgxCarouselPrevButtonDirective + +### [IgxCell](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCell) + +- **constructor**(id: any, rowIndex: number, column: any, value: any, _editValue: any, rowData: any, grid: GridType): IgxCell +- **_editValue**: `any` +- **column**: `any` +- **grid**: `GridType` +- **id**: `any` +- **pendingValue**: `any` +- **primaryKey**: `any` +- **rowData**: `any` +- **rowIndex**: `number` +- **state**: `any` +- **value**: `any` +- **editValue**: `any` +- **castToNumber**(value: any): any +- **createCellEditDoneEventArgs**(value: any, event?: Event): IGridEditDoneEventArgs +- **createCellEditEventArgs**(includeNewValue: boolean, event?: Event): IGridEditEventArgs + +### [IgxCellCrudState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCellCrudState) + +- **constructor**(): IgxCellCrudState +- **cell**: `IgxCell` +- **grid**: `GridType` +- **isInCompositionMode**: `boolean` +- **row**: `IgxEditRow` +- **cellInEditMode**: `boolean` +- **beginCellEdit**(event?: Event): void +- **cellEdit**(event?: Event): IGridEditEventArgs +- **cellEditDone**(event: any, addRow: boolean): IGridEditDoneEventArgs +- **createCell**(cell: any): IgxCell +- **createRow**(cell: IgxCell): IgxEditRow +- **endCellEdit**(restoreFocus: boolean): void — Clears cell editing state +- **exitCellEdit**(event?: Event): IGridEditDoneEventArgs — Exit cell edit mode +- **sameCell**(cell: IgxCell): boolean +- **sameRow**(rowID: any): boolean +- **targetInEdit**(rowIndex: number, columnIndex: number): boolean — Returns whether the targeted cell is in edit mode +- **updateCell**(exit: boolean, event?: Event): IGridEditEventArgs + +### [IgxCellEditorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCellEditorTemplateDirective) + +- **constructor**(): IgxCellEditorTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellEditorTemplateDirective, context: unknown): context + +### [IgxCellHeaderTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCellHeaderTemplateDirective) + +- **constructor**(): IgxCellHeaderTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellHeaderTemplateDirective, context: unknown): context + +### [IgxCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCellTemplateDirective) + +- **constructor**(): IgxCellTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellTemplateDirective, context: unknown): context + +### [IgxCellValidationErrorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCellValidationErrorDirective) + +- **constructor**(): IgxCellValidationErrorDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCellValidationErrorDirective, context: unknown): context + +### [IgxChatAttachmentContextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChatAttachmentContextDirective) +Directive providing type information for chat attachment template contexts. +Use this directive on ng-template elements that render message attachments. + +- **constructor**(): IgxChatAttachmentContextDirective +- static **ngTemplateContextGuard**(_: IgxChatAttachmentContextDirective, ctx: unknown): ctx + +### [IgxChatComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChatComponent) +Angular wrapper component for the Ignite UI Web Components Chat component. + +This component provides an Angular-friendly interface to the igc-chat web component, +including support for Angular templates, signals, and change detection. + +Uses OnPush change detection strategy for optimal performance. All inputs are signals, +so changes are automatically tracked and propagated to the underlying web component. + +- **constructor**(): IgxChatComponent +- readonly **attachmentClick**: `OutputEmitterRef` — Emitted when an attachment is clicked +- readonly **attachmentDrag**: `OutputEmitterRef` — Emitted when attachment drag starts +- readonly **attachmentDrop**: `OutputEmitterRef` — Emitted when attachment is dropped +- readonly **draftMessage**: `InputSignal` — Draft message with text and optional attachments +- readonly **inputBlur**: `OutputEmitterRef` — Emitted when the input loses focus +- readonly **inputChange**: `OutputEmitterRef` — Emitted when the input value changes +- readonly **inputFocus**: `OutputEmitterRef` — Emitted when the input receives focus +- readonly **messageCreated**: `OutputEmitterRef` — Emitted when a new message is created +- readonly **messageReact**: `OutputEmitterRef` — Emitted when a user reacts to a message +- readonly **messages**: `InputSignal` — Array of chat messages to display +- readonly **options**: `InputSignal` — Configuration options for the chat component +- readonly **templates**: `InputSignal` — Custom templates for rendering chat elements +- readonly **typingChange**: `OutputEmitterRef` — Emitted when typing indicator state changes +- **ngOnDestroy**(): void +- **ngOnInit**(): void + +### [IgxChatInputContextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChatInputContextDirective) +Directive providing type information for chat input template contexts. +Use this directive on ng-template elements that render the chat input. + +- **constructor**(): IgxChatInputContextDirective +- static **ngTemplateContextGuard**(_: IgxChatInputContextDirective, ctx: unknown): ctx + +### [IgxChatMessageContextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChatMessageContextDirective) +Directive providing type information for chat message template contexts. +Use this directive on ng-template elements that render chat messages. + +- **constructor**(): IgxChatMessageContextDirective +- static **ngTemplateContextGuard**(_: IgxChatMessageContextDirective, ctx: unknown): ctx + +### [IgxCheckboxComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCheckboxComponent) +Allows users to make a binary choice for a certain condition. + +- **constructor**(): IgxCheckboxComponent +- **cssClass**: `string` — Returns the class of the checkbox component. +- **disabled**: `boolean` — Sets/gets whether the checkbox is disabled. +Default value is false. +- **disableTransitions**: `boolean` — Sets/gets whether the checkbox should disable all css transitions. +Default value is false. +- **focused**: `boolean` — Sets/gets whether the checkbox component is on focus. +Default value is false. +- **indeterminate**: `boolean` — Sets/gets the checkbox indeterminate visual state. +Default value is false; +- **invalid**: `boolean` — Sets/gets whether the checkbox is invalid. +Default value is false. +- **readonly**: `boolean` — Sets/gets whether the checkbox is readonly. +Default value is false. +- **checked**: `boolean` + +### [IgxChipComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChipComponent) +Chip is compact visual component that displays information in an obround. + +- **constructor**(): IgxChipComponent +- **animateOnRelease**: `boolean` — Enables/disables the draggable element animation when the element is released. +By default it's set to true. +- **cdr**: `ChangeDetectorRef` +- **chipClick**: `EventEmitter` — Emits an event when the chip is clicked. +Returns the clicked chip, whether the event should be canceled. +- **data**: `any` — Stores data related to the chip. +- **disabled**: `boolean` — Disables the chip. When disabled it restricts user interactions +like focusing on click or tab, selection on click or Space, dragging. +By default it is set to false. +- **document**: `Document` +- **dragDirective**: `IgxDragDirective` — Property that contains a reference to the drag the chip uses for dragging behavior. +- **dragDrop**: `EventEmitter` — Emits an event when the chip has been dropped in the chips area. +Returns the target chip, the drag chip, as well as +the original drop event arguments. +- **dragEnter**: `EventEmitter` — Emits an event when the chip has entered the chips area. +Returns the target chip, the drag chip, as well as +the original drop event arguments. +- **draggable**: `boolean` — Defines if the chip can be dragged in order to change it's position. +By default it is set to false. +- **dragLeave**: `EventEmitter` — Emits an event when the chip has left the chips area. +Returns the target chip, the drag chip, as well as +the original drop event arguments. +- **dragOver**: `EventEmitter` — Emits an event when the chip is over the chips area. +Returns the target chip, the drag chip, as well as +the original drop event arguments. +- **hideBaseOnDrag**: `boolean` — Enables/disables the hiding of the base element that has been dragged. +By default it's set to true. +- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated. +- **keyDown**: `EventEmitter` — Emits an event when the chip keyboard navigation is being used. +Returns the focused/selected chip, whether the event should be canceled, +if the alt, shift or control key is pressed and the pressed key name. +- **moveEnd**: `EventEmitter` — Emits an event when the chip moving ends. +Returns the moved chip. +- **moveStart**: `EventEmitter` — Emits an event when the chip moving starts. +Returns the moving chip. +- **removable**: `boolean` — Defines if the chip should render remove button and throw remove events. +By default it is set to false. +- **remove**: `EventEmitter` — Emits an event when the chip is removed. +Returns the removed chip. +- **removeIcon**: `TemplateRef` — Overrides the default icon that the chip applies to the remove button. +- **role**: `string` — Returns the role attribute of the chip. +- **selectable**: `boolean` — Defines if the chip can be selected on click or through navigation, +By default it is set to false. +- **selectedChanged**: `EventEmitter` — Emits event when the chip is selected/deselected and any related animations and transitions also end. +- **selectedChanging**: `EventEmitter` — Emits event when the chip is selected/deselected. +Returns the selected chip reference, whether the event should be canceled, what is the next selection state and +when the event is triggered by interaction originalEvent is provided, otherwise originalEvent is null. +- **selectIcon**: `TemplateRef` — Overrides the default icon that the chip applies when it is selected. +- **variant**: `IgxChipTypeVariant` — Sets/gets the variant of the chip. +- **color**: `any` — Returns the background color of the chip. +- **resourceStrings**: `IChipResourceStrings` — An accessor that returns the resource strings. +- **selected**: `boolean` — Returns if the chip is selected. +- **tabIndex**: `number` +- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. +- **ngOnInit**(): void — A callback method that is invoked immediately after the +default change detector has checked the directive's +data-bound properties for the first time, +and before any of the view or content children have been checked. +It is invoked only once when the directive is instantiated. +- **onRemoveMouseDown**(event: PointerEvent | MouseEvent): void +- **onSelectTransitionDone**(event: any): void + +### [IgxChipsAreaComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxChipsAreaComponent) +The chip area allows you to perform more complex scenarios with chips that require interaction, +like dragging, selection, navigation, etc. + +- **constructor**(): IgxChipsAreaComponent +- **ariaLabel**: `string` — Returns the aria-label attribute of the chips area. +- **cdr**: `ChangeDetectorRef` +- **chipsList**: `QueryList` — Holds the chip in the chips area. +- **element**: `ElementRef` +- **height**: `number` — Sets the height of the chips area. +- **moveEnd**: `EventEmitter` — Emits an event after an chip in the chips area is moved. +- **moveStart**: `EventEmitter` — Emits an event when an chip in the chips area is moved. +- **reorder**: `EventEmitter` — Emits an event when chips in the chips area should be reordered. +Returns an array of chips. +- **role**: `string` — Returns the role attribute of the chips area. +- **selectionChange**: `EventEmitter` — Emits an event when an chip in the chips area is selected/deselected. +Fired after the chips area is initialized if there are initially selected chips as well. +Returns an array of selected chips and the chip area. +- **width**: `number` — Sets the width of the chips area. + +### [IgxCircularProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCircularProgressBarComponent) + +- **constructor**(): IgxCircularProgressBarComponent +- **gradientTemplate**: `IgxProgressBarGradientDirective` +- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated. + +- **textTemplate**: `IgxProgressBarTextTemplateDirective` +- **textVisibility**: `boolean` — Sets the text visibility. By default, it is set to true. + +- **type**: `string` — Set type of the circular progress bar. Possible options - default, success, info, warning, and error. + +- **ngAfterContentInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of all of the directive's +content. +It is invoked only once when the directive is instantiated. + +### [IgxCollapsibleIndicatorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCollapsibleIndicatorTemplateDirective) + +- **constructor**(): IgxCollapsibleIndicatorTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxCollapsibleIndicatorTemplateDirective, context: unknown): context + +### [IgxColumnActionsBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnActionsBaseDirective) + +- **constructor**(): IgxColumnActionsBaseDirective + +### [IgxColumnActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnActionsComponent) +Providing reference to column actions: + @ViewChild('columnActions', { read: IgxColumnActionsComponent }) + public columnActions: IgxColumnActionsComponent; + +- **constructor**(): IgxColumnActionsComponent +- **columnItems**: `QueryList` — Gets the checkbox components representing column items currently present in the dropdown +- **columnsAreaMaxHeight**: `string` — Gets/sets the max height of the columns area. +- **columnToggled**: `EventEmitter` — 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. + +- **cssClass**: `string` — Sets/Gets the css class selector. +By default the value of the class attribute is "igx-column-actions". +let cssCLass = this.columnHidingUI.cssClass; + +this.columnHidingUI.cssClass = 'column-chooser'; +- **grid**: `GridType` — Gets/Sets the grid to provide column actions for. +- **hideFilter**: `boolean` — Shows/hides the columns filtering input from the UI. +- **indentation**: `number` — Gets/sets the indentation of columns in the column list based on their hierarchy level. +- **title**: `string` — Gets/sets the title of the column actions component. +- **checkAllText**: `string` — Gets the text of the button that checks all columns. +- **columnDisplayOrder**: `ColumnDisplayOrder` — Gets the display order of the columns. +- **filterColumnsPrompt**: `string` — Gets the prompt that is displayed in the filter input. +- **filterCriteria**: `string` — Gets the value which filters the columns list. +- **id**: `string` — Gets/Sets the value of the id attribute. +- **uncheckAllText**: `string` — Gets the text of the button that unchecks all columns. +- **checkAllColumns**(): void — Checks all columns and performs the appropriate action. +- **uncheckAllColumns**(): void — Unchecks all columns and performs the appropriate action. + +### [IgxColumnComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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**(): IgxColumnComponent +- **additionalTemplateContext**: `any` — Sets/gets custom properties provided in additional template context. + + + + {{ props }} + + +- **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; + + +- **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 }; + + + +- **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' +} + + +- **children**: `QueryList` — Sets/gets the children columns. +let columnChildren = this.column.children; +- **colEnd**: `number` — Column index where the current field should end. +The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field + + + +- **colStart**: `number` — Column index from which the field is starting. + + + +- **dataType**: `GridColumnDataType` — Sets/gets the data type of the column values. +Default value is string. +let columnDataType = this.column.dataType; + + +- **disableHiding**: `boolean` — Gets whether the hiding is disabled. +let isHidingDisabled = this.column.disableHiding; +- **disablePinning**: `boolean` — Gets whether the pinning is disabled. +let isPinningDisabled = this.column.disablePinning; +- **expandedChange**: `EventEmitter` — Emitted when the column expanded or collapsed. + + + +- **filterable**: `boolean` — Sets/gets whether the column is filterable. +Default value is true. +let isFilterable = this.column.filterable; + + +- **filteringIgnoreCase**: `boolean` — Sets/gets whether the column filtering should be case sensitive. +Default value is true. +let filteringIgnoreCase = this.column.filteringIgnoreCase; + + +- **formatter**: `any` — Applies display format to cell values in the column. Does not modify the underlying data. +- **grid**: `GridType` — Represents the instance of the parent GridType that contains this column. +- **header**: `string` — Sets/gets the header value. +let columnHeader = this.column.header; + + +- **headerClasses**: `string` — Sets/gets the class selector of the column header. +let columnHeaderClass = this.column.headerClasses; + + +- **headerGroupClasses**: `string` — Sets/gets the class selector of the column group header. +let columnHeaderClass = this.column.headerGroupClasses; + + +- **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' +} + + +- **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' +} + + +- **hiddenChange**: `EventEmitter` — Emitted when the column is hidden or shown. + + + +- **parent**: `ColumnType` — Sets/gets the parent column. +let parentColumn = this.column.parent; + +this.column.parent = higherLevelColumn; +- **pinnedChange**: `EventEmitter` — Emitted when the column is pinned/unpinned. + + + +- **resizable**: `boolean` — Sets/gets whether the column is resizable. +Default value is false. +let isResizable = this.column.resizable; + + +- **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 + + + +- **rowStart**: `number` — Row index from which the field is starting. + + + +- **searchable**: `boolean` — Sets/gets whether the column is searchable. +Default value is true. +let isSearchable = this.column.searchable'; + + +- **sortable**: `boolean` — Sets/gets whether the column is sortable. +Default value is false. +let isSortable = this.column.sortable; + + +- **sortingIgnoreCase**: `boolean` — Sets/gets whether the column sorting should be case sensitive. +Default value is true. +let sortingIgnoreCase = this.column.sortingIgnoreCase; + + +- **summaryFormatter**: `any` — The summaryFormatter is used to format the display of the column summaries. + +In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter +to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers. + +columnInit(column: IgxColumnComponent) { + if (column.field == "OrderDate") { + column.summaryFormatter = this.summaryFormat; + } +} + +summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { + const result = summary.summaryResult; + if(summaryResult.key !== 'count' && result !== null && result !== undefined) { + const pipe = new DatePipe('fr-FR'); + return pipe.transform(result,'mediumDate'); + } + return result; +} +- **title**: `string` — Sets/gets the title value. +let title = this.column.title; + + +- **widthChange**: `EventEmitter` — Emitted when the column width changes. + + + +- **bodyTemplate**: `TemplateRef` — Returns a reference to the bodyTemplate. +let bodyTemplate = this.column.bodyTemplate; +- **childColumns**: `ColumnType[]` — A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. +- **collapsible**: `boolean` — Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation +- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns. +- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout. +let columnGroup = this.column.columnGroup; +- **columnLayoutChild**: `boolean` — Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout. +let columnLayoutChild = this.column.columnLayoutChild; +- **disabledSummaries**: `string[]` — Sets/gets the summary operands to exclude from display. +Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc. +let disabledSummaries = this.column.disabledSummaries; + + +- **editable**: `boolean` — Indicated whether the column can be edited. If the value is true, the column can be edited +- **editorOptions**: `IColumnEditorOptions` — Sets properties on the default column editors +- **errorTemplate**: `TemplateRef` — Returns a reference to the validation error template. +let errorTemplate = this.column.errorTemplate; +- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded +- **field**: `string` — The internal field name, used in expressions and queries. +- **filterCellTemplate**: `TemplateRef` — Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **filteringExpressionsTree**: `FilteringExpressionsTree` — The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. +- **filters**: `IgxFilteringOperand` — Optional filtering operands that apply to this field. +- **groupable**: `boolean` — Indicates whether a column can be put in a group. If the value is true, the column can be put in a group +- **groupingComparer**: `any` — Represents a method with custom grouping comparator to determine the members of the group. +- **hasSummary**: `boolean` — Gets a value indicating whether the summary for the column is enabled. +let hasSummary = this.column.hasSummary; +- **headerTemplate**: `TemplateRef` — The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible +- **index**: `number` — The index of the column within the grid. +Includes the hidden columns when counting +- **inlineEditorTemplate**: `TemplateRef` — The template reference for the custom inline editor of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **level**: `number` — Represents the hierarchical level of the column in the column layout +- **maxWidth**: `string` +- **merge**: `boolean` — Sets/gets whether to merge cells in this column. + +- **mergingComparer**: `any` — Gets the function that compares values for merging. +let mergingComparer = this.column.mergingComparer' +- **minWidth**: `string` +- **pinned**: `boolean` — Indicates if the column is currently pinned. If the value is true, the column is pinned +- **pinningPosition**: `ColumnPinningPosition` — Gets the pinning position of the column. +let pinningPosition = this.column.pinningPosition; +- **pipeArgs**: `IColumnPipeArgs` — Optional arguments for any pipe applied to the field. +- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected +- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected +- **sortStrategy**: `ISortingStrategy` — The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions +- **summaries**: `any` — Gets the column summaries. +let columnSummaries = this.column.summaries; +- **summaryTemplate**: `TemplateRef` — The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **topLevelParent**: `ColumnType` — Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent +- **visibleIndex**: `number` — The index of the column within the grid. +Does not include the hidden columns when counting +- **visibleWhenCollapsed**: `boolean` +- **width**: `string` — Gets the width of the column. +let columnWidth = this.column.width; +- **autosize**(byHeaderOnly: boolean): void — Autosize the column to the longest currently visible cell value, including the header cell. +@ViewChild('grid') grid: IgxGridComponent; +let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; +column.autosize(); +- **move**(index: number): void — Moves a column to the specified visible index. +If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. +If passed index would move the column to a different column group. moving is not performed. +- **pin**(index?: number, pinningPosition?: ColumnPinningPosition): boolean — Pins the column in the specified position at the provided index in that 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 +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/22.0.0/classes/IgxColumnEmailValidatorDirective) + +- **constructor**(): IgxColumnEmailValidatorDirective + +### [IgxColumnFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnFormatterPipe) + +- **constructor**(): IgxColumnFormatterPipe +- **transform**(value: any, formatter: any, rowData: any, columnData?: any): any + +### [IgxColumnGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnGroupComponent) +**Ignite UI for Angular Column Group** + +- **constructor**(): IgxColumnGroupComponent +- **children**: `QueryList` +- **collapsibleIndicatorTemplate**: `TemplateRef` — 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; + + +- **childColumns**: `ColumnType[]` — A list containing all the child columns under this column (if any). +Empty without children or if this column is not Group or Layout. +- **collapsible**: `boolean` — Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation +- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns. +- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout. +let columnGroup = this.column.columnGroup; +- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded +- **filters**: `any` — Optional filtering operands that apply to this field. +- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible +- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected +- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected +- **summaries**: `any` — Gets the column group summaries. +let columnGroupSummaries = this.columnGroup.summaries; +- **width**: `string` — Gets the width of the column group. +let columnGroupWidth = this.columnGroup.width; + +### [IgxColumnHidingDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnHidingDirective) + +- **constructor**(): IgxColumnHidingDirective + +### [IgxColumnLayoutComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnLayoutComponent) +Column layout for declaration of Multi-row Layout + +- **constructor**(): IgxColumnLayoutComponent +- **columnLayout**: `boolean` — Returns a boolean indicating if the column is a ColumnLayout for multi-row layout. +let columnGroup = this.column.columnGroup; +- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible +- **visibleIndex**: `number` — The index of the column within the grid. +Does not include the hidden columns when counting +- **width**: `any` — Gets the width of the column layout. +let columnGroupWidth = this.columnGroup.width; + +### [IgxColumnMaxLengthValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnMaxLengthValidatorDirective) + +- **constructor**(): IgxColumnMaxLengthValidatorDirective + +### [IgxColumnMaxValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnMaxValidatorDirective) + +- **constructor**(): IgxColumnMaxValidatorDirective + +### [IgxColumnMinLengthValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnMinLengthValidatorDirective) + +- **constructor**(): IgxColumnMinLengthValidatorDirective + +### [IgxColumnMinValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnMinValidatorDirective) + +- **constructor**(): IgxColumnMinValidatorDirective + +### [IgxColumnMovingDropDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnMovingDropDirective) + +- **constructor**(): IgxColumnMovingDropDirective +- **column**: `ColumnType` +- **data**: `ColumnType | IgxForOfDirective` +- **horizontalScroll**: `IgxGridForOfDirective` +- **isDropTarget**: `boolean` +- **nativeElement**: `any` + +### [IgxColumnPatternValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnPatternValidatorDirective) + +- **constructor**(): IgxColumnPatternValidatorDirective + +### [IgxColumnPinningDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnPinningDirective) + +- **constructor**(): IgxColumnPinningDirective + +### [IgxColumnRequiredValidatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxColumnRequiredValidatorDirective) + +- **constructor**(): IgxColumnRequiredValidatorDirective + +### [IgxComboAddItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxComboAddItemDirective) +Defines the custom template that will be used to display the ADD button + +- **constructor**(): IgxComboAddItemDirective + +### [IgxComboBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxComboBaseDirective) + +- **constructor**(): IgxComboBaseDirective +- **addItemTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.addItemTemplate = myCustomTemplate; + + + + ... + + + + +- **addition**: `EventEmitter` — Emitted when an item is being added to the data collection + + +- **allowCustomValues**: `boolean` — Controls whether custom values can be added to the collection + +// get +let comboAllowsCustomValues = this.combo.allowCustomValues; + + + + +- **ariaLabelledBy**: `string` — Sets aria-labelledby attribute value. + +- **clearIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the combo CLEAR button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.clearIconTemplate = myCustomTemplate; + + + + ... + + clear + + +- **closed**: `EventEmitter` — Emitted after the dropdown is closed + + +- **closing**: `EventEmitter` — Emitted before the dropdown is closed + + +- **dataPreLoad**: `EventEmitter` — Emitted when new chunk of data is loaded from the virtualization + + +- **disableClear**: `boolean` — Disables the clear button. The default is false. + +// get +let myComboDisableClear = this.combo.disableClear; + + + + +- **disabled**: `boolean` — Disables the combo. The default is false. + +- **document**: `Document` +- **dropdown**: `IgxComboDropDownComponent` +- **emptyTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.emptyTemplate = myCustomTemplate; + + + + ... + +
+ There are no items to display +
+ + +- **filterFunction**: `any` — Gets/Sets the custom filtering function of the combo. +- **footerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the FOOTER for the combo items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.footerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom footer +
+ + +- **headerItemTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.headerItemTemplate = myCustomTemplate; + + + + ... + +
Group header for {{ item[key] }}
+ + +- **headerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the HEADER for the combo items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.headerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom header +
+ + +- **itemsWidth**: `string` — Configures the drop down list width + +// get +let myComboItemsWidth = this.combo.itemsWidth; + + + + +- **itemTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering ITEMS in the combo list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.itemTemplate = myCustomTemplate; + + + + ... + +
+
{{ item[key] }}
+
{{ item.cost }}
+
+ + +- **opened**: `EventEmitter` — Emitted after the dropdown is opened + + +- **opening**: `EventEmitter` — Emitted before the dropdown is opened + + +- **overlaySettings**: `OverlaySettings` — Set custom overlay settings that control how the combo's list of items is displayed. +Set: + + + + const customSettings = { positionStrategy: { settings: { target: myTarget } } }; + combo.overlaySettings = customSettings; + +Get any custom overlay settings used by the combo: + const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings; +- **placeholder**: `string` — Defines the placeholder value for the combo value field + +// get +let myComboPlaceholder = this.combo.placeholder; + + + + +- **searchInputUpdate**: `EventEmitter` — Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) + + +- **selectionChanged**: `EventEmitter` +- **selectionChanging**: `EventEmitter` +- **showSearchCaseIcon**: `boolean` — Defines whether the caseSensitive icon should be shown in the search input + +// get +let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; + + + + +- **toggleIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.combo.toggleIconTemplate = myCustomTemplate; + + + + ... + + {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} + + +- **valueKey**: `string` — Determines which column in the data source is used to determine the value. + +// get +let myComboValueKey = this.combo.valueKey; + + + + +- **width**: `string` — Sets the style width of the element + +// get +let myComboWidth = this.combo.width; + + + + +- **collapsed**: `boolean` — Gets drop down state. + +let state = this.combo.collapsed; +- **data**: `any[]` — Combo data source. + + + +- **disableFiltering**: `boolean` — Enables/disables filtering in the list. The default is false. +- **displayKey**: `string` — Determines which column in the data source is used to determine the display value. + +// get +let myComboDisplayKey = this.combo.displayKey; + +// set +this.combo.displayKey = 'val'; + + + + + +- **displayValue**: `string` — The text displayed in the combo input + +// get +let comboDisplayValue = this.combo.displayValue; +- **filteredData**: `any[]` +- **filteringOptions**: `IComboFilteringOptions` — Configures the way combo items will be filtered. + +// get +let myFilteringOptions = this.combo.filteringOptions; + + + + +- **groupKey**: `string` — The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[]. + +// get +let currentGroupKey = this.combo.groupKey; +- **groupSortingDirection**: `SortingDirection` — Sets groups sorting order. +- **id**: `string` — Gets/gets combo id. + +// get +let id = this.combo.id; + + + + +- **itemHeight**: `number` — Configures the drop down list item height + +// get +let myComboItemHeight = this.combo.itemHeight; + + + + +- **itemsMaxHeight**: `number` — Configures the drop down list height + +// get +let myComboItemsMaxHeight = this.combo.itemsMaxHeight; + + + + +- **resourceStrings**: `IComboResourceStrings` — Gets/Sets the resource strings. +- **searchValue**: `string` +- **selection**: `any[]` — Get current selection state +- **totalItemCount**: `number` — Gets total count of the virtual data items, when using remote service. + +// get +let count = this.combo.totalItemCount; +- **type**: `IgxInputGroupType` — Sets the visual combo type. +The allowed values are line, box, border and search. The default is box. + +- **valid**: `IgxInputState` — Gets if control is valid, when used in a form + +// get +let valid = this.combo.valid; +- **value**: `any[]` — The value of the combo + +// get +let comboValue = this.combo.value; +- **virtualizationState**: `IForOfState` — Defines the current state of the virtualized data. It contains startIndex and chunkSize + +// get +let state = this.combo.virtualizationState; +- **close**(): void — A method that closes the combo. + + + +- **deselect**(args: any | [items, event]): void +- **focusSearchInput**(opening?: boolean): any +- **handleOpened**(): any +- **ngAfterViewChecked**(): void — A callback method that is invoked immediately after the +default change detector has completed one change-check cycle +for a component's view. +- **onArrowDown**(event: Event): any +- **open**(): void — A method that opens the combo. + + + +- **select**(newItem: any): void +- **select**(newItems: any, clearCurrentSelection?: boolean, event?: Event): void +- **toggle**(): void — A method that opens/closes the combo. + + + +- **triggerCheck**(): void — Triggers change detection on the combo view +- **writeValue**(value: any): void + +### [IgxComboClearIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxComboComponent) +Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list. + +- **constructor**(): IgxComboComponent +- **autoFocusSearch**: `boolean` — Whether the combo's search box should be focused after the dropdown is opened. +When false, the combo's list item container will be focused instead +- **searchPlaceholder**: `string` — Defines the placeholder value for the combo dropdown search field +- **selectionChanged**: `EventEmitter` — Emitted when item selection is changed, after the selection completes + + +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **deselect**(items: any[], event?: Event): void — Deselect defined items +- **deselectAllItems**(ignoreFilter?: boolean, event?: Event): void — Deselect all (filtered) items +- **onArrowDown**(event: Event): void +- **onEscape**(event: Event): void +- **select**(newItems: any[], clearCurrentSelection?: boolean, event?: Event): void — Select defined items +- **selectAllItems**(ignoreFilter?: boolean, event?: Event): void — Select all (filtered) items +- **setSelectedItem**(itemID: any, select: boolean, event?: Event): void — Selects/Deselects a single item + +### [IgxComboEmptyDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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 grid. + +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` — This event is emitted when the export process finishes. +this.exporterService.exportEnded.subscribe((args: ICsvExportEndedEventArgs) => { +// put event handler code here +}); + +### [IgxCSVTextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCSVTextDirective) + +- **constructor**(): IgxCSVTextDirective + +### [IgxCurrencyFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxCurrencyFormatterPipe) + +- **constructor**(): IgxCurrencyFormatterPipe +- **transform**(value: string | number, currencyCode?: string, display?: string, digitsInfo?: string, locale?: string): string + +### [IgxDataLoadingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDataLoadingTemplateDirective) + +- **constructor**(): IgxDataLoadingTemplateDirective +- **template**: `TemplateRef` + +### [IgxDataRecordSorting](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDataRecordSorting) +Represents a class extending the sorting class +Provides custom data record sorting. + +- **constructor**(): IgxDataRecordSorting + +### [IgxDateFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateFilteringOperand) +Provides filtering operations for Dates + + +### [IgxDateFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateFormatterPipe) + +- **constructor**(): IgxDateFormatterPipe +- **transform**(value: string | number | Date, format?: string, timezone?: string, locale?: string): string + +### [IgxDatePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDatePickerComponent) +Date Picker displays a popup calendar that lets users select a single date. + +- **constructor**(): IgxDatePickerComponent +- **calendarFormat**: `IFormattingOptions` — Gets/Sets the format options of the date picker. +- **cancelButtonLabel**: `string` — Gets/Sets the cancel button's label. +- **displayMonthsCount**: `number` — Gets/Sets the number of month views displayed. +- **formatter**: `any` — Gets/Sets a custom formatter function on the selected or passed date. +- **formatViews**: `IFormattingViews` — Gets/Sets the format views of the date picker. +- **hideOutsideDays**: `boolean` — Gets/Sets whether the inactive dates will be hidden. +- **id**: `string` — Gets/Sets the value of id attribute. +- **orientation**: `PickerCalendarOrientation` — Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view. +- **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` — 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` — Emitted when the user types/spins invalid date in the date-picker editor. +- **valueChange**: `EventEmitter` — Emitted when the picker's value changes. +- **activeDate**: `Date` — Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date, or the value of the picker, if set. +- **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/22.0.0/classes/IgxDateRangeEndComponent) +Defines the end input for a date range picker + +- **constructor**(): IgxDateRangeEndComponent + +### [IgxDateRangePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateRangePickerComponent) +Provides the ability to select a range of dates from a calendar UI or editable inputs. + +- **constructor**(): IgxDateRangePickerComponent +- **customRanges**: `CustomDateRange[]` — Custom ranges rendered as chips. +- **formatter**: `any` — A custom formatter function, applied on the selected or passed in date. +- **hideOutsideDays**: `boolean` — Gets/Sets whether dates that are not part of the current month will be displayed. +- **hint**: `IgxHintDirective` +- **label**: `IgxLabelDirective` +- **orientation**: `PickerCalendarOrientation` — Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view. +- **overlaySettings**: `OverlaySettings` — Custom overlay settings that should be used to display the calendar. +- **pickerActions**: `IgxPickerActionsDirective` +- **placeholder**: `string` — Sets the placeholder for single-input date range picker. +- **showWeekNumbers**: `boolean` — Show/hide week numbers +- **usePredefinedRanges**: `boolean` — Whether to render built-in predefined ranges. +- **valueChange**: `EventEmitter` +- **activeDate**: `Date` — Gets/Sets the date which is shown in the calendar picker and is highlighted. +By default it is the current date, or the value of the picker, if set. +- **cancelButtonText**: `string` +- **collapsed**: `boolean` — Gets calendar state. + +let state = this.dateRange.collapsed; +- **disabledDates**: `DateRangeDescriptor[]` — Gets/Sets the disabled dates descriptors. +- **displayFormat**: `string` — The format used to display the picker's value when it's not being edited. +- **displayMonthsCount**: `number` — The number of displayed month views. +- **doneButtonText**: `string` +- **inputFormat**: `string` — The editor's input mask. +- **locale**: `string` — Gets the locale of the date-range-picker. +If not set, defaults to application's locale. +- **maxValue**: `string | Date` +- **minValue**: `string | Date` +- **resourceStrings**: `IDateRangePickerResourceStrings` — An accessor that returns the resource strings. +- **specialDates**: `DateRangeDescriptor[]` — Gets/Sets the special dates descriptors. +- **value**: `DateRange` — The currently selected value / range from the calendar +- **clear**(): void — Clears the input field(s) and the picker's value. +- **close**(): void — Closes the date range picker's dropdown or dialog. +- **open**(overlaySettings?: OverlaySettings): void — Opens the date range picker's dropdown or dialog. +- **select**(startDate: Date, endDate?: Date): void — Selects a range of dates. If no endDate is passed, range is 1 day (only startDate) +- **toggle**(overlaySettings?: OverlaySettings): void — Toggles the date range picker's dropdown or dialog + +### [IgxDateRangeSeparatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateRangeSeparatorDirective) +Replaces the default separator to with the provided value + +- **constructor**(): IgxDateRangeSeparatorDirective + +### [IgxDateRangeStartComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateRangeStartComponent) +Defines the start input for a date range picker + +- **constructor**(): IgxDateRangeStartComponent + +### [IgxDateSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateSummaryOperand) + +- **constructor**(): IgxDateSummaryOperand +- **operate**(data: any[], allData: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static methods and returns summary result[]. +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/22.0.0/classes/IgxDateTimeEditorDirective) +Date Time Editor provides a functionality to input, edit and format date and time. + +- **constructor**(): IgxDateTimeEditorDirective +- **defaultFormatType**: `"time" | "date" | "dateTime"` — Specify the default input format type. Defaults to date, which includes +only date parts for editing. Other valid options are time and dateTime. +- **locale**: `string` — Locale settings used for value formatting. +- **spinDelta**: `DatePartDeltas` — Delta values used to increment or decrement each editor date part on spin actions. +All values default to 1. +- **spinLoop**: `boolean` — Specify if the currently spun date segment should loop over. +- **validationFailed**: `EventEmitter` — Emitted when the editor is not within a specified range or when the editor's value is in an invalid state. +- **valueChange**: `EventEmitter` — Emitted when the editor's value has changed. +- **displayFormat**: `string` +- **inputFormat**: `string` +- **maxValue**: `string | Date` — Maximum value required for the editor to remain valid. +- **minValue**: `string | Date` — Minimum value required for the editor to remain valid. +- **value**: `string | Date` +- **clear**(): void — Clear the input element value. +- **decrement**(datePart?: DatePart, delta?: number): void — Decrement specified DatePart. +- **increment**(datePart?: DatePart, delta?: number): void — Increment specified DatePart. +- **onWheel**(event: WheelEvent): void + +### [IgxDateTimeFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDateTimeFilteringOperand) + + +### [IgxDaysViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDaysViewComponent) + +- **cdr**: `ChangeDetectorRef` +- **defaultClass**: `boolean` +- **id**: `string` — Sets/gets the id of the days view. +If not set, the id will have value "igx-days-view-0". + + +let daysViewId = this.daysView.id; +- **role**: `string` +- **showWeekNumbers**: `boolean` — Show/hide week numbers +- **tabIndex**: `number` +- readonly **viewClass**: `true` +- **activeDate**: `Date` +- **hideLeadingDays**: `boolean` +- **hideTrailingDays**: `boolean` +- **previewRangeDate**: `Date` +- **showActiveDay**: `boolean` +- **standalone**: `boolean` +- **ngAfterContentChecked**(): void — A callback method that is invoked immediately after the +default change detector has completed checking all of the directive's +content. + +### [IgxDefaultDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDefaultDropStrategy) + +- **constructor**(): IgxDefaultDropStrategy +- **dropAction**(_drag: IgxDragDirective, _drop: IgxDropDirective, _atIndex: number): void + +### [IgxDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + +
+ + + + +
+
+ + + + +
+ + +- **constructor**(): IgxDialogComponent +- **closed**: `EventEmitter` — An event that is emitted after the dialog is closed. + + +- **closing**: `EventEmitter` — An event that is emitted before the dialog is closed. + + +- **focusTrap**: `boolean` — Set whether the Tab key focus is trapped within the dialog when opened. +Defaults to true. + +- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated. + + +- **leftButtonLabel**: `string` — Sets the label of the left button of the dialog. + +- **leftButtonRipple**: `string` — Sets the left button ripple. The ripple animates a click/tap to a component as a series of fading waves. +The property accepts all valid CSS color property values. + +- **leftButtonSelect**: `EventEmitter` — An event that is emitted when the left button is clicked. + + +- **leftButtonType**: `IgxButtonType` — Sets the left button type. The types are flat, contained and fab. +The flat type button is a rectangle and doesn't have a shadow.
+The contained type button is also a rectangle but has a shadow.
+The fab type button is a circle with a shadow.
+The default value is flat. + +- **message**: `string` — Sets the message text of the dialog. + +- **opened**: `EventEmitter` — An event that is emitted after the dialog is opened. + + +- **opening**: `EventEmitter` — An event that is emitted before the dialog is opened. + + +- **rightButtonLabel**: `string` — Sets the label of the right button of the dialog. + +- **rightButtonRipple**: `string` — Sets the right button ripple. + +- **rightButtonSelect**: `EventEmitter` — An event that is emitted when the right button is clicked. + + +- **rightButtonType**: `IgxButtonType` — Sets the right button type. The types are flat, contained and fab. +The flat type button is a rectangle and doesn't have a shadow.
+The contained type button is also a rectangle but has a shadow.
+The fab type button is a circle with a shadow.
+The default value is flat. + +- **title**: `string` — Sets the title of the dialog. + +- **toggleRef**: `IgxToggleDirective` +- **closeOnEscape**: `boolean` — Controls whether the dialog should close when Esc key is pressed. Defaults to true + +- **closeOnOutsideSelect**: `boolean` — Gets/Sets whether the dialog should close on click outside the component. By default it's false. + + +- **isCollapsed**: `boolean` +- **isModal**: `boolean` — Controls whether the dialog should be shown as modal. Defaults to true + +- **isOpen**: `boolean` — State of the dialog. + +// get +let dialogIsOpen = this.dialog.isOpen; + + + + + + +Two-way data binding. + + +- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the dialog. +@ViewChild('alert', { static: true }) public alert: IgxDialogComponent; +let currentPosition: PositionSettings = this.alert.positionSettings +- **role**: `"dialog" | "alertdialog" | "alert"` — Returns the value of the role of the dialog. The valid values are dialog, alertdialog, alert. +@ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogRole = this.dialog.role; +} +- **state**: `string` — Returns the value of state. Possible state values are "open" or "close". +@ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogState = this.dialog.state; +} +- **titleId**: `string` — Returns the value of the title id. + @ViewChild("MyDialog") +public dialog: IgxDialogComponent; +ngAfterViewInit() { + let dialogTitle = this.dialog.titleId; +} +- **close**(): void — A method that that closes the dialog. +- **ngAfterContentInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of all of the directive's +content. +It is invoked only once when the directive is instantiated. +- **open**(overlaySettings: OverlaySettings): void — A method that opens the dialog. +- **toggle**(): void — A method that opens/closes the dialog. + +### [IgxDividerDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDividerDirective) + +- **constructor**(): IgxDividerDirective +- **id**: `string` — Sets/gets the id of the divider. +If not set, id will have value "igx-divider-0"; + + +let dividerId = this.divider.id; +- **middle**: `boolean` — If set to true and an inset value has been provided, +the divider will start shrinking from both ends. + +- **role**: `string` — Sets the value of role attribute. +If not the default value of separator will be used. +- **type**: `string` — Sets the type of the divider. The default value +is default. The divider can also be dashed; + +- **vertical**: `boolean` — Sets the divider in vertical orientation. + +- **inset**: `string` — Gets the current divider inset in terms of +inset-inline-start representation as applied to the divider. +const inset = this.divider.inset; +- **isDashed**: `boolean` +- **isSolid**: `boolean` — A getter that returns true if the type of the divider is default; +const isDefault = this.divider.isDefault; + +### [IgxDragDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDragDirective) + +- **constructor**(): IgxDragDirective +- **cdr**: `ChangeDetectorRef` +- **dragChannel**: `string | number | string[] | number[]` — A property that provides a way for igxDrag and igxDrop to be linked through channels. +It accepts single value or an array of values and evaluates then using strict equality. +
+ 95 +
+
+ Numbers drop area! +
+- **dragClick**: `EventEmitter` — Event triggered when the draggable element is clicked. +
+ Drag Me! +
+ +public onDragClick(){ + alert("The element has been clicked!"); +} +- **dragDirection**: `DragDirection` — Sets the directions that the element can be dragged. +By default it is set to both horizontal and vertical directions. +
+ Drag Me! +
+ +public dragDir = DragDirection.HORIZONTAL; +- **dragEnd**: `EventEmitter` — Event triggered when the draggable element is released. +
+ Drag Me! +
+ +public onDragEnd(){ + alert("The drag has ended!"); +} +- **dragMove**: `EventEmitter` — Event triggered when the draggable element has been moved. +
+ Drag Me! +
+ +public onDragMove(){ + alert("The element has moved!"); +} +- **dragStart**: `EventEmitter` — Event triggered when the draggable element drag starts. +
+ Drag Me! +
+ +public onDragStart(){ + alert("The drag has stared!"); +} +- **dragTolerance**: `number` — Sets the tolerance in pixels before drag starts. +By default the drag starts after the draggable element is moved by 5px. +
+ Drag Me! +
+- **element**: `ElementRef` +- **ghost**: `boolean` — Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead. +By default it is set to true. +If it is set to false when dragging the base element is moved instead and no ghost elements are rendered. +
+ Drag Me! +
+- **ghostClass**: `string` — Sets a custom class that will be added to the ghostElement element. +
+ Drag Me! +
+- **ghostCreate**: `EventEmitter` — Event triggered when the drag ghost element is created. +
+ Drag Me! +
+ +public ghostCreated(){ + alert("The ghost has been created!"); +} +- **ghostDestroy**: `EventEmitter` — Event triggered when the drag ghost element is created. +
+ Drag Me! +
+ +public ghostDestroyed(){ + alert("The ghost has been destroyed!"); +} +- **ghostHost**: `any` — Sets the element to which the dragged element will be appended. +By default it's set to null and the dragged element is appended to the body. +
+
+ Drag Me! +
+- **ghostStyle**: `any` — Set styles that will be added to the ghostElement element. +
+ Drag Me! +
+- **ghostTemplate**: `TemplateRef` — Specifies a template for the ghost element created when dragging starts and ghost is true. +By default a clone of the base element the igxDrag is instanced is created. +
+ Drag Me! +
+ +
+ I am being dragged! +
+ +- **renderer**: `Renderer2` +- **scrollContainer**: `HTMLElement` — Overrides the scroll container of the dragged element. By default its the window. +- **transitioned**: `EventEmitter` — Event triggered after the draggable element is released and after its animation has finished. +
+ Drag Me! +
+ +public onMoveEnd(){ + alert("The move has ended!"); +} +- **viewContainer**: `ViewContainerRef` +- **zone**: `NgZone` +- **data**: `any` +- **ghostOffsetX**: `any` +- **ghostOffsetY**: `any` +- **location**: `IgxDragLocation` — Gets the current location of the element relative to the page. +- **originLocation**: `IgxDragLocation` — Gets the original location of the element before dragging started. +- **setLocation**(newLocation: IgxDragLocation): void — Sets desired location of the base element or ghost element if rended relative to the document. +- **transitionTo**(target: ElementRef | 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/22.0.0/classes/IgxDragHandleDirective) + +- **constructor**(): IgxDragHandleDirective +- **baseClass**: `boolean` +- **element**: `ElementRef` + +### [IgxDragIgnoreDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDragIgnoreDirective) + +- **constructor**(): IgxDragIgnoreDirective +- **baseClass**: `boolean` +- **element**: `ElementRef` + +### [IgxDragLocation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDragLocation) + +- **constructor**(_pageX: any, _pageY: any): IgxDragLocation +- **pageX**: `number` +- **pageY**: `number` + +### [IgxDropDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDropDirective) + +- **constructor**(): IgxDropDirective +- **dropChannel**: `string | number | string[] | number[]` — A property that provides a way for igxDrag and igxDrop to be linked through channels. +It accepts single value or an array of values and evaluates then using strict equality. +
+ 95 +
+
+ Numbers drop area! +
+- **dropped**: `EventEmitter` — 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. +
+
+ +public dragDrop(){ + alert("A draggable element has been dropped in the chip area!"); +} +- **element**: `ElementRef` +- **enter**: `EventEmitter` — Event triggered when dragged element enters the area of the element. +
+
+ +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +- **leave**: `EventEmitter` — Event triggered when dragged element leaves the area of the element. +
+
+ +public dragLeave(){ + alert("A draggable element has left the chip area!"); +} +- **over**: `EventEmitter` — Event triggered when dragged element enters the area of the element. +
+
+ +public dragEnter(){ + alert("A draggable element has entered the chip area!"); +} +- **data**: `any` +- **dropStrategy**: `any` + +### [IgxDropDownBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDropDownBaseDirective) +An abstract class, defining a drop-down component, with: +Properties for display styles and classes +A collection items of type drop down item base +Properties and methods for navigating (highlighting/focusing) items from the collection +Properties and methods for selecting items from the collection + +- **constructor**(): IgxDropDownBaseDirective +- readonly **collapsed**: `boolean` — Gets if the dropdown is collapsed +- **document**: `Document` +- **height**: `string` — Gets/Sets the height of the drop down + +// get +let myDropDownCurrentHeight = this.dropdown.height; + + + +- **maxHeight**: `any` — Gets/Sets the drop down's container max height. + +// get +let maxHeight = this.dropdown.maxHeight; + + + +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **width**: `string` — Gets/Sets the width of the drop down + +// get +let myDropDownCurrentWidth = this.dropdown.width; + + + +- **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; + + + +- **items**: `IgxDropDownItemBaseDirective[]` — Get all non-header items + +let myDropDownItems = this.dropdown.items; +- **navigateItem**(newIndex: number): void — Navigates to the item on the specified index +- **ngOnInit**(): void — A callback method that is invoked immediately after the +default change detector has checked the directive's +data-bound properties for the first time, +and before any of the view or content children have been checked. +It is invoked only once when the directive is instantiated. +- **onItemActionKey**(key: DropDownActionKey, event?: Event): void — Keydown Handler + +### [IgxDropDownComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + {{ item.value }} + + + +- **constructor**(): IgxDropDownComponent +- **allowItemsFocus**: `boolean` — Gets/sets whether items take focus. Disabled by default. +When enabled, drop down items gain tab index and are focused when active - +this includes activating the selected item when opening the drop down and moving with keyboard navigation. + +Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive +and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events. + +// get +let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus; + + + + +- **closed**: `EventEmitter` — Emitted after the dropdown is closed + + +- **closing**: `EventEmitter` — Emitted before the dropdown is closed + + +- **labelledBy**: `string` — Sets aria-labelledby attribute value. + +- **opened**: `EventEmitter` — Emitted after the dropdown is opened + + +- **opening**: `EventEmitter` — Emitted before the dropdown is opened + + +- **role**: `string` — Gets/sets the role attribute of the drop down. Default is 'listbox'. + + +- **collapsed**: `boolean` — Gets if the dropdown is collapsed +- **id**: `string` — Gets/Sets the drop down's id + +// get +let myDropDownCurrentId = this.dropdown.id; + + + +- **listId**: `string` — Id of the internal listbox of the drop down +- **selectedItem**: `IgxDropDownItemBaseDirective` — Get currently selected item + +let currentItem = this.dropdown.selectedItem; +- **clearSelection**(): void — Clears the selection of the dropdown +this.dropdown.clearSelection(); +- **close**(event?: Event): void — Closes the dropdown + +this.dropdown.close(); +- **navigateItem**(index: number): void — Navigates to the item on the specified index +If the data in the drop-down is virtualized, pass the index of the item in the virtualized data. +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **onItemActionKey**(key: DropDownActionKey, event?: Event): void — Keydown Handler +- **open**(overlaySettings?: OverlaySettings): void — Opens the dropdown + +this.dropdown.open(); +- **setSelectedItem**(index: number): void — Select an item by index +- **toggle**(overlaySettings?: OverlaySettings): void — Toggles the dropdown + +this.dropdown.toggle(); + +### [IgxDropDownGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDropDownGroupComponent) +The is a container intended for row items in +a 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; +... + + + + + {{ item.text }} + + + + +**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'; +... + + + + ... + +- **labelledBy**: `string` + +### [IgxDropDownItemBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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**(): IgxDropDownItemBaseDirective +- **id**: `string` — Sets/gets the id of the 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; + + + + +
+ {{item.field}} +
+ +- **role**: `string` — Gets/sets the role attribute of the item. Default is 'option'. + + +- **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; + + + +
+ {{item.field}} +
+ + +**NOTE:** Drop-down items inside of a disabled drop down group will always count as disabled +- **focused**: `boolean` — Sets/gets if the given item is focused + let mySelectedItem = this.dropdown.selectedItem; + let isMyItemFocused = mySelectedItem.focused; +- **index**: `number` — The data index of the dropdown item. + +// get the data index of the selected dropdown item +let selectedItemIndex = this.dropdown.selectedItem.index +- **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 + +- **ngDoCheck**(): void — A callback method that performs change-detection, invoked +after the default change-detector has checked the directive's input +bindings in the parent template. +See KeyValueDiffers and IterableDiffers for implementing +custom change checking for collections. + +### [IgxDropDownItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDropDownItemComponent) +The is a container intended for row items in +a container. + +- **constructor**(): 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 + + +### [IgxDropDownItemNavigationDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxDropDownItemNavigationDirective) +Navigation Directive that handles keyboard events on its host and controls a targeted drop down base component + +- **constructor**(): IgxDropDownItemNavigationDirective +- **dropdown**: `IgxDropDownBaseDirective` +- **activeDescendant**: `string` +- **target**: `IgxDropDownBaseDirective` — Gets the target of the navigation directive; + +// Get +export class MyComponent { + ... + @ContentChild(IgxDropDownNavigationDirective) + navDirective: IgxDropDownNavigationDirective = null + ... + const navTarget: IgxDropDownBaseDirective = navDirective.navTarget +} +- **handleKeyDown**(event: KeyboardEvent): void — Captures keydown events and calls the appropriate handlers on the target component +- **onArrowDownKeyDown**(): void — Navigates to previous item +- **onArrowUpKeyDown**(): void — Navigates to previous item +- **onEndKeyDown**(): void — Navigates to target's last item +- **onHomeKeyDown**(): void — Navigates to target's first item + +### [IgxEditRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxEditRow) + +- **constructor**(id: any, index: number, data: any, grid: GridType): IgxEditRow +- **data**: `any` +- **grid**: `GridType` +- **id**: `any` +- **index**: `number` +- **newData**: `any` +- **rowFormGroup**: `FormGroup` +- **state**: `any` +- **transactionState**: `any` +- **isAddRow**: `boolean` +- **createRowDataEventArgs**(event?: Event): IRowDataCancelableEventArgs +- **createRowEditDoneEventArgs**(cachedRowData: any, event?: Event): IGridEditDoneEventArgs +- **createRowEditEventArgs**(includeNewValue: boolean, event?: Event): IGridEditEventArgs + +### [IgxEmptyListTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxEmptyListTemplateDirective) + +- **constructor**(): IgxEmptyListTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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 grid. + +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` — This event is emitted when the export process finishes. +this.exporterService.exportEnded.subscribe((args: IExcelExportEndedEventArgs) => { +// put event handler code here +}); + +### [IgxExcelStyleClearFiltersComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleClearFiltersComponent) +A component used for presenting Excel style clear filters UI. + +- **constructor**(): IgxExcelStyleClearFiltersComponent +- **esf**: `BaseFilteringComponent` + +### [IgxExcelStyleColumnOperationsTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleColumnOperationsTemplateDirective) + +- **constructor**(): IgxExcelStyleColumnOperationsTemplateDirective + +### [IgxExcelStyleConditionalFilterComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleConditionalFilterComponent) +A component used for presenting Excel style conditional filter UI. + +- **constructor**(): IgxExcelStyleConditionalFilterComponent +- **esf**: `BaseFilteringComponent` +- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +### [IgxExcelStyleFilterOperationsTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleFilterOperationsTemplateDirective) + +- **constructor**(): IgxExcelStyleFilterOperationsTemplateDirective + +### [IgxExcelStyleHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleHeaderComponent) +A component used for presenting Excel style header UI. + +- **constructor**(): 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/22.0.0/classes/IgxExcelStyleHidingComponent) +A component used for presenting Excel style column hiding UI. + +- **constructor**(): IgxExcelStyleHidingComponent +- **esf**: `BaseFilteringComponent` + +### [IgxExcelStyleLoadingValuesTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleLoadingValuesTemplateDirective) + +- **constructor**(): IgxExcelStyleLoadingValuesTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_dir: IgxExcelStyleLoadingValuesTemplateDirective, ctx: unknown): ctx + +### [IgxExcelStyleMovingComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleMovingComponent) +A component used for presenting Excel style column moving UI. + +- **constructor**(): IgxExcelStyleMovingComponent +- **esf**: `BaseFilteringComponent` + +### [IgxExcelStylePinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStylePinningComponent) +A component used for presenting Excel style column pinning UI. + +- **constructor**(): IgxExcelStylePinningComponent +- **esf**: `BaseFilteringComponent` + +### [IgxExcelStyleSearchComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleSearchComponent) +A component used for presenting Excel style search UI. + +- **constructor**(): IgxExcelStyleSearchComponent +- **cdr**: `ChangeDetectorRef` +- **esf**: `BaseFilteringComponent` +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +### [IgxExcelStyleSelectingComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleSelectingComponent) +A component used for presenting Excel style conditional filter UI. + +- **constructor**(): IgxExcelStyleSelectingComponent +- **esf**: `BaseFilteringComponent` + +### [IgxExcelStyleSortingComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelStyleSortingComponent) +A component used for presenting Excel style column sorting UI. + +- **constructor**(): IgxExcelStyleSortingComponent +- **esf**: `BaseFilteringComponent` +- **ngOnDestroy**(): void — A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +### [IgxExcelTextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExcelTextDirective) + +- **constructor**(): IgxExcelTextDirective + +### [IgxExpansionPanelBodyComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExpansionPanelBodyComponent) + +- **constructor**(): IgxExpansionPanelBodyComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **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'; + + +- **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/22.0.0/classes/IgxExpansionPanelComponent) + +- **constructor**(): 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: + +- **contentCollapsed**: `EventEmitter` — Emitted when the expansion panel finishes collapsing + handleCollapsed(event: IExpansionPanelEventArgs) + + + ... + +- **contentCollapsing**: `EventEmitter` — Emitted when the expansion panel starts collapsing + handleCollapsing(event: IExpansionPanelCancelableEventArgs) + + + ... + +- **contentExpanded**: `EventEmitter` — Emitted when the expansion panel finishes expanding + handleExpanded(event: IExpansionPanelEventArgs) + + + ... + +- **contentExpanding**: `EventEmitter` — Emitted when the expansion panel starts expanding + handleExpanding(event: IExpansionPanelCancelableEventArgs) + + + ... + +- **id**: `string` — Sets/gets the id of the expansion panel component. +If not set, id will have value "igx-expansion-panel-0"; + + +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 + + ... + +``` +- **close**(evt?: Event): void +- **collapse**(evt?: Event): void — Collapses the panel + + + ... + + +- **expand**(evt?: Event): void — Expands the panel + + + ... + + +- **open**(evt?: Event): void +- **toggle**(evt?: Event): void — Toggles the panel + + + ... + + + +### [IgxExpansionPanelHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxExpansionPanelHeaderComponent) + +- **constructor**(): IgxExpansionPanelHeaderComponent +- **cdr**: `ChangeDetectorRef` +- **elementRef**: `ElementRef` +- **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'; + + +- **id**: `string` — Sets/gets the id of the expansion panel header. +let panelHeaderId = this.panel.header.id; +- **interaction**: `EventEmitter` — Emitted whenever a user interacts with the header host + handleInteraction(event: IExpansionPanelCancelableEventArgs) { + ... +} + + + ... + +- **lv**: `string` — Gets/sets the aria-level attribute of the header +Get + const currentAriaLevel = this.panel.header.lv; + +Set + this.panel.header.lv = '5'; + + +- **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'; + + +- **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; + + + ... + +- **iconRef**: `ElementRef` — 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/22.0.0/classes/IgxExporterOptionsBase) + +- **constructor**(fileName: string, _fileExtension: string): IgxExporterOptionsBase +- **alwaysExportHeaders**: `boolean` — Specifies whether the headers should be exported if there is no data. +let alwaysExportHeaders = this.exportOptions.alwaysExportHeaders; +this.exportOptions.alwaysExportHeaders = false; +- **exportSummaries**: `boolean` — Specifies whether the exported data should include column summaries. +let exportSummaries = this.exportOptions.exportSummaries; +this.exportOptions.exportSummaries = true; +- **freezeHeaders**: `boolean` — Specifies whether the exported data should have frozen headers. +let freezeHeaders = this.exportOptions.freezeHeaders; +this.exportOptions.freezeHeaders = true; +- **ignoreColumnsOrder**: `boolean` — Specifies if the exporter should ignore the current column order in the grid. +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 grid. +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 grid. +let ignoreMultiColumnHeaders = this.exportOptions.ignoreMultiColumnHeaders; +this.exportOptions.ignoreMultiColumnHeaders = true; +- **ignoreSorting**: `boolean` — Specifies whether the exported data should be sorted as in the provided grid. +When you export grouped data, setting ignoreSorting to true will cause +the grouping to fail because it relies on the sorting of the records. +let ignoreSorting = this.exportOptions.ignoreSorting; +this.exportOptions.ignoreSorting = true; +- **fileName**: `string` — Gets the file name which will be used for the exporting operation. +let fileName = this.exportOptions.fileName; + +### [IgxFilterCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxFilterCellTemplateDirective) + +- **constructor**(): IgxFilterCellTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxFilterCellTemplateDirective, context: unknown): context + +### [IgxFilterDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxFilterDirective) + +- **constructor**(): IgxFilterDirective +- **filtered**: `EventEmitter` +- **filtering**: `EventEmitter` +- **filterOptions**: `IgxFilterOptions` +- **ngOnChanges**(changes: any): void — A callback method that is invoked immediately after the +default change detector has checked data-bound properties +if at least one has changed, and before the view and content +children are checked. + +### [IgxFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxFilteringOperand) +Provides base filtering operations +Implementations should be Singleton + +- **constructor**(): IgxFilteringOperand +- **operations**: `IFilteringOperation[]` +- **append**(operation: IFilteringOperation): void — Adds a new condition to the filtering operations. +- **condition**(name: string): IFilteringOperation — Returns an instance of the condition with the specified name. +- **conditionList**(): string[] — Returns an array of names of the conditions which are visible in the filtering UI +- static **instance**(): IgxFilteringOperand + +### [IgxFilterOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxFilterPipe) + +- **constructor**(): IgxFilterPipe +- **transform**(items: any[], options: IgxFilterOptions): any[] + +### [IgxFlatTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxFlatTransactionFactory) +Factory service for instantiating TransactionServices + +- **constructor**(): IgxFlatTransactionFactory +- **create**(type: TRANSACTION_TYPE): TransactionService — Creates a new Transaction service instance depending on the specified type. + +### [IgxFlexDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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. + +
Content
+- **flex**: `string` — Applies the directive to an element. + +Possible values include igxFlexGrow, igxFlexShrink, igxFlexOrder, igxFlexBasis. + +
Content
+- **grow**: `number` — Applies the grow attribute to an element that uses the directive. + +Default value is 1. + +
+
Content1
+
Content2
+
Content3
+
+- **order**: `number` — Applies the order attribute to an element that uses the directive. + +Default value is 0. + +
+
Content1
+
Content2
+
Content3
+
+- **shrink**: `number` — Applies the shrink attribute to an element that uses the directive. + +Default value is 1. + +
+
Content1
+
Content2
+
Content3
+
+ +### [IgxFocusDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxFocusDirective) + +- **constructor**(): 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/22.0.0/classes/IgxFocusTrapDirective) + +- **constructor**(): IgxFocusTrapDirective +- **focusTrap**: `boolean` + +### [IgxForOfContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxForOfContext) + +- **constructor**($implicit: T, igxForOf: U, index: number, count: number): IgxForOfContext +- **$implicit**: `T` +- **count**: `number` +- **igxForOf**: `U` +- **index**: `number` +- **even**: `boolean` — A function that returns whether the element is even or not +- **first**: `boolean` — A function that returns whether the element is the first or not +- **last**: `boolean` — A function that returns whether the element is the last or not +- **odd**: `boolean` — A function that returns whether the element is odd or not + +### [IgxForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxForOfDirective) + +- **constructor**(): IgxForOfDirective +- **_virtScrollPosition**: `number` — Internal track for scroll top that is being virtualized +- **beforeViewDestroyed**: `EventEmitter>` +- **cdr**: `ChangeDetectorRef` +- **chunkLoad**: `EventEmitter` — An event that is emitted after a new chunk has been loaded. + + +loadChunk(e){ +alert("chunk loaded!"); +} +- **chunkPreload**: `EventEmitter` — 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. + + +chunkPreload(e){ +alert("chunk is loading!"); +} +- **contentSizeChange**: `EventEmitter` — An event that is emitted after the rendered content size of the igxForOf has been changed. +- **dataChanged**: `EventEmitter` — An event that is emitted after data has been changed. + + +dataChanged(e){ +alert("data changed!"); +} +- **igxForContainerSize**: `any` — Sets the px-affixed size of the container along the axis of scrolling. +For "horizontal" orientation this value is the width of the container and for "vertical" is the height. + + +- **igxForItemSize**: `any` — Sets the px-affixed size of the item along the axis of scrolling. +For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row. + +- **igxForScrollContainer**: `any` — Optionally pass the parent igxFor instance to create a virtual template scrolling both horizontally and vertically. + +
+ +
{{rowIndex}} : {{item.text}}
+ +
+ +- **igxForScrollOrientation**: `string` — Specifies the scroll orientation. +Scroll orientation can be "vertical" or "horizontal". + +- **igxForSizePropName**: `any` — Sets the property name from which to read the size in the data object. +- **state**: `IForOfState` — The current state of the directive. It contains startIndex and chunkSize. +state.startIndex - The index of the item at which the current visible chunk begins. +state.chunkSize - The number of items the current visible chunk holds. +These options can be used when implementing remote virtualization as they provide the necessary state information. +const gridState = this.parentVirtDir.state; +- **displayContainer**: `HTMLElement` +- **igxForOf**: `U & T[]` — Sets the data to be rendered. + +- **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. + +- **igxForTrackBy**: `TrackByFunction` — Gets the function used to track changes in the items collection. +By default the object references are compared. However this can be optimized if you have unique identifier +value that can be used for the comparison instead of the object ref or if you have some other property values +in the item object that should be tracked for changes. +This option is similar to ngForTrackBy. +const trackFunc = this.parentVirtDir.igxForTrackBy; +- **scrollPosition**: `number` — Gets/Sets the scroll position. +const position = directive.scrollPosition; +directive.scrollPosition = value; +- **totalItemCount**: `number` — The total count of the virtual data items, when using remote service. +this.parentVirtDir.totalItemCount = data.Count; +- **virtualHelper**: `HTMLElement` +- **addScroll**(add: number): boolean — Shifts the scroll thumb position. +this.parentVirtDir.addScroll(5); +- **addScrollTop**(add: number): boolean — Shifts the scroll thumb position. +this.parentVirtDir.addScroll(5); +- **getIndexAtScroll**(scrollOffset: number): number — Returns the index of the element at the specified offset. +this.parentVirtDir.getIndexAtScroll(100); +- **getItemCountInView**(): number — Returns the total number of items that are fully visible. +this.parentVirtDir.getItemCountInView(); +- **getScroll**(): HTMLElement — Returns a reference to the scrollbar DOM element. +This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation. +dir.getScroll(); +- **getScrollForIndex**(index: number, bottom?: boolean): number — Returns the scroll offset of the element at the specified index. +this.parentVirtDir.getScrollForIndex(1); +- **getSizeAt**(index: number): number — Returns the size of the element at the specified index. +this.parentVirtDir.getSizeAt(1); +- **isIndexOutsideView**(index: number): boolean — Returns whether the target index is outside the view. +this.parentVirtDir.isIndexOutsideView(10); +- **isScrollable**(): boolean +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **scrollNext**(): void — Scrolls by one item into the appropriate next direction. +For "horizontal" orientation that will be the right column and for "vertical" that is the lower row. +this.parentVirtDir.scrollNext(); +- **scrollNextPage**(): void — Scrolls by one page into the appropriate next direction. +For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom. +this.parentVirtDir.scrollNextPage(); +- **scrollPrev**(): void — Scrolls by one item into the appropriate previous direction. +For "horizontal" orientation that will be the left column and for "vertical" that is the upper row. +this.parentVirtDir.scrollPrev(); +- **scrollPrevPage**(): void — Scrolls by one page into the appropriate previous direction. +For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top. +this.parentVirtDir.scrollPrevPage(); +- **scrollTo**(index: number): void — Scrolls to the specified index. +this.parentVirtDir.scrollTo(5); +- **verticalScrollHandler**(event: any): void + +### [IgxForOfScrollSyncService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxForOfScrollSyncService) + +- **constructor**(): IgxForOfScrollSyncService +- **getScrollMaster**(dir: string): VirtualHelperBaseDirective +- **setScrollMaster**(dir: string, scroll: VirtualHelperBaseDirective): void + +### [IgxForOfSyncService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxForOfSyncService) + +- **constructor**(): IgxForOfSyncService + +### [IgxGridActionButtonComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridActionButtonComponent) + +- **constructor**(): IgxGridActionButtonComponent +- **actionClick**: `EventEmitter` — 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` +- **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/22.0.0/classes/IgxGridActionsBaseDirective) + +- **constructor**(): 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. + +### [IgxGridAddRowPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridAddRowPipe) + +- **constructor**(): IgxGridAddRowPipe +- **transform**(collection: any, isPinned: boolean, _pipeTrigger: number): any + +### [IgxGridBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridBaseDirective) +Interface representing a grid type. It is essentially the blueprint to a grid object. +Contains definitions of properties and methods, relevant to a grid +Extends IGridDataBindable + +- **constructor**(): IgxGridBaseDirective +- **activeNodeChange**: `EventEmitter` — Emitted when the active node is changed. +- **addRowEmptyTemplate**: `TemplateRef` — Gets/Sets a custom template for adding row UI when grid is empty. +- **advancedFilteringExpressionsTreeChange**: `EventEmitter` — 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 +- readonly **cdr**: `ChangeDetectorRef` — Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) +- **cellClick**: `EventEmitter` — Emitted when a cell is clicked. +- **cellEdit**: `EventEmitter` — Emitted when cell has been edited. +- **cellEditDone**: `EventEmitter` — Emitted after cell has been edited and editing has been committed. +- **cellEditEnter**: `EventEmitter` — Emitted when cell enters edit mode. +- **cellEditExit**: `EventEmitter` — Emitted when cell exits edit mode. +- **clipboardOptions**: `IClipboardOptions` — Controls the copy behavior of the grid. +- **columnInit**: `EventEmitter` — Emitted when a column is initialized. +- **columnMoving**: `EventEmitter` — Emitted during the column moving operation. +- **columnMovingEnd**: `EventEmitter` — Emitted when column moving ends. +- **columnMovingStart**: `EventEmitter` — Emitted when column moving starts. +- **columnPin**: `EventEmitter` — Emitted before column is pinned. +- **columnPinned**: `EventEmitter` — Emitted after column is pinned. +- **columnResized**: `EventEmitter` — Emitted after column is resized. +- **columnSelectionChanging**: `EventEmitter` — Emitted when column is selected. +- **columnVisibilityChanged**: `EventEmitter` — Emitted after column visibility is changed. +- **columnVisibilityChanging**: `EventEmitter` — Emitted before column visibility is changed. +- **contextMenu**: `EventEmitter` — Emitted when a cell or row is right clicked. +- **data**: `any[]` +- **dataChanged**: `EventEmitter` — Emitted after the grid's data view is changed because of a data operation, rebinding, etc. +- **dataChanging**: `EventEmitter` — Emitted before the grid's data view is changed because of a data operation, rebinding, etc. +- **doubleClick**: `EventEmitter` — Emitted when a cell is double clicked. +- **expansionStatesChange**: `EventEmitter>` — Emitted when the rows are expanded or collapsed. +- **filtering**: `EventEmitter` — Emitted before filtering expressions are applied. +- **filteringDone**: `EventEmitter` — Emitted after filtering is performed through the UI. +- **filteringExpressionsTreeChange**: `EventEmitter` — Emitted after filtering is performed. +- **formGroupCreated**: `EventEmitter` — Emitted when formGroup is created on edit of row/cell. +- readonly **gridAPI**: `GridServiceType` — Represents the grid service type providing API methods for the grid +- **gridCopy**: `EventEmitter` — Emitted when a copy operation is executed. +- **gridKeydown**: `EventEmitter` — Emitted when keydown is triggered over element inside grid's body. +- **gridScroll**: `EventEmitter` — Emitted when grid is scrolled horizontally/vertically. +- **moving**: `boolean` — Controls whether columns moving is enabled in the grid. +- **navigation**: `IgxGridNavigationService` +- **rangeSelected**: `EventEmitter` — Emitted when making a range selection. +- **rendered**: `EventEmitter` — Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM +- **rowAdd**: `EventEmitter` — Emmited just before the newly added row is commited. +- **rowAdded**: `EventEmitter` — 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 }; + + +- **rowClick**: `EventEmitter` — Emitted when a row is clicked. +- **rowDelete**: `EventEmitter` — Emmited when deleting a row. +- **rowDeleted**: `EventEmitter` — Emitted when a row is deleted. +- **rowDragEnd**: `EventEmitter` — Emitted when dropping a row. +- **rowDragStart**: `EventEmitter` — Emitted when start dragging a row. +- **rowEdit**: `EventEmitter` — Emitted when exiting edit mode for a row. +- **rowEditDone**: `EventEmitter` — Emitted after exiting edit mode for a row and editing has been committed. +- **rowEditEnter**: `EventEmitter` — Emitted when a row enters edit mode. +- **rowEditExit**: `EventEmitter` — Emitted when row editing is canceled. +- **rowPinned**: `EventEmitter` — Emitted when the pinned state of a row is changed. +- **rowPinning**: `EventEmitter` — Emitted when the pinned state of a row is changed. +- **rowSelectionChanging**: `EventEmitter` — Emitted when grid row 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' +} + + +- **rowToggle**: `EventEmitter` — Emitted when the expanded state of a row gets changed. +- **selected**: `EventEmitter` — Emitted when a cell is selected. +- **selectedRowsChange**: `EventEmitter` — Emitted when the rows are selected or deselected. +- **snackbarDisplayTime**: `number` — Gets/Sets the display time for the row adding snackbar notification. +- **sorting**: `EventEmitter` — Emitted before sorting expressions are applied. +- **sortingDone**: `EventEmitter | ISortingExpression[]>` — Emitted after sorting is completed. +- **sortingExpressionsChange**: `EventEmitter[]>` — Emitted before sorting is performed. +- **toolbarExporting**: `EventEmitter` — Emitted when an export process is initiated by the user. +- **uniqueColumnValuesStrategy**: `any` — Gets/Sets a unique values strategy used by the Excel Style Filtering +- readonly **validation**: `IgxGridValidationService` — Represents the validation service for the grid. The type contains properties and methods (logic) for validating records +- **validationStatusChange**: `EventEmitter` — Emitted when grid's validation status changes. +- **validationTrigger**: `GridValidationTrigger` — Gets/Sets the trigger for validators used when editing the grid. +- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree` — Gets/Sets the advanced filtering state. +- **allowAdvancedFiltering**: `boolean` — Gets/Sets a value indicating whether the advanced filtering is enabled. +- **allowFiltering**: `boolean` — Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered +- **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. +- **cellMergeMode**: `GridCellMergeMode` — Gets/Sets cell merge mode. +- **cellSelection**: `GridSelectionMode` — Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' +- **columns**: `IgxColumnComponent[]` — Gets an array of columns. +- **columnSelection**: `GridSelectionMode` — Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' +- **columnWidth**: `string` — Gets/Sets the default width of the columns. +- **dataCloneStrategy**: `IDataCloneStrategy` — Strategy, used for cloning the provided data. The type has one method, that takes any type of data +- **dataRowList**: `QueryList` — A list of currently rendered grid row's. +- **dataView**: `any[]` — Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid. +- **defaultRowHeight**: `number` — Gets the default row height. +- **dragGhostCustomTemplate**: `TemplateRef` — Gets the custom template, if any, used for row drag ghost. +- **dragIndicatorIconTemplate**: `TemplateRef` — The template for drag indicator icons. Could be of any type +- **emptyFilteredGridMessage**: `string` +- **emptyGridMessage**: `string` +- **emptyGridTemplate**: `TemplateRef` — Gets/Sets a custom template when empty. +- **excelStyleHeaderIconTemplate**: `TemplateRef` — The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **expansionStates**: `Map` — Gets/Sets a list of key-value pairs [row ID, expansion state]. +- **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 grid. +- **filterMode**: `FilterMode` — The filter mode for the grid. It can be quick filter of excel-style filter +- **filterStrategy**: `IFilteringStrategy` — Gets/Sets the filtering strategy of the grid. +- **hasVisibleColumns**: `boolean` — Indicates whether the grid has columns that are shown +- **headerCollapsedIndicatorTemplate**: `TemplateRef` — The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **headerExpandedIndicatorTemplate**: `TemplateRef` — The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **headSelectorTemplate**: `TemplateRef` — The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **height**: `string` — Gets/Sets the height. +- **hiddenColumnsCount**: `number` — Represents the count of only the hidden (not visible) columns +- **hideRowSelectors**: `boolean` — Gets/Sets if the row selectors are hidden. +- **isLoading**: `boolean` +- **lastSearchInfo**: `ISearchInfo` — Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search +- **loadingGridTemplate**: `TemplateRef` — Gets/Sets a custom template when loading. +- **locale**: `string` — Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc. +- **mergeStrategy**: `IGridMergeStrategy` — Gets/Sets the merge strategy of the grid. +- **nativeElement**: `HTMLElement` — Represents the native HTML element itself +- **outlet**: `IgxOverlayOutletDirective` +- **pagingMode**: `GridPagingMode` — Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page +- **pinnedColumns**: `IgxColumnComponent[]` — An array of columns, but it counts only the ones that are pinned +- **pinnedColumnsCount**: `number` — Represents the count of only the pinned columns +- **pinnedEndColumns**: `IgxColumnComponent[]` — An array of columns, but it counts only the ones that are pinned to the end. +- **pinnedRows**: `IgxGridRowComponent[]` — Gets an array of the pinned rows. +- **pinnedStartColumns**: `IgxColumnComponent[]` — An array of columns, but it counts only the ones that are pinned to the start. +- **pinning**: `IPinningConfig` — The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) +- **primaryKey**: `string` — Represents the unique primary key used for identifying rows in the grid +- **resourceStrings**: `IGridResourceStrings` +- **rowAddTextTemplate**: `TemplateRef` — Gets the row add text template. +- **rowCollapsedIndicatorTemplate**: `TemplateRef` — The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowDraggable**: `boolean` — Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged +- **rowEditable**: `boolean` — Indicates whether rows in the grid are editable. If te value is true, the rows can be edited +- **rowEditActionsTemplate**: `TemplateRef` — Gets the row edit actions template. +- **rowEditTextTemplate**: `TemplateRef` — Gets the row edit text template. +- **rowExpandedIndicatorTemplate**: `TemplateRef` — The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowHeight**: `number` — The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling +- **rowList**: `QueryList` — A list of grid row. +- **rowSelection**: `GridSelectionMode` — Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' +- **rowSelectorTemplate**: `TemplateRef` — The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **selectedRows**: `any[]` +- **selectRowOnClick**: `boolean` — Gets/Sets whether clicking over a row should select/deselect it +- **shouldGenerate**: `boolean` — Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid +- **showSummaryOnCollapse**: `boolean` — Controls whether the summary row is visible when groupBy/parent row is collapsed. +- **sortAscendingHeaderIconTemplate**: `TemplateRef` — The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortDescendingHeaderIconTemplate**: `TemplateRef` — The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortHeaderIconTemplate**: `TemplateRef` — The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortingExpressions**: `ISortingExpression[]` — Gets/Sets the sorting state. +- **sortingOptions**: `ISortingOptions` +- **sortStrategy**: `IGridSortingStrategy` — Gets/Sets the sorting strategy of the grid. +- **summaryCalculationMode**: `GridSummaryCalculationMode` — Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' +- **summaryPosition**: `GridSummaryPosition` — Represents the position of summaries: 'top', 'bottom' +- **summaryRowHeight**: `number` +- **totalRecords**: `number` — Returns the total number of records. +- **transactions**: `TransactionService` — Represents the transaction service for the grid. +- **unpinnedColumns**: `IgxColumnComponent[]` — An array of columns, but it counts only the ones that are not pinned +- **virtualizationState**: `IForOfState` — Represents the state of virtualization for the grid. It has an owner, start index and chunk size +- **visibleColumns**: `IgxColumnComponent[]` — An array of columns, but it counts only the ones visible (not hidden) in the view +- **width**: `string` — Gets/Sets the width of the grid. +- **addRow**(data: any): void — Creates a new grid row and adds the data record to the end of the data source. +- **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. +- **clearCellSelection**(): void — Deselect selected cells. +- **clearFilter**(name?: string): void — If name is provided, clears the filtering state of the corresponding column. +- **clearSearch**(): void — Removes all the highlights in the cell. +- **clearSort**(name?: string): void — If name is provided, clears the sorting state of the corresponding column. +- **closeAdvancedFilteringDialog**(applyChanges: boolean): void — Closes the advanced filtering dialog. +- **collapseAll**(): void — Collapses all rows. +- **collapseRow**(rowID: any): void — Collapses the row by its id. +- **deleteRow**(rowSelector: any): any — Removes the grid row 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. +- **expandAll**(): void — Expands all rows. +- **expandRow**(rowID: any): void — Expands the row by its id. +- **filter**(name: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void — Filters a single column. +- **filterGlobal**(value: any, condition: any, ignoreCase?: any): void — Filters all the column in the grid 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. +- **getColumnByName**(name: string): IgxColumnComponent — Returns the column by field name. +- **getColumnByVisibleIndex**(index: number): IgxColumnComponent +- **getHeaderGroupWidth**(column: IgxColumnComponent): string — Gets the width to be set on grid header group. +- **getNextCell**(currRowIndex: number, curVisibleColIndex: number, callback: any): ICellPosition — Returns ICellPosition which defines the next cell, +according to the current position, that match specific criteria. +- **getPinnedEndWidth**(takeHidden: boolean): number — Gets calculated width of the pinned areas. +- **getPinnedStartWidth**(takeHidden: boolean): number — Gets calculated width of the pinned areas. +- **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. +- **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. +- **isRecordPinnedByIndex**(rowIndex: number): boolean — Returns whether the record is pinned or not. +- **markForCheck**(): void — Triggers change detection for the grid. +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. +- **openAdvancedFilteringDialog**(overlaySettings?: OverlaySettings): void — Opens the advanced filtering dialog. +- **pinColumn**(columnName: string | IgxColumnComponent, index?: number, pinningPosition?: ColumnPinningPosition): boolean — Pins a column by field name. +- **pinRow**(rowID: any, index?: number, row?: RowType): boolean — Pin the row by its id. +- **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. +- **selectAllColumns**(): void — Selects all columns +- **selectAllRows**(onlyFilterData: boolean): void — Selects all rows +- **selectColumns**(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void — Select specified columns. +- **selectedColumns**(): ColumnType[] — Get current selected 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. +- **sort**(expression: ISortingExpression | ISortingExpression[]): void — Sort a single column. +- **toggleColumnVisibility**(args: IColumnVisibilityChangedEventArgs): void — Toggles the specified column's visibility. +- **toggleRow**(rowID: any): void — Toggles the row by its id. +- **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 grid row and the corresponding data record by primary key. +- **updateRow**(value: any, rowSelector: any): void — Updates the grid row + +### [IgxGridBodyDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridBodyDirective) + +- **constructor**(): IgxGridBodyDirective + +### [IgxGridCell](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridCell) +Interface representing a cell in the grid. It is essentially the blueprint to a cell object. +Contains definitions of properties and methods, relevant to a cell + +- **grid**: `GridType` — Returns the grid containing the cell. +- **active**: `boolean` — Indicates whether the cell is currently active (focused). +- **column**: `ColumnType` — Represents the column that the cell belongs to. +- **editable**: `boolean` — Indicates whether the cell can be edited. +- **editMode**: `boolean` — Indicates whether the cell is currently in edit mode. +- **editValue**: `any` — The value to display when the cell is in edit mode. +- **id**: `any` — Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell. +- **row**: `RowType` — Represents the row that the cell belongs to +- **selected**: `boolean` — Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. +- **validation**: `IGridValidationState` — Optional; An object representing the validation state of the cell. +Whether it's valid or invalid, and if it has errors +- **value**: `any` — The current value of the cell. +- **width**: `string` — The CSS width of the cell as a string. +- **update**(val: any): void — Updates the cell value. + +cell.update(newValue); + +### [IgxGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridCellComponent) +Providing reference to grid cell: +@ViewChild('grid', { read: IgxGridComponent }) + public grid: IgxGridComponent; + + let column = this.grid.columnList.first; + + let cell = column.cells[0]; + +- **constructor**(): IgxGridCellComponent +- **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'; +- **cdr**: `ChangeDetectorRef` +- **cellTemplate**: `TemplateRef` — Sets/gets the template of the cell. + +
+ {{value}} +
+ + +@ViewChild('cellTemplate',{read: TemplateRef}) +cellTemplate: TemplateRef; + +this.cell.cellTemplate = this.cellTemplate; + +let template = this.cell.cellTemplate; +- **cellValidationErrorTemplate**: `TemplateRef` +- **column**: `ColumnType` — Gets the column of the cell. + let cellColumn = this.cell.column; +- **editMode**: `boolean` — Returns whether the cell is in edit mode. +- **formatter**: `any` — Gets the cell formatter. +let cellForamatter = this.cell.formatter; +- **grid**: `GridType` — Represents the grid instance containing the cell +- **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'; +- **isMerged**: `boolean` — Gets whether this cell is a merged cell. +- **pinnedIndicator**: `TemplateRef` +- **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; +- **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; +- **ariaSelected**: `boolean` +- **attrCellID**: `string` +- **booleanClass**: `any` +- **cellID**: `any` — Optional; The cellID is the unique key, used to identify the cell +- **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(); +- **editable**: `boolean` — Indicates whether the cell can be edited. +- **editValue**: `any` — The value to display when the cell is in edit mode. +- **gridColumnSpan**: `number` +- **gridID**: `any` — Gets the id of the grid in which the cell is stored. +let gridId = this.cell.gridID; +- **gridRowSpan**: `number` +- **nativeElement**: `HTMLElement` — Represents the native HTML element of the cell itself +- **pinnedIndicatorTemplate**: `TemplateRef` — 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` — Represents the row that the cell belongs to +- **rowEnd**: `number` +- **rowIndex**: `number` — Gets the index of the row where the cell is stored. +let rowIndex = this.cell.rowIndex; +- **rowStart**: `number` +- **selected**: `boolean` — Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. +- **template**: `TemplateRef` — Gets the cell template. +let template = this.cell.template; +- **title**: `any` — An optional title to display for the cell +- **visibleColumnIndex**: `number` — The index of the column that the cell belongs to. It counts only the visible (not hidden) columns +- **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 — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **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'); + +### [IgxGridCellMergePipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridCellMergePipe) + +- **constructor**(): IgxGridCellMergePipe +- **transform**(collection: any, colsToMerge: ColumnType[], _mergeMode: GridCellMergeMode, mergeStrategy: IGridMergeStrategy, _pipeTrigger: number): any + +### [IgxGridColumnResizerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridColumnResizerComponent) + +- **constructor**(): IgxGridColumnResizerComponent +- **colResizingService**: `IgxColumnResizingService` +- **resizer**: `IgxColumnResizerDirective` +- **restrictResizerTop**: `number` + +### [IgxGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridComponent) +Grid provides a way to present and manipulate tabular data. + +- **constructor**(): IgxGridComponent +- **dataPreLoad**: `EventEmitter` — Emitted when a new chunk of data is loaded from virtualization. +- **dropAreaTemplate**: `TemplateRef` — Gets/Sets the template that will be rendered as a GroupBy drop area. +- **groupingDone**: `EventEmitter` — Emitted when columns are grouped/ungrouped. +- **groupingExpansionStateChange**: `EventEmitter` — Emitted when groups are expanded/collapsed. +- **groupingExpressionsChange**: `EventEmitter` — Emitted when grouping is performed. +- **groupsExpanded**: `boolean` — Gets/Sets whether created groups are rendered expanded or collapsed. +- **id**: `string` — Gets/Sets the value of the id attribute. +- **data**: `any[]` — Gets/Sets the array of data that populates the component. +- **detailTemplate**: `TemplateRef` — Returns a reference to the master-detail template. +let detailTemplate = this.grid.detailTemplate; +- **dropAreaMessage**: `string` +- **groupByRowSelectorTemplate**: `TemplateRef` — Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **groupingExpansionState**: `IGroupByExpandState[]` — Gets/Sets a list of expansion states for group rows. +- **groupingExpressions**: `IGroupingExpression[]` — Gets/Sets the group by state. +- **groupRowTemplate**: `TemplateRef` — Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **groupsRecords**: `IGroupByRecord[]` — Gets the hierarchical representation of the group by records. +- **groupStrategy**: `IGridGroupingStrategy` — Gets/Sets the grouping strategy of the grid. +- **hideGroupedColumns**: `boolean` — Gets/Sets whether the grouped columns should be hidden. +- **selectedCells**: `CellType[]` — Returns an array of the selected grid cells. +- **showGroupArea**: `boolean` — Returns whether the grid has group area. +- **totalItemCount**: `number` +- **clearGrouping**(name?: string | string[]): void — Clears grouping for particular column, array of columns or all columns. +- **deselectRowsInGroup**(groupRow: IGroupByRecord): void — Deselect all rows within a group. +- **fullyExpandGroup**(groupRow: IGroupByRecord): void — Expands the specified group and all of its parent groups. +- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getRowByIndex**(index: number): RowType — Returns the grid row by index. +- **getRowByKey**(key: any): RowType — Returns grid row 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 column 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. + +### [IgxGridCRUDService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridCRUDService) + +- **constructor**(): IgxGridCRUDService +- **endEdit**(commit: boolean, event?: Event): boolean — Finishes the row transactions on the current row and returns whether the grid editing was canceled. +- **enterAddRowMode**(parentRow: RowType, asChild?: boolean, event?: Event): void — Enters add row mode by creating temporary dummy so the user can fill in new row cells. +- **enterEditMode**(cell: any, event?: Event): boolean + +### [IgxGridDataMapperPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridDataMapperPipe) + +- **constructor**(): IgxGridDataMapperPipe +- **transform**(data: any[], field: string, _: number, val: any, isNestedPath: boolean): any + +### [IgxGridEditingActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridEditingActionsComponent) +Grid Editing Actions for the Action Strip + +- **constructor**(): IgxGridEditingActionsComponent +- **addChild**: `boolean` — An input to enable/disable action strip child row adding button +- **deleteRow**: `boolean` — An input to enable/disable action strip row deleting button +- **editRow**: `boolean` — An input to enable/disable action strip row editing button +- **addRow**: `boolean` +- **hasChildren**: `boolean` +- **startEdit**(event?: any): void — Enter row or cell edit mode depending the grid rowEditable option + +### [IgxGridExcelStyleFilteringComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + +- **constructor**(): IgxGridExcelStyleFilteringComponent +- **mainDropdown**: `ElementRef` +- **column**: `ColumnType` — Returns the current column. +- **maxHeight**: `string` — Gets the maximum height. + +Setting value in template: +[maxHeight]="''" + + +Example for setting a value: +[maxHeight]="'700px'" +- **minHeight**: `string` — Gets the minimum height. + +Setting value in template: +[minHeight]="''" + + +Example for setting a value: +[minHeight]="'700px'" + +### [IgxGridExpandableCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridExpandableCellComponent) +Providing reference to grid cell: +@ViewChild('grid', { read: IgxGridComponent }) + public grid: IgxGridComponent; + + let column = this.grid.columnList.first; + + let cell = column.cells[0]; + +- **constructor**(): IgxGridExpandableCellComponent +- **document**: `Document` +- **indentationDiv**: `ElementRef` +- **indicator**: `ElementRef` + +### [IgxGridFooterComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridFooterComponent) + +- **constructor**(): IgxGridFooterComponent + +### [IgxGridForOfContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridForOfContext) + +- **constructor**($implicit: T, igxGridForOf: U, index: number, count: number): IgxGridForOfContext +- **igxGridForOf**: `U` + +### [IgxGridForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridForOfDirective) + +- **constructor**(): IgxGridForOfDirective +- **igxGridForOfUniqueSizeCache**: `boolean` +- **igxGridForOfVariableSizes**: `boolean` +- **igxGridForOf**: `U & T[]` + +### [IgxGridLiteCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridLiteCellTemplateDirective) +Directive providing type information for cell template contexts. +Use this directive on ng-template elements that render cell templates. + +- **constructor**(): IgxGridLiteCellTemplateDirective +- **template**: `TemplateRef>` +- static **ngTemplateContextGuard**(_: IgxGridLiteCellTemplateDirective, ctx: unknown): ctx + +### [IgxGridLiteColumnComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridLiteColumnComponent) + +- **constructor**(): IgxGridLiteColumnComponent +- readonly **cellTemplate**: `InputSignal>>` — Custom cell template for the column. +- readonly **dataType**: `InputSignal` — The data type of the column's values. +- readonly **field**: `InputSignal>>` — The field from the data for this column. +- readonly **filterable**: `InputSignalWithTransform` — Indicates whether the column is filterable. +- readonly **filteringCaseSensitive**: `InputSignalWithTransform` — Whether filter operations will be case sensitive. +- readonly **header**: `InputSignal` — The header text of the column. +- readonly **headerTemplate**: `InputSignal>>` — Custom header template for the column. +- readonly **hidden**: `InputSignalWithTransform` — Indicates whether the column is hidden. +- readonly **resizable**: `InputSignalWithTransform` — Indicates whether the column is resizable. +- readonly **sortable**: `InputSignalWithTransform` — Indicates whether the column is sortable. +- readonly **sortConfiguration**: `InputSignal>` — Sort configuration for the column (e.g., custom comparer). +- readonly **sortingCaseSensitive**: `InputSignalWithTransform` — Whether sort operations will be case sensitive. +- readonly **width**: `InputSignal` — The width of the column. + +### [IgxGridLiteComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridLiteComponent) +The Grid Lite is a web component for displaying data in a tabular format quick and easy. + +Out of the box it provides row virtualization, sort and filter operations (client and server side), +the ability to template cells and headers and column hiding. + +- **constructor**(): IgxGridLiteComponent +- readonly **autoGenerate**: `InputSignalWithTransform` — Whether the grid will try to "resolve" its column configuration based on the passed +data source. +- readonly **data**: `InputSignal` — The data source for the grid. +- readonly **dataPipelineConfiguration**: `InputSignal>` — Configuration object which controls remote data operations for the grid. +- readonly **filteringExpressions**: `ModelSignal[]>` — The filter state for the grid. +- readonly **sortingExpressions**: `ModelSignal[]>` — The sort state for the grid. +- readonly **sortingOptions**: `InputSignal` — Sort configuration property for the grid. +- **columns**: `IgxGridLiteColumnConfiguration[]` — Get the column configuration of the grid. +- **dataView**: `any` — Returns the state of the data source after sort/filter operations +have been applied. +- **rows**: `IgcGridLiteRow[]` — Returns the collection of rendered row elements in the grid. +- **clearFilter**(key?: Keys): void — Resets the current filter state of the control. +- **clearSort**(key?: Keys): void — Resets the current sort state of the control. +- **filter**(config: IgxGridLiteFilteringExpression | IgxGridLiteFilteringExpression[]): void — Performs a filter operation in the grid based on the passed expression(s). +- **getColumn**(id: number | Keys): IgxGridLiteColumnConfiguration — Returns a IgxGridLiteColumnConfiguration for a given column. +- **navigateTo**(row: number, column?: Keys, activate: boolean): Promise — Navigates to a position in the grid based on provided row index and column field. +- **sort**(expressions: IgxGridLiteSortingExpression | IgxGridLiteSortingExpression[]): void — Performs a sort operation in the grid based on the passed expression(s). + +### [IgxGridLiteHeaderTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridLiteHeaderTemplateDirective) +Directive providing type information for header template contexts. +Use this directive on ng-template elements that render header templates. + +- **constructor**(): IgxGridLiteHeaderTemplateDirective +- **template**: `TemplateRef>` +- static **ngTemplateContextGuard**(_: IgxGridLiteHeaderTemplateDirective, ctx: any): ctx + +### [IgxGridPinningActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridPinningActionsComponent) +Grid Pinning Actions for the Action Strip + +- **constructor**(): IgxGridPinningActionsComponent +- **pin**(event?: any): void — Pin the row according to the context. +- **scrollToRow**(event: any): void +- **unpin**(event?: any): void — Unpin the row according to the context. + +### [IgxGridRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridRow) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **parent**: `RowType` — Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row +- **viewIndex**: `number` — Returns the view index calculated per the grid page. + +### [IgxGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridRowComponent) + +- **constructor**(): IgxGridRowComponent +- **getContext**(col: any, row: any): any +- **getContextMRL**(pinnedCols: any, row: any): any + +### [IgxGridSelectionService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridSelectionService) + +- **constructor**(): IgxGridSelectionService +- **activeElement**: `ISelectionNode` +- **columnSelection**: `Set` +- **columnsState**: `IColumnSelectionState` +- **dragMode**: `boolean` +- **grid**: `GridType` +- **indeterminateRows**: `Set` +- **keyboardState**: `ISelectionKeyboardState` +- **pointerState**: `ISelectionPointerState` +- **rowSelection**: `Set` +- **selection**: `Map>` +- **temp**: `Map>` +- **allData**: `any[]` — Returns all data in the grid, with applied filtering and sorting and without deleted rows. +- **filteredSelectedRowIds**: `any[]` +- **primaryButton**: `boolean` +- **ranges**: `GridSelectionRange[]` — Returns the current selected ranges in the grid from both +keyboard and pointer interactions +- **add**(node: ISelectionNode, addToRange: boolean): void — Adds a single node. +Single clicks | Ctrl + single clicks on cells is the usual case. +- **addKeyboardRange**(): void — Adds the active keyboard range selection (if any) to the ranges meta. +- **addRangeMeta**(node: ISelectionNode, state?: SelectionState): void +- **areAllRowSelected**(newSelection?: any): boolean +- **clear**(clearAcriveEl: boolean): void +- **clearAllSelectedColumns**(): void — Clear columnSelection +- **clearAllSelectedRows**(): void — Clear rowSelection and update checkbox state +- **clearHeaderCBState**(): void +- **clearRowSelection**(event?: any): void — Clears row selection, if filtering is applied clears only selected rows from filtered data. +- **clearTextSelection**(): void +- **deselectColumn**(field: string, event?: any): void — Deselect the specified column and emit event. +- **deselectColumns**(fields: string[], event?: any): void — Deselect specified columns. And emit event. +- **deselectColumnsWithNoEvent**(fields: string[]): void — Deselect specified columns. No event is emitted. +- **deselectPivotRowByID**(rowID: any, event?: any): void +- **deselectRow**(rowID: any, event?: any): void — Deselect the specified row and emit event. +- **deselectRows**(keys: any[], event?: any): void +- **deselectRowsWithNoEvent**(rowIDs: any[]): void — Deselect specified rows. No event is emitted. +- **dragSelect**(node: ISelectionNode, state: SelectionState): void +- **emitColumnSelectionEvent**(newSelection: any, added: any, removed: any, event?: any): boolean +- **emitRowSelectionEvent**(newSelection: any, added: any, removed: any, event?: any, currSelection?: any): boolean +- **generateRange**(node: ISelectionNode, state?: SelectionState): GridSelectionRange — Generates a new selection range from the given node. +If state is passed instead it will generate the range based on the passed node +and the start node of the state. +- **getIndeterminateRows**(): any[] — Returns array of the rows in indeterminate state. +- **getPivotRowsByIds**(ids: any[]): any[] +- **getRecordKey**(record: any): any +- **getRowDataById**(rowID: any): any +- **getRowIDs**(data: any): any[] +- **getSelectedColumns**(): any[] — Returns array of the selected columns fields. +- **getSelectedRows**(): any[] — Returns array of the selected row id's. +- **getSelectedRowsData**(): any[] +- **hasSomeRowSelected**(): boolean +- **initColumnsState**(): void — Resets the columns state +- **initKeyboardState**(): void — Resets the keyboard state +- **initPointerState**(): void — Resets the pointer state +- **isActiveLayout**(current: IMultiRowLayoutNode, target: IMultiRowLayoutNode): boolean +- **isActiveNode**(node: ISelectionNode): boolean +- **isColumnSelected**(field: string): boolean +- **isInMap**(node: ISelectionNode): boolean +- **isPivotRowSelected**(rowID: any): boolean +- **isRowInIndeterminateState**(rowID: any): boolean +- **isRowSelected**(rowID: any): boolean +- **keyboardStateOnFocus**(node: ISelectionNode, emitter: EventEmitter, dom: any): void +- **keyboardStateOnKeydown**(node: ISelectionNode, shift: boolean, shiftTab: boolean): void +- **mergeMap**(target: Map>, source: Map>): void +- **pointerDown**(node: ISelectionNode, shift: boolean, ctrl: boolean): void +- **pointerDownShiftKey**(node: ISelectionNode): void +- **pointerEnter**(node: ISelectionNode, event: PointerEvent): boolean +- **pointerUp**(node: ISelectionNode, emitter: EventEmitter, firedOutsideGrid?: boolean): boolean +- **remove**(node: ISelectionNode): void +- **removeRangeMeta**(node: ISelectionNode, state?: SelectionState): void +- **restoreTextSelection**(): void +- **selectAllRows**(event?: any): void — Select all rows, if filtering is applied select only from filtered data. +- **selectColumn**(field: string, clearPrevSelection?: any, selectColumnsRange?: any, event?: any): void — Select the specified column and emit event. +- **selectColumns**(fields: string[], clearPrevSelection?: any, selectColumnsRange?: any, event?: any): void — Select specified columns. And emit event. +- **selectColumnsRange**(field: string, event: any): void — Select range from last clicked column to the current specified column. +- **selectColumnsWithNoEvent**(fields: string[], clearPrevSelection?: any): void — Select specified columns. No event is emitted. +- **selected**(node: ISelectionNode): boolean +- **selectMultipleRows**(rowID: any, rowData: any, event?: any): void — Select range from last selected row to the current specified row. +- **selectPivotRowById**(rowID: any, clearPrevSelection: boolean, event?: any): void +- **selectRange**(node: ISelectionNode, state: SelectionState, collection: Map>): void +- **selectRowById**(rowID: any, clearPrevSelection?: any, event?: any): void — Select the specified row and emit event. +- **selectRows**(keys: any[], clearPrevSelection?: boolean, event?: any): void — Select the specified rows and emit event. +- **selectRowsWithNoEvent**(rowIDs: any[], clearPrevSelection?: any): void — Select specified rows. No event is emitted. + +### [IgxGridStateBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridStateBaseDirective) + +- **constructor**(): IgxGridStateBaseDirective +- **grid**: `GridType` +- **options**: `IGridStateOptions` — An object with options determining if a certain feature state should be saved. + + +public options = {selection: false, advancedFiltering: false}; + +### [IgxGridStateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridStateDirective) + +- **constructor**(): IgxGridStateDirective +- **stateParsed**: `EventEmitter` — 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. + + +public options = {selection: false, advancedFiltering: false}; +- **getState**(serialize: boolean, features?: keyof IGridStateOptions | keyof IGridStateOptions[]): string | IGridState — Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the options property. +- **setState**(state: string | IGridState, features?: keyof IGridStateOptions | keyof IGridStateOptions[]): void — Restores grid features' state based on the IGridState object passed as an argument. + +### [IgxGridToolbarActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxGridToolbarAdvancedFilteringComponent) +Provides a pre-configured button to open the advanced filtering dialog of the grid. + +- **constructor**(): IgxGridToolbarAdvancedFilteringComponent +- **overlaySettings**: `OverlaySettings` + +### [IgxGridToolbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridToolbarComponent) +Provides a context-aware container component for UI operations for the grid components. + +- **constructor**(): IgxGridToolbarComponent +- **showProgress**: `boolean` — When enabled, shows the indeterminate progress bar. +- **grid**: `GridType` — Gets/sets the grid component for the toolbar component. +- **nativeElement**: `HTMLElement` — Returns the native DOM element of the toolbar component + +### [IgxGridToolbarDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridToolbarDirective) + +- **constructor**(): IgxGridToolbarDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_dir: IgxGridToolbarDirective, ctx: unknown): ctx + +### [IgxGridToolbarExporterComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridToolbarExporterComponent) +Provides a pre-configured exporter component for the grid. + +- **constructor**(): IgxGridToolbarExporterComponent +- **exportCSV**: `boolean` — Show entry for CSV export. +- **exportEnded**: `EventEmitter` — Emitted on successful ending of an export operation. +- **exportExcel**: `boolean` — Show entry for Excel export. +- **exportPDF**: `boolean` — Show entry for PDF export. +- **exportStarted**: `EventEmitter` — Emitted when starting an export operation. Re-emitted additionally +by the grid itself. +- **filename**: `string` — The name for the exported file. +- **export**(type: "pdf" | "excel" | "csv"): void — Export the grid's data + +### [IgxGridToolbarHidingComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridToolbarHidingComponent) +Provides a pre-configured column hiding component for the grid. + +- **constructor**(): IgxGridToolbarHidingComponent + +### [IgxGridToolbarPinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridToolbarPinningComponent) +Provides a pre-configured column pinning component for the grid. + +- **constructor**(): IgxGridToolbarPinningComponent + +### [IgxGridToolbarTitleComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxGridTransactionStatePipe) + +- **constructor**(): IgxGridTransactionStatePipe +- **transform**(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any, ___: any): unknown + +### [IgxGridUnmergeActivePipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGridUnmergeActivePipe) + +- **constructor**(): IgxGridUnmergeActivePipe +- **transform**(collection: any, colsToMerge: ColumnType[], activeRowIndexes: number[], pinned: boolean, _pipeTrigger: number): any + +### [IgxGridValidationService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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. +- **isFieldInvalid**(formGroup: FormGroup, fieldName: string): boolean — Checks the validity of the native ngControl +- **isFieldValidAfterEdit**(formGroup: FormGroup, fieldName: string): boolean — Checks the validity of the native ngControl after edit +- **markAsTouched**(key: any, field?: string): void — Marks the associated record or field as touched. + +### [IgxGroupByRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGroupByRow) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **grid**: `GridType` — The grid that contains the row. +- **index**: `number` — Returns the row index. +- **isGroupByRow**: `boolean` — Returns always true, because this is in instance of an group by row. +- **children**: `RowType[]` — Optional +Contains the child rows of the current row, if there are any. +- **expanded**: `boolean` — Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed +- **groupRow**: `IGroupByRecord` — The IGroupByRecord object, representing the group record, if the row is a GroupByRow. +- **selected**: `boolean` — Optional +Indicates whether the current row is selected +- **viewIndex**: `number` — Returns the view index calculated per the grid page. +- **isActive**(): boolean +- **toggle**(): void — Toggles the group row expanded/collapsed state. +groupRow.toggle() + +### [IgxGroupedTreeGridSorting](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGroupedTreeGridSorting) +Represents a class implementing the IGridSortingStrategy interface. +It provides sorting functionality for grid data based on sorting expressions. + +- **constructor**(): IgxGroupedTreeGridSorting +- static **instance**(): IgxGroupedTreeGridSorting + +### [IgxGrouping](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxGrouping) +Represents a class implementing the IGridGroupingStrategy interface and extending the sorting class. +It provides a method to group data based on the given grouping state. + +- **constructor**(): IgxGrouping +- **groupBy**(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult: IGroupByResult): IGroupByResult — Groups the provided data based on the given grouping state. +Returns an object containing the result of the grouping operation. + +### [IgxHeaderGroupStylePipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxHeaderGroupStylePipe) + +- **constructor**(): IgxHeaderGroupStylePipe +- **transform**(styles: any, column: ColumnType, _: number): any + +### [IgxHierarchicalGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxHierarchicalGridComponent) +Hierarchical grid + +- **constructor**(): IgxHierarchicalGridComponent +- **data**: `any[]` — Returns an array of data set to the hierarchical grid. +let filteredData = this.grid.filteredData; +- **expandChildren**: `boolean` — Gets if all immediate children of the hierarchical grid previously have been set to be expanded/collapsed. +If previously set and some rows have been manually expanded/collapsed it will still return the last set value. +const expanded = this.grid.expandChildren; +- **foreignKey**: `any` — Gets the unique identifier of the parent row. It may be a string or number if primaryKey of the +parent grid is set or an object reference of the parent record otherwise. +const foreignKey = this.grid.foreignKey; +- **id**: `string` — Represents the unique identifier of the grid. +- **resourceStrings**: `PrefixedResourceStrings` — Gets/Sets the resource strings. +- **schema**: `EntityType[]` +- **selectedCells**: `CellType[]` — Returns an array of the selected grid cells. +- **totalItemCount**: `number` +- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getRowByIndex**(index: number): RowType — Returns the RowType by index. +- **getRowByKey**(key: any): RowType — Returns the RowType by key. +- **getSelectedData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...]. +- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id. +- **unpinRow**(rowID: any): boolean — Unpin the row by its id. + +### [IgxHierarchicalGridRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxHierarchicalGridRow) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **cells**: `CellType[]` — Optional +A list or an array of cells, that belong to the row +- **hasChildren**: `boolean` — Optional +Indicates whether the current row has any child rows +- **viewIndex**: `number` — Returns the view index calculated per the grid page. + +### [IgxHierarchicalTransactionFactory](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxHierarchicalTransactionFactory) +Factory service for instantiating HierarchicalTransactionServices + +- **constructor**(): IgxHierarchicalTransactionFactory +- **create**(type: TRANSACTION_TYPE): HierarchicalTransactionService — Creates a new HierarchialTransaction service instance depending on the specified type. + +### [IgxHintDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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; + +### [IgxIconButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxIconButtonDirective) +The icon button provides a way to use an icon as a fully functional button. + +- **constructor**(): IgxIconButtonDirective +- **type**: `IgxIconButtonType` + +### [IgxIconComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxIconComponent) +Icon provides a way to include material icons to markup + +- **constructor**(): IgxIconComponent +- **active**: `boolean` — An +- **ariaHidden**: `boolean` — The aria-hidden attribute of the icon. + By default is set to 'true'. +- **el**: `ElementRef` +- **family**: `string` — An +- **name**: `string` — Set the name of the icon. +- **getActive**: `boolean` — An accessor that returns the value of the active property. +- **getFamily**: `string` — An accessor that returns the value of the family property. +- **getInactive**: `boolean` — An accessor that returns inactive property. +- **getName**: `string` — An accessor that returns the value of the iconName property. +- **getSvg**: `SafeHtml` — An accessor that returns the underlying SVG image as SafeHtml. + +### [IgxIconService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 icon. +In addition it could be used to associate a custom class to be applied on icon according to given font-family. + +Example: +this.iconService.setFamily('material', { className: 'material-icons', type: 'font' }); +this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); + +- **constructor**(): IgxIconService +- **iconLoaded**: `Observable` — Observable that emits when an icon is successfully loaded +through a HTTP request. +- **defaultFamily**: `IconFamily` — Returns the default font-family. + const defaultFamily = this.iconService.defaultFamily; +- **addIconRef**(name: string, family: string, icon: IconMeta): void — Adds an icon reference meta for an icon in a meta family. + Executes only if no icon reference is found. + this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); +- **addSvgIcon**(name: string, url: string, family: string, stripMeta: boolean): void — Adds an SVG image to the cache. SVG source is an url. + this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); +- **addSvgIconFromText**(name: string, iconText: string, family: string, stripMeta: boolean): void — Adds an SVG image to the cache. SVG source is its text. + this.iconService.addSvgIconFromText('simple', ' + ', 'svg-flags'); +- **familyClassName**(alias: string): string — Returns the custom class, if any, associated to a given font-family. + const familyClass = this.iconService.familyClassName('material'); +- **getIconRef**(name: string, family: string): IconReference — Returns the icon reference meta for an icon in a given family. + const iconRef = this.iconService.getIconRef('aruba', 'default'); +- **getSvgIcon**(name: string, family: string): SafeHtml — Returns the cached SVG image as string. + const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags'); +- **isSvgIconCached**(name: string, family: string): boolean — Returns whether a given SVG image is present in the cache. + const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags'); +- **registerFamilyAlias**(alias: string, className: string, type: IconType): this — Registers a custom class to be applied to icon for a given font-family. + this.iconService.registerFamilyAlias('material', 'material-icons'); +- **setFamily**(name: string, meta: FamilyMeta): void — Creates a family to className relationship that is applied to the icon + whenever that family name is used. + this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' }); +- **setIconRef**(name: string, family: string, icon: IconMeta): void — Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family. + this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' }); + +### [IgxInputDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxInputDirective) +The igxInput directive creates single- or multiline text elements, covering common scenarios when dealing with form inputs. + +- **constructor**(): IgxInputDirective +- **inputGroup**: `IgxInputGroupBase` +- **isInput**: `boolean` — Sets/gets whether the "igx-input-group__input" class is added to the host element. +Default value is false. +- **isTextArea**: `boolean` — Sets/gets whether the "class.igx-input-group__textarea" class is added to the host element. +Default value is false. +- **disabled**: `boolean` — Gets the disabled property +- **focused**: `boolean` — Gets whether the igxInput is focused. +- **hasPlaceholder**: `boolean` — Gets whether the igxInput has a placeholder. +- **isValid**: `boolean` — Gets whether the igxInput is valid. +- **nativeElement**: `HTMLInputElement` — Gets the nativeElement of the igxInput. +- **placeholder**: `string` — Gets the placeholder element of the igxInput. +- **required**: `boolean` — Gets whether the igxInput is required. +- **valid**: `IgxInputState` — Gets the state of the igxInput. +- **value**: `any` — Gets the value property. +- **focus**(): void — Sets a focus on the igxInput. + +### [IgxInputGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxInputGroupComponent) + +- **constructor**(): IgxInputGroupComponent +- **defaultClass**: `boolean` — Property that enables/disables the auto-generated class of the input group. +By default applied the class is applied. + @ViewChild("MyInputGroup") + public inputGroup: IgxInputGroupComponent; + ngAfterViewInit(){ + this.inputGroup.defaultClass = false; + +} +- **element**: `ElementRef` +- **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 input group has border. +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputBorder = this.inputGroup.hasBorder; +} +- **hasHints**: `boolean` — Returns whether the input group has hints. +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputHints = this.inputGroup.hasHints; +} +- **isTypeBootstrap**: `boolean` — Returns true if the input group theme is Bootstrap. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBootstrap = this.inputGroup.isTypeBootstrap; +} +- **isTypeBorder**: `boolean` — Returns whether the input group type is border. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBorder = this.inputGroup.isTypeBorder; +} +- **isTypeBox**: `boolean` — Returns whether the input group type is box. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeBox = this.inputGroup.isTypeBox; +} +- **isTypeFluent**: `boolean` — Returns true if the input group theme is Fluent. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeFluent = this.inputGroup.isTypeFluent; +} +- **isTypeIndigo**: `boolean` — Returns true if the input group theme is Indigo. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeIndigo = this.inputGroup.isTypeIndigo; +} +- **isTypeLine**: `boolean` — Returns whether the input group type is line. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeLine = this.inputGroup.isTypeLine; +} +- **isTypeSearch**: `boolean` — Returns whether the input group type is search. +@ViewChild("MyInputGroup1") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let isTypeSearch = this.inputGroup.isTypeSearch; +} +- **resourceStrings**: `IInputResourceStrings` — Returns the resource strings. +- **theme**: `IgxTheme` — Returns the theme of the input. +The returned value is of type input group type. +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit() { + let inputTheme = this.inputGroup.theme; +} +- **type**: `IgxInputGroupType` — Returns the type of the input group. How the input is styled. +The default is box. +@ViewChild("MyInputGroup") +public inputGroup: IgxInputGroupComponent; +ngAfterViewInit(){ + let inputType = this.inputGroup.type; +} + +### [IgxInsertDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxInsertDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxInsertDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void + +### [IgxLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxLabelDirective) + +- **constructor**(): IgxLabelDirective +- **defaultClass**: `boolean` + +### [IgxLayoutDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxLayoutDirective) + +- **constructor**(): IgxLayoutDirective +- **dir**: `string` — Sets the default flow direction of the container's children. + +Defaults to rows. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+- **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. + +
+
1
+
2
+
3
+
+ +### [IgxLinearProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxLinearProgressBarComponent) + +- **constructor**(): IgxLinearProgressBarComponent +- **cssClass**: `string` +- **id**: `string` — Sets the value of id attribute. If not provided it will be automatically generated. + +- **role**: `string` — Sets the value of the role attribute. If not provided it will be automatically set to progressbar. + +- **striped**: `boolean` — Set linear progress bar to have striped style. By default it is set to false. + +- **textAlign**: `IgxTextAlign` — Set the position that defines where the text is aligned. +Possible options - START (default), CENTER, END. +public positionCenter: IgxTextAlign; +public ngOnInit() { + this.positionCenter = IgxTextAlign.CENTER; +} + //... + + +- **textTop**: `boolean` — Set the position that defines if the text should be aligned above the progress line. By default, is set to false. + +- **textVisibility**: `boolean` — Set the text to be visible. By default, it is set to true. + +- **type**: `string` — Set type of the linear progress bar. Possible options - default, success, info, warning, and error. + +- **valueMin**: `number` +- **ngAfterContentInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of all of the directive's +content. +It is invoked only once when the directive is instantiated. + +### [IgxListActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxListComponent) +Displays a collection of data items in a templatable list format + +- **constructor**(): 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` — Returns a collection of all items and headers in the list. +- **dataLoadingTemplate**: `IgxDataLoadingTemplateDirective` — Sets/gets the list loading template. +- **element**: `ElementRef` +- **emptyListTemplate**: `IgxEmptyListTemplateDirective` — Sets/gets the empty list template. +- **endPan**: `EventEmitter` — 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` — Event emitted when a list item is clicked. +- **leftPan**: `EventEmitter` — 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` — Event emitted when a pan gesture is executed on a list item. +- **resetPan**: `EventEmitter` — Event emitted when a pan item is returned to its original position. +- **rightPan**: `EventEmitter` — Event emitted when a right pan gesture is executed on a list item. +- **startPan**: `EventEmitter` — Event emitted when a pan gesture is started. +- **context**: `any` — Gets the context object of the template binding. +- **headers**: `IgxListItemComponent[]` — Gets the header list items. +- **isListEmpty**: `boolean` — Gets a boolean indicating if the list is empty. +- **items**: `IgxListItemComponent[]` — Gets the list items excluding the header ones. +- **resourceStrings**: `IListResourceStrings` — Returns the resource strings. +- **role**: `string` — Gets/Sets the role attribute value. +- **template**: `TemplateRef` — Gets a TemplateRef to the currently used template. + +### [IgxListItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxListItemComponent) +The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component. + +Example: + + Contacts + + {{ contact.name }} + {{ contact.phone }} + + + +- **constructor**(): 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. +Hidden Item + +let isHidden = this.listItem.hidden; +- **isHeader**: `boolean` — Sets/gets whether the list item is a header. +Header + +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 list item itself. +let listItemComponent = this.listItem.context; +- **display**: `string` — Returns string value which describes the display mode of the list item. +let isHidden = this.listItem.display; +- **element**: `any` — Returns an element reference to the list item. +let listItemElement = this.listItem.element. +- **headerStyle**: `boolean` — Indicates whether list item should have header style. +let headerStyle = this.listItem.headerStyle; +- **index**: `number` — Gets the index of a list item. +let itemIndex = this.listItem.index; +- **innerStyle**: `boolean` — Applies the inner style of the list item if the item is not counted as header. +let innerStyle = this.listItem.innerStyle; +- **maxLeft**: `number` — Gets the maximum left position of the list item. +let maxLeft = this.listItem.maxLeft; +- **maxRight**: `any` — Gets the maximum right position of the list item. +let maxRight = this.listItem.maxRight; +- **panState**: `IgxListPanState` — Gets the panState of a list item. +let itemPanState = this.listItem.panState; +- **role**: `string` — Gets/Sets the role attribute of the list item. +let itemRole = this.listItem.role; +- **selected**: `boolean` — Sets/gets whether the list item is selected. +Selection is only applied to non-header items. +When selected, the CSS class 'igx-list__item-base--selected' is added to the item. +Selected Item + +let isSelected = this.listItem.selected; +this.listItem.selected = true; +- **width**: `any` — Gets the width of a list item. +let itemWidth = this.listItem.width; + +### [IgxListItemLeftPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxListItemLeftPanningTemplateDirective) + +- **constructor**(): IgxListItemLeftPanningTemplateDirective +- **template**: `TemplateRef` + +### [IgxListItemRightPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxListItemRightPanningTemplateDirective) + +- **constructor**(): IgxListItemRightPanningTemplateDirective +- **template**: `TemplateRef` + +### [IgxListLineDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/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/22.0.0/classes/IgxMaskDirective) + +- **constructor**(): IgxMaskDirective +- **displayValuePipe**: `PipeTransform` — Specifies a pipe to be used on blur. + +- **focusedValuePipe**: `PipeTransform` — Specifies a pipe to be used on focus. + +- **includeLiterals**: `boolean` — Specifies if the bound value includes the formatting symbols. + +- **promptChar**: `string` — Sets the character representing a fillable spot in the input mask. +Default value is "'_'". + +- **valueChanged**: `EventEmitter` — Emits an event each time the value changes. +Provides rawValue: string and formattedValue: string as event arguments. + +- **mask**: `string` — Sets the input mask. + + +### [IgxMonthPickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxMonthPickerComponent) + +- **id**: `string` — Sets/gets the id of the month picker. +If not set, the id will have value "igx-month-picker-0". +- **ngAfterViewInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of a component's view. +It is invoked only once when the view is instantiated. +- **ngOnInit**(): void — A callback method that is invoked immediately after the +default change detector has checked the directive's +data-bound properties for the first time, +and before any of the view or content children have been checked. +It is invoked only once when the directive is instantiated. +- **selectDate**(value: Date): Date — Selects a date. + this.monthPicker.selectDate(new Date(2018-06-12)); + +### [IgxMonthsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxMonthsViewComponent) + +- **constructor**(): IgxMonthsViewComponent +- **el**: `ElementRef` +- **formatView**: `boolean` — Gets/sets whether the view should be rendered +according to the locale and format, if any. +- **id**: `string` — Sets/gets the id of the months view. +If not set, the id will have value "igx-months-view-0". + + +let monthsViewId = this.monthsView.id; +- **monthFormat**: `any` — Gets the month format option of the months view. +let monthFormat = this.monthsView.monthFormat. +- **standalone**: `boolean` + +### [IgxNavbarActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNavbarActionDirective) +Action icon is a container for the action nav icon of the navbar. + +- **constructor**(): IgxNavbarActionDirective + +### [IgxNavbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + search + favorite + more_vert + + +- **constructor**(): IgxNavbarComponent +- **action**: `EventEmitter` — The event that will be thrown when the action is executed, +provides reference to the navbar component as argument +public actionExc(event){ + alert("Action Execute!"); +} + //.. + + +- **actionButtonIcon**: `string` — Sets the icon of the navbar. + +- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated. + +- **title**: `string` — Sets the title of the navbar. + +- **titleId**: `string` — Sets the titleId of the navbar. If not set it will be automatically generated. + +- **isActionButtonVisible**: `boolean` — Returns whether the navbar 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/22.0.0/classes/IgxNavbarTitleDirective) + +- **constructor**(): IgxNavbarTitleDirective + +### [IgxNavDrawerItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNavDrawerItemDirective) + +- **constructor**(): IgxNavDrawerItemDirective +- **active**: `boolean` — Styles a navigation drawer item as selected. +If not set, active will have default value false. +- **disabled**: `boolean` — Disables a navigation drawer item. +If not set, disabled will have default value false. +- **isHeader**: `boolean` — Styles a navigation drawer item as a group header. +If not set, isHeader will have default value false. + +### [IgxNavDrawerMiniTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNavDrawerMiniTemplateDirective) + +- **constructor**(): IgxNavDrawerMiniTemplateDirective +- **template**: `TemplateRef` + +### [IgxNavDrawerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNavDrawerTemplateDirective) + +- **constructor**(): IgxNavDrawerTemplateDirective +- **template**: `TemplateRef` + +### [IgxNavigationCloseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNavigationCloseDirective) +Directive that can close targets through provided NavigationService. + +Usage: + + +Where the ID matches the ID of compatible IToggleView component. + +- **constructor**(): IgxNavigationCloseDirective +- **state**: `IgxNavigationService` +- **closeNavigationDrawer**(): void + +### [IgxNavigationDrawerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + + + + +- **constructor**(): IgxNavigationDrawerComponent +- **closed**: `EventEmitter` — Event fired when the Navigation Drawer has closed. + + +- **closing**: `EventEmitter` — Event fired as the Navigation Drawer is about to close. + + +- **disableAnimation**: `boolean` — Enables/disables the animation, when toggling the drawer. Set to false by default. +html + +- **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; + + + + +- **id**: `string` — ID of the component + +// get +let myNavDrawerId = this.navdrawer.id; + + + + +- **miniWidth**: `string` — Width of the drawer in its mini state. + +// get +let navDrawerMiniWidth = this.navdrawer.miniWidth; + + + + +- **opened**: `EventEmitter` — Event fired when the Navigation Drawer has opened. + + +- **opening**: `EventEmitter` — Event fired as the Navigation Drawer is about to open. + + +- **pinChange**: `EventEmitter` — Pinned state change output for two-way binding. + + +- **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; + + + + +- **position**: `string` — Position of the Navigation Drawer. Can be "left"(default) or "right". + +// get +let myNavDrawerPosition = this.navdrawer.position; + + + + +- **isOpen**: `boolean` — State of the drawer. + +// get +let navDrawerIsOpen = this.navdrawer.isOpen; + + + + + + +Two-way data binding. + + +- **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; + + + + +- **width**: `string` +- **close**(): void — Close the Navigation Drawer. Has no effect if already closed. + +this.navdrawer.close(); +- **open**(): void — Open the Navigation Drawer. Has no effect if already opened. + +this.navdrawer.open(); +- **toggle**(): void — Toggle the open state of the Navigation Drawer. + +this.navdrawer.toggle(); + +### [IgxNavigationService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxNavigationToggleDirective) +Directive that can toggle targets through provided NavigationService. + +Usage: + + +Where the ID matches the ID of compatible IToggleView component. + +- **constructor**(): IgxNavigationToggleDirective +- **state**: `IgxNavigationService` +- **toggleNavigationDrawer**(): void + +### [IgxNotificationsDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNotificationsDirective) +Common interface for Components with show and collapse functionality + +- **constructor**(): IgxNotificationsDirective +- **ariaLive**: `string` — Sets/gets the aria-live attribute. +If not set, aria-live will have value "polite". +- **autoHide**: `boolean` — Sets/gets whether the element will be hidden after the displayTime is over. +Default value is true. +- **displayTime**: `number` — Sets/gets the duration of time span (in milliseconds) which the element will be visible +after it is being shown. +Default value is 4000. +- **outlet**: `IgxOverlayOutletDirective | ElementRef` — Gets/Sets the container used for the element. +- **positioning**: `"container" | "viewport"` — Controls whether positioning is relative to the viewport or to the nearest positioned container. +- **isVisible**: `boolean` — Enables/Disables the visibility of the element. +If not set, the isVisible attribute will have value false. +- **close**(): void — Hides the element. + +### [IgxNumberFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNumberFilteringOperand) +Provides filtering operations for numbers + + +### [IgxNumberFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNumberFormatterPipe) + +- **constructor**(): IgxNumberFormatterPipe +- **transform**(value: string | number, digitsInfo?: string, locale?: string): string + +### [IgxNumberSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxNumberSummaryOperand) + +- **constructor**(): IgxNumberSummaryOperand +- **operate**(data: any[], allData: any[], fieldName?: string, groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static methods and returns summary result[]. +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/22.0.0/classes/IgxOverlayOutletDirective) +Mark an element as an igxOverlay outlet container. +Directive instance is exported as overlay-outlet to be assigned to templates variables: +
+ +- **constructor**(): IgxOverlayOutletDirective +- **element**: `ElementRef` + +### [IgxOverlayService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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**(): IgxOverlayService +- **animationStarting**: `EventEmitter` — Emitted just before the overlay animation start. +animationStarting(event: OverlayAnimationEventArgs){ + const animationStarting = event; +} +- **closed**: `EventEmitter` — Emitted after the overlay content is closed and all animations are finished. +closed(event: OverlayEventArgs){ + const closed = event; +} +- **closing**: `EventEmitter` — Emitted just before the overlay content starts to close. +closing(event: OverlayCancelableEventArgs){ + const closing = event; +} +- **contentAppended**: `EventEmitter` — Emitted after the content is appended to the overlay, and before animations are started. +contentAppended(event: OverlayEventArgs){ + const contentAppended = event; +} +- **contentAppending**: `EventEmitter` — Emitted before the content is appended to the overlay. +contentAppending(event: OverlayEventArgs){ + const contentAppending = event; +} +- **opened**: `EventEmitter` — Emitted after the overlay content is opened and all animations are finished. +opened(event: OverlayEventArgs){ + const opened = event; +} +- **opening**: `EventEmitter` — Emitted just before the overlay content starts to open. +opening(event: OverlayCancelableEventArgs){ + const opening = event; +} +- **attach**(element: ElementRef, settings?: OverlaySettings): string — Generates Id. Provide this Id when call show(id) method +- **attach**(component: Type, settings?: OverlayCreateSettings): string — Generates Id. Provide this Id when call show(id) method +- **attach**(component: Type, viewContainerRef: ViewContainerRef, settings?: OverlaySettings): string — Generates an Id. Provide this Id when calling the show(id) method +- **detach**(id: string): void — Remove overlay with the provided id. +- **detachAll**(): void — Remove all the overlays. +this.overlay.detachAll(); +- **hide**(id: string, event?: Event): void — Hides the component with the ID provided as a parameter. +this.overlay.hide(id); +- **hideAll**(): void — Hides all the components and the overlay. +this.overlay.hideAll(); +- **reposition**(id: string): void — Repositions the component with ID provided as a parameter. +- **setOffset**(id: string, deltaX: number, deltaY: number, offsetMode?: OffsetMode): void — Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values +- **show**(id: string, settings?: OverlaySettings): void — Shows the overlay for provided id. +- static **createAbsoluteOverlaySettings**(position?: AbsolutePosition, useContainerStrategy?: boolean): OverlaySettings — Creates overlay settings with global or container position strategy and preset position settings. +- static **createAbsoluteOverlaySettings**(position?: AbsolutePosition, outlet?: IgxOverlayOutletDirective | ElementRef): OverlaySettings +- 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/22.0.0/classes/IgxPageNavigationComponent) + +- **constructor**(): IgxPageNavigationComponent +- **paginator**: `IgxPaginatorComponent` +- **role**: `string` — Sets the role attribute of the element. + +### [IgxPageSizeSelectorComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPageSizeSelectorComponent) + +- **constructor**(): IgxPageSizeSelectorComponent +- **id**: `string` +- **paginator**: `IgxPaginatorComponent` +- **labelId**: `string` + +### [IgxPaginatorComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPaginatorComponent) +Paginator component description + +- **constructor**(): IgxPaginatorComponent +- **pageChange**: `EventEmitter` — Emitted after the current page is changed. +- **paging**: `EventEmitter` — Emitted before paging is performed. +- **pagingDone**: `EventEmitter` — Emitted after paging is performed. +- **perPageChange**: `EventEmitter` — Emitted when perPage property value of the paginator is changed. +- **totalPages**: `number` — Total pages calculated from totalRecords and perPage +- **isFirstPage**: `boolean` — Returns if the current page is the first page. +const lastPage = this.paginator.isFirstPage; +- **isLastPage**: `boolean` — Returns if the current page is the last page. +const lastPage = this.paginator.isLastPage; +- **nativeElement**: `any` +- **overlaySettings**: `OverlaySettings` — Sets custom OverlaySettings. + +- **page**: `number` — Gets/Sets the current page of the paginator. +The default is 0. +let page = this.paginator.page; +- **perPage**: `number` — Gets/Sets the number of visible items per page in the paginator. +The default is 15. +let itemsPerPage = this.paginator.perPage; +- **resourceStrings**: `IPaginatorResourceStrings` — An accessor that returns the resource strings. +- **selectOptions**: `number[]` — Sets custom options in the select of the paginator +let options = this.paginator.selectOptions; +- **totalRecords**: `number` — Sets the total records. +let totalRecords = this.paginator.totalRecords; +- **nextPage**(): void — Goes to the next page of the paginator, 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 paginator, if the paginator is not already at the first page. +this.paginator.previousPage(); + +### [IgxPaginatorContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPaginatorContentDirective) + +- **constructor**(): IgxPaginatorContentDirective + +### [IgxPaginatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPaginatorDirective) + +- **constructor**(): IgxPaginatorDirective +- **template**: `TemplateRef` + +### [IgxPdfExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPdfExporterOptions) +Objects of this class are used to configure the PDF exporting process. + +- **constructor**(fileName: string): IgxPdfExporterOptions +- **customFont**: `PdfUnicodeFont` — Custom font configuration for Unicode character support in PDF exports. + +By default, the PDF exporter uses the built-in Helvetica font, which only supports +basic Latin characters. If your data contains non-Latin characters (such as Cyrillic, +Chinese, Japanese, Arabic, Hebrew, or special symbols), you must provide a custom +TrueType font (TTF) that includes the required character glyphs. + +The font data must be provided as a Base64-encoded string of the TTF file contents. +You can optionally provide a separate bold variant for header styling. +- **fontSize**: `number` — Specifies the font size for the table content. (10 by default) +let fontSize = this.exportOptions.fontSize; +this.exportOptions.fontSize = 12; +- **pageOrientation**: `"portrait" | "landscape"` — Specifies the page orientation. (portrait or landscape, landscape by default) +let pageOrientation = this.exportOptions.pageOrientation; +this.exportOptions.pageOrientation = 'portrait'; +- **pageSize**: `string` — Specifies the page size. (a4, a3, letter, legal, etc., a4 by default) +let pageSize = this.exportOptions.pageSize; +this.exportOptions.pageSize = 'letter'; +- **showTableBorders**: `boolean` — Specifies whether to show table borders. (True by default) +let showTableBorders = this.exportOptions.showTableBorders; +this.exportOptions.showTableBorders = false; + +### [IgxPdfExporterService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPdfExporterService) +**Ignite UI for Angular PDF Exporter Service** - +[Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter_pdf.html) + +The Ignite UI for Angular PDF Exporter service can export data in PDF format from both raw data +(array) or from an grid. + +Example: +public localData = [ + { Name: "Eric Ridley", Age: "26" }, + { Name: "Alanis Brook", Age: "22" }, + { Name: "Jonathan Morris", Age: "23" } +]; + +constructor(private pdfExportService: IgxPdfExporterService) { +} + +this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions("FileName")); + +- **constructor**(): IgxPdfExporterService +- **exportEnded**: `EventEmitter` — This event is emitted when the export process finishes. +this.exporterService.exportEnded.subscribe((args: IPdfExportEndedEventArgs) => { +// put event handler code here +}); + +### [IgxPdfTextDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPdfTextDirective) + +- **constructor**(): IgxPdfTextDirective + +### [IgxPercentFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPercentFormatterPipe) + +- **constructor**(): IgxPercentFormatterPipe +- **transform**(value: string | number, digitsInfo?: string, locale?: string): string + +### [IgxPickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPickerActionsDirective) +Picker actions can be used to re-template the dropdown/dialog action buttons. + +- **constructor**(): IgxPickerActionsDirective +- **template**: `TemplateRef` + +### [IgxPickerClearComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPickerClearComponent) +Templates the default clear icon in the picker. + +- **constructor**(): IgxPickerClearComponent + +### [IgxPickerToggleComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPickerToggleComponent) +Templates the default toggle icon in the picker. + +- **constructor**(): IgxPickerToggleComponent +- **clicked**: `EventEmitter` +- **onClick**(event: MouseEvent): void + +### [IgxPivotAggregate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPivotAggregate) + +- **constructor**(): IgxPivotAggregate +- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for base aggregation. +IgxPivotAggregate.aggregators(); +- static **count**(members: number[]): number — Counts all the records in the data source. +If filtering is applied, counts only the filtered records. +IgxSummaryOperand.count(dataSource); + +### [IgxPivotDataSelectorComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPivotDataSelectorComponent) +Pivot Data Selector provides means to configure the pivot state of the Pivot Grid via a vertical panel UI + +- **constructor**(): IgxPivotDataSelectorComponent +- **animationSettings**: `any` +- **columnsExpanded**: `boolean` — Gets/sets whether the columns panel is expanded +Get + const columnsPanelState: boolean = this.dataSelector.columnsExpanded; + +Set + + + +Two-way data binding: + +- **columnsExpandedChange**: `EventEmitter` — Emitted when the columns panel is expanded or collapsed. +- **filtersExpanded**: `boolean` — Gets/sets whether the filters panel is expanded +Get + const filtersPanelState: boolean = this.dataSelector.filtersExpanded; + +Set + + + +Two-way data binding: + +- **filtersExpandedChange**: `EventEmitter` — Emitted when the filters panel is expanded or collapsed. +- **rowsExpanded**: `boolean` — Gets/sets whether the rows panel is expanded +Get + const rowsPanelState: boolean = this.dataSelector.rowsExpanded; + +Set + + + +Two-way data binding: + +- **rowsExpandedChange**: `EventEmitter` — Emitted when the rows panel is expanded or collapsed. +- **valuesExpanded**: `boolean` — Gets/sets whether the values panel is expanded +Get + const valuesPanelState: boolean = this.dataSelector.valuesExpanded; + +Set + + + +Two-way data binding: + +- **valuesExpandedChange**: `EventEmitter` — Emitted when the values panel is expanded or collapsed. +- **grid**: `PivotGridType` — Returns the grid. + +### [IgxPivotDateAggregate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxPivotDateDimension) +Configuration of a pivot dimension. + +- **constructor**(inBaseDimension: IPivotDimension, inOptions: IPivotDateDimensionOptions): IgxPivotDateDimension +- **dataType**: `GridColumnDataType` — Gets/Sets data type +- **defaultOptions**: `any` — Default options. +- **displayName**: `string` — Display name to show instead of the field name of this value. * +- **enabled**: `boolean` — Enables/Disables a particular dimension from pivot structure. +- **baseDimension**: `IPivotDimension` — Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values. +Having base dimension set is required in order for the Date Dimensions to show. +- **options**: `IPivotDateDimensionOptions` — Gets/Sets the options for the predefined date dimensions whether to show quarter, years and etc. +- **resourceStrings**: `IGridResourceStrings` + +### [IgxPivotGridColumnResizerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPivotGridColumnResizerComponent) + +- **constructor**(): IgxPivotGridColumnResizerComponent +- **colResizingService**: `IgxPivotColumnResizingService` + +### [IgxPivotGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPivotGridComponent) +Pivot Grid provides a way to present and manipulate data in a pivot table view. + +- **constructor**(): IgxPivotGridComponent +- **autoGenerateConfig**: `boolean` — Gets/Sets whether to auto-generate the pivot configuration based on the provided data. +- **dimensionInit**: `EventEmitter` — Emitted when the dimension is initialized. +- **dimensionsChange**: `EventEmitter` — Emitted when the dimension collection is changed via the grid chip area. +- **dimensionsSortingExpressionsChange**: `EventEmitter[]>` — Emitted when a dimension is sorted. +- **emptyPivotGridTemplate**: `TemplateRef` — Gets/Sets a custom template when pivot grid is empty. +- readonly **gridAPI**: `GridBaseAPIService` — Represents the grid service type providing API methods for the grid +- **navigation**: `IgxPivotGridNavigationService` +- **pivotConfigurationChange**: `EventEmitter` — Emitted when any of the pivotConfiguration properties is changed via the grid chip area. +- **rowDimensionHeaderTemplate**: `TemplateRef` +- **valueChipTemplate**: `TemplateRef` — Gets/Sets a custom template for the value chips. +- **valueInit**: `EventEmitter` — Emitted when the value is initialized. +- **valuesChange**: `EventEmitter` — Emitted when the values collection is changed via the grid chip area. +- **allDimensions**: `IPivotDimension[]` — An array of all dimensions (rows and columns) in the pivot grid. +it includes hierarchical level, filters and sorting, dimensional level, etc. +- **allowAdvancedFiltering**: `boolean` +- **allowFiltering**: `boolean` — Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered +- **batchEditing**: `boolean` +- **data**: `any[]` — Returns an array of data set to the component. +let data = this.grid.data; +- **defaultExpandState**: `boolean` — Gets/Sets the default expand state for all rows. +- **dimensionsSortingExpressions**: `ISortingExpression[]` — Gets the sorting expressions generated for the dimensions. +- **dragIndicatorIconTemplate**: `TemplateRef` — The template for drag indicator icons. Could be of any type +- **filterMode**: `FilterMode` — The filter mode for the grid. It can be quick filter of excel-style filter +- **hideRowSelectors**: `boolean` +- **id**: `string` — Represents the unique identifier of the grid. +- **pagingMode**: `GridPagingMode` — Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page +- **pinning**: `any` — The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) +- **pivotConfiguration**: `IPivotConfiguration` — The configuration settings for the pivot grid. +it includes dimension strategy for rows and columns, filters and data keys +- **pivotUI**: `IPivotUISettings` — Specifies whether to show the pivot configuration UI in the grid. +- **pivotValueCloneStrategy**: `IDataCloneStrategy` +- **rowDraggable**: `boolean` — Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged +- **rowEditable**: `boolean` — Indicates whether rows in the grid are editable. If te value is true, the rows can be edited +- **selectedRows**: `any[]` — Gets/Sets the current selection state. +- **shouldGenerate**: `boolean` +- **showSummaryOnCollapse**: `boolean` +- **summaryCalculationMode**: `GridSummaryCalculationMode` — Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' +- **summaryPosition**: `GridSummaryPosition` — Represents the position of summaries: 'top', 'bottom' +- **summaryRowHeight**: `number` — Get/Set summary row height +- **superCompactMode**: `boolean` — Enables a super compact theme for the component. +- **totalRecords**: `number` +- **autoSizeRowDimension**(dimension: IPivotDimension): void — Auto-sizes row dimension cells. +- **filterDimension**(dimension: IPivotDimension, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree): void — Filters a single IPivotDimension. +- **getColumnGroupExpandState**(col: IgxColumnComponent): boolean +- **insertDimensionAt**(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void — Inserts dimension in target collection by type at specified index or at the collection's end. +- **insertValueAt**(value: IPivotValue, index?: number): void — Inserts value at specified index or at the end. +- **moveDimension**(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number): void — Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end. +- **moveValue**(value: IPivotValue, index?: number): void — Move value from its currently at specified index or at the end. +- **notifyDimensionChange**(regenerateColumns: boolean): void — Notifies for dimension change. +- **removeDimension**(dimension: IPivotDimension): void — Removes dimension from its currently collection. +- **removeValue**(value: IPivotValue): void — Removes value from collection. +- **sortDimension**(dimension: IPivotDimension, sortDirection: SortingDirection): void — Sort the dimension and its children in the provided direction. +- **toggleColumn**(col: IgxColumnComponent): void +- **toggleDimension**(dimension: IPivotDimension): void — Toggles the dimension's enabled state on or off. +- **toggleRowGroup**(col: IgxColumnComponent, newState: boolean): void +- **toggleValue**(value: IPivotValue): void — Toggles the value's enabled state on or off. + +### [IgxPivotNumericAggregate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxPivotNumericAggregate) + +- **constructor**(): IgxPivotNumericAggregate +- static **aggregators**(): IPivotAggregator[] — Gets array with default aggregator function for numeric aggregation. +IgxPivotAggregate.aggregators(); +- static **average**(members: number[]): number — Returns the average numeric value in the data provided data records. +If filtering is applied, returns the average numeric value in the filtered data records. +IgxPivotNumericAggregate.average(data); +- static **max**(members: number[]): number — Returns the maximum numeric value in the provided data records. +If filtering is applied, returns the maximum value in the filtered data records. +IgxPivotNumericAggregate.max(data); +- static **min**(members: number[]): number — Returns the minimum numeric value in the provided data records. +If filtering is applied, returns the minimum value in the filtered data records. +IgxPivotNumericAggregate.min(members, data); +- static **sum**(members: number[]): number — Returns the sum of the numeric values in the provided data records. +If filtering is applied, returns the sum of the numeric values in the data records. +IgxPivotNumericAggregate.sum(data); + +### [IgxPivotTimeAggregate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxPrependDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxPrependDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, _atIndex: number): void + +### [IgxProgressBarGradientDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxProgressBarGradientDirective) + +- **constructor**(): IgxProgressBarGradientDirective +- **template**: `TemplateRef` + +### [IgxProgressBarTextTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxProgressBarTextTemplateDirective) + +- **constructor**(): IgxProgressBarTextTemplateDirective +- **template**: `TemplateRef` + +### [IgxQueryBuilderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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**(): IgxQueryBuilderComponent +- **disableEntityChange**: `boolean` — Disables subsequent entity changes at the root level after the initial selection. +- **disableReturnFieldsChange**: `boolean` — Disables return fields changes at the root level. +- **expressionTreeChange**: `EventEmitter` — Event fired as the expression tree is changed. + + +- **locale**: `string` — Gets the locale of the query builder. +If not set, defaults to application's locale. +- **showEntityChangeDialog**: `boolean` — Gets/sets whether the confirmation dialog should be shown when changing entity. +Default value is true. +- **entities**: `EntityType[]` — Gets the list of entities available for the query builder. + +Each entity describes a logical group of fields that can be used in queries. +An entity can optionally have child entities, allowing nested sub-queries. +- **expressionTree**: `IExpressionTree` — Returns the expression tree. +- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings. +- **searchValueTemplate**: `TemplateRef` +- **canCommit**(): boolean — Returns whether the expression tree can be committed in the current state. +- **commit**(): void — Commits the expression tree in the current state if it is valid. If not throws an exception. +- **discard**(): void — Discards all unsaved changes to the expression tree. + +### [IgxQueryBuilderHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxQueryBuilderHeaderComponent) + +- **constructor**(): IgxQueryBuilderHeaderComponent +- **showLegend**: `boolean` — Show/hide the legend. +- **title**: `string` — Sets the title of the query builder header. +- **resourceStrings**: `IQueryBuilderResourceStrings` — Returns the resource strings. + +### [IgxQueryBuilderSearchValueTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxQueryBuilderSearchValueTemplateDirective) +Defines the custom template that will be used for the search value input of condition in edit mode + +- **constructor**(): IgxQueryBuilderSearchValueTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxQueryBuilderSearchValueTemplateDirective, context: unknown): context + +### [IgxRadioComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + Simple radio button + + +- **constructor**(): IgxRadioComponent +- **cssClass**: `string` — Returns the class of the radio component. +let radioClass = this.radio.cssClass; +- **disabled**: `boolean` — Sets/gets the disabled attribute. +Default value is false. + + +let isDisabled = this.radio.disabled; +- **focused**: `boolean` — Sets/gets whether the radio component is on focus. +Default value is false. +this.radio.focus = true; + +let isFocused = this.radio.focused; +- **invalid**: `boolean` — Sets/gets whether the radio button is invalid. +Default value is false. + + +let isInvalid = this.radio.invalid; +- **checked**: `boolean` +- **deselect**(): void — Deselects the current radio button. +this.radio.deselect(); +- **select**(): void — Selects the current radio button. +this.radio.select(); +- **writeValue**(value: any): void — Checks whether the provided value is consistent to the current radio button. +If it is, the checked attribute will have value true; +this.radio.writeValue('radioButtonValue'); + +### [IgxRadioGroupDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRadioGroupDirective) +Radio group directive renders set of radio buttons. + +- **constructor**(): IgxRadioGroupDirective +- readonly **change**: `EventEmitter` — An event that is emitted after the radio group value is changed. +- **ngControl**: `NgControl` +- **alignment**: `RadioGroupAlignment` — Returns the alignment of the igx-radio-group. +@ViewChild("MyRadioGroup") +public radioGroup: IgxRadioGroupDirective; +ngAfterViewInit(){ + let radioAlignment = this.radioGroup.alignment; +} +- **invalid**: `boolean` — Sets/gets whether the radio group is invalid. +- **name**: `string` — Sets/gets the name attribute of the radio group component. All child radio buttons inherits this name. +- **radioButtons**: `QueryList` — Returns reference to the child radio buttons. +- **required**: `boolean` — Sets/gets whether the radio group is required. +- **selected**: `IgxRadioComponent` — Sets/gets the selected child radio button. +- **value**: `any` — Sets/gets the value attribute. +- **ngDoCheck**(): void — A callback method that performs change-detection, invoked +after the default change-detector has checked the directive's input +bindings in the parent template. +See KeyValueDiffers and IterableDiffers for implementing +custom change checking for collections. +- **writeValue**(value: any): void — Sets the "checked" property value on the radio input element. + +### [IgxReadOnlyInputDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxReadOnlyInputDirective) + +- **constructor**(): IgxReadOnlyInputDirective +- **igxReadOnlyInput**: `InputSignal` + +### [IgxRippleDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRippleDirective) + +- **constructor**(): IgxRippleDirective +- **rippleColor**: `string` — Sets/gets the ripple color. + + +@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. + + +@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. + + +@ViewChild('rippleContainer', {read: IgxRippleDirective}) +public ripple: IgxRippleDirective; +let rippleDuration = this.ripple.rippleDuration; +- **rippleTarget**: `string` — Sets/gets the ripple target. +
+ +@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. +
+ +
+- **centered**: `boolean` + +### [IgxRowAddCrudState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRowAddCrudState) + +- **constructor**(): IgxRowAddCrudState +- **addRowParent**: `IgxAddRowParent` + +### [IgxRowCrudState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRowCrudState) + +- **constructor**(): IgxRowCrudState +- **closeRowEditingOverlay**: `Subject` +- **nonEditable**: `boolean` +- **primaryKey**: `any` +- **rowEditing**: `boolean` +- **rowEditingBlocked**: `boolean` +- **rowInEditMode**: `RowType` +- **beginRowEdit**(event?: Event): boolean — Enters row edit mode +- **endEditMode**(): void — Clears cell and row editing state and closes row editing template if it is open +- **endRowEdit**(): void — Clears row editing state +- **exitRowEdit**(cachedRowData: any, event?: Event): IGridEditDoneEventArgs — Exit row edit mode +- **rowEdit**(event: Event): IGridEditEventArgs +- **rowEditDone**(cachedRowData: any, event: Event): IGridEditDoneEventArgs +- **updateRow**(commit: boolean, event?: Event): IGridEditEventArgs +- **updateRowEditData**(row: IgxEditRow, value?: any): void + +### [IgxRowDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRowDirective) + +- **constructor**(): IgxRowDirective +- **cdr**: `ChangeDetectorRef` +- **disabled**: `boolean` — Sets whether this specific row has disabled functionality for editing and row selection. +Default value is false. +this.grid.selectedRows[0].pinned = true; +- **element**: `ElementRef` +- **grid**: `GridType` +- **index**: `number` — The index of the row. + +// get the index of the second selected row +let selectedRowIndex = this.grid.selectedRows[1].index; +- **selectionService**: `IgxGridSelectionService` +- **addRowUI**: `any` +- **cells**: `QueryList` — Gets the rendered cells in the row component. + +// get the cells of the third selected row +let selectedRowCells = this.grid.selectedRows[2].cells; +- **data**: `any` — The data passed to the row component. + +// get the row data for the first selected row +let selectedRowData = this.grid.selectedRows[0].data; +- **dataRowIndex**: `number` +- **expanded**: `boolean` — Gets the expanded state of the row. +let isExpanded = row.expanded; +- **hasMergedCells**: `boolean` +- **inEditMode**: `boolean` +- **key**: `any` — Gets the ID of the row. +A row in the grid is identified either by: +- primaryKey data value, +- the whole data, if the primaryKey is omitted. + +let rowID = this.grid.selectedRows[2].key; +- **nativeElement**: `HTMLElement` — The native DOM element representing the row. Could be null in certain environments. + +// get the nativeElement of the second selected row +let selectedRowNativeElement = this.grid.selectedRows[1].nativeElement; +- **pinned**: `boolean` — Gets whether the row is pinned. +let isPinned = row.pinned; +- **rowHeight**: `number` +- **selected**: `boolean` +- **virtDirRow**: `IgxGridForOfDirective` +- **beginAddRow**(): void — Spawns the add row UI for the specific row. +- **delete**(): void — Removes the specified row from the grid's data source. +This method emits rowDeleted event. + +// delete the third selected row from the grid +this.grid.selectedRows[2].delete(); +- **isCellActive**(visibleColumnIndex: any): boolean +- **pin**(): boolean — Pins the specified row. +This method emits rowPinning`rowPinned` event. + +// pin the selected row from the grid +this.grid.selectedRows[0].pin(); +- **unpin**(): boolean — Unpins the specified row. +This method emits rowPinning`rowPinned` event. + +// unpin the selected row from the grid +this.grid.selectedRows[0].unpin(); +- **update**(value: any): void — Updates the specified row object and the data source record with the passed value. + +// update the second selected row's value +let newValue = "Apple"; +this.grid.selectedRows[1].update(newValue); + +### [IgxRowIslandComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxRowIslandComponent) +Row island + +- **constructor**(): IgxRowIslandComponent +- **gridCreated**: `EventEmitter` — Event emitted when a grid is being created based on this row island. + + + + + +- **gridInitialized**: `EventEmitter` — Emitted after a grid is being initialized for this row island. +The emitting is done in ngAfterViewInit. + + + + + +- **key**: `string` — Sets the key of the row island by which child data would be taken from the row data if such is provided. + + + + + +- **rowIslandAPI**: `IgxRowIslandAPIService` +- **expandChildren**: `boolean` — Gets if all immediate children of the grids for this row island have been set to be expanded/collapsed. +const expanded = this.rowIsland.expandChildren; +- **paginatorTemplate**: `TemplateRef` — Sets/Gets the paginator template for each child grid created from this row island. +- **resourceStrings**: `PrefixedResourceStrings` — Gets/Sets the resource strings. +- **toolbarTemplate**: `TemplateRef` — Sets/Gets the toolbar template for each child grid created from this row island. + +### [IgxSelectComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + + {{ item.field }} + + + +- **constructor**(): IgxSelectComponent +- **closed**: `EventEmitter` — Emitted after the dropdown is closed + + +- **closing**: `EventEmitter` — Emitted before the dropdown is closed + + +- **disabled**: `boolean` — Disables the component. + +- **footerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the FOOTER for the select items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.footerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom footer +
+ + +- **headerTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the HEADER for the select items list + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.headerTemplate = myCustomTemplate; + + + + ... + +
+ This is a custom header +
+ + +- **opened**: `EventEmitter` — Emitted after the dropdown is opened + + +- **opening**: `EventEmitter` — Emitted before the dropdown is opened + + +- **overlaySettings**: `OverlaySettings` — Sets custom overlay settings for the select component. + +- **placeholder**: `any` — Sets input placeholder. +- **toggleIconTemplate**: `TemplateRef` — The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button + +// Set in typescript +const myCustomTemplate: TemplateRef = myComponent.customTemplate; +myComponent.select.toggleIconTemplate = myCustomTemplate; + + + + ... + + {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} + + +- **type**: `IgxInputGroupType` — Sets how the select will be styled. +The allowed values are line, box and border. Defaults to box if no input-group type is set. + +- **value**: `any` — Gets/Sets the component value. + +// get +let selectValue = this.select.value; + + +// set +this.select.value = 'London'; + + +- **open**(overlaySettings?: OverlaySettings): void — Opens the select + +this.select.open(); + +### [IgxSelectGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSelectGroupComponent) +The is a container intended for row items in +a container. + +- **constructor**(): IgxSelectGroupComponent + +### [IgxSelectItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSelectItemComponent) +The is a container intended for row items in +a container. + +- **constructor**(): IgxSelectItemComponent +- **selected**: `any` — Sets/Gets if the item is the currently selected one in the select + + let mySelectedItem = this.select.selectedItem; + let isMyItemSelected = mySelectedItem.selected; // true +- **text**: `string` — Gets/Sets the item's text to be displayed in the select component's input when the item is selected. + + //get + let mySelectedItem = this.dropDown.selectedItem; + let selectedItemText = mySelectedItem.text; + + +// set + + +### [IgxSelectOverlapPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSelectOverlapPositionStrategy) +Positions the select dropdown so that the active item's text overlaps +the value displayed in the select input box. + +- **constructor**(select: IgxSelectComponent, settings?: PositionSettings): IgxSelectOverlapPositionStrategy +- **position**(contentElement: HTMLElement, _size: Size, document?: Document, initialCall?: boolean, target?: HTMLElement | Point): void — Position the element based on the PositionStrategy implementing this interface. + +### [IgxSimpleComboComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSimpleComboComponent) +Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list. + +- **constructor**(): IgxSimpleComboComponent +- **selectionChanged**: `EventEmitter` — Emitted when item selection is changed, after the selection completes + + +- **selectionChanging**: `EventEmitter` — Emitted when item selection is changing, before the selection completes + + +- **selection**: `any` — Get current selection state +- **value**: `any` — The value of the combo + +// get +let comboValue = this.combo.value; +- **deselect**(): void — Deselect the currently selected item +- **select**(item: any): void — Select a defined item + +### [IgxSlideComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSlideComponent) +A slide component that usually holds an image and/or a caption text. +Slide is usually a child component of a carousel. + + + + + +- **constructor**(): IgxSlideComponent +- **cssClass**: `string` — Returns the class of the slide component. +let class = this.slide.cssClass; +- **direction**: `CarouselAnimationDirection` — Gets/sets the target direction for the slide. + + + +- **index**: `number` — Gets/sets the index of the slide inside the 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. + + + + + +Two-way data binding. + + + +- **nativeElement**: `any` — Returns a reference to the carousel element in the DOM. +let nativeElement = this.slide.nativeElement; +- **tabIndex**: `number` — Returns the tabIndex of the slide component. +let tabIndex = this.carousel.tabIndex; +- **ngAfterContentChecked**(): void — A callback method that is invoked immediately after the +default change detector has completed checking all of the directive's +content. + +### [IgxSliderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + +- **constructor**(): IgxSliderComponent +- **dragFinished**: `EventEmitter` — This event is emitted at the end of every slide interaction. +public change(event){ + alert("The value has been changed!"); +} + + +- **id**: `string` — Sets the value of the id attribute. +If not provided it will be automatically generated. + +- **lowerValueChange**: `EventEmitter` — 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}); +} + + +- **primaryTickLabels**: `boolean` — show/hide primary tick labels + +- **secondaryTickLabels**: `boolean` — show/hide secondary tick labels + +- **showTicks**: `boolean` — Show/hide slider ticks + +- **thumbLabelVisibilityDuration**: `number` — Sets the duration visibility of thumbs labels. The default value is 750 milliseconds. + +- **tickLabelsOrientation**: `TickLabelsOrientation` — Changes tick labels rotation: +horizontal - The default rotation +toptobottom - Rotates tick labels vertically to 90deg +bottomtotop - Rotate tick labels vertically to -90deg + +- **ticksOrientation**: `TicksOrientation` — Changes ticks orientation: +bottom - The default orienation, below the slider track. +top - Above the slider track +mirror - combines top and bottom orientation. + +- **upperValueChange**: `EventEmitter` — 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}); +} + + +- **valueChange**: `EventEmitter` — This event is emitted every time the value is changed. +public change(event){ + alert("The value has been changed!"); +} + + +- **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 slider 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 slider. +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 slider. +@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 slider. + @ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let sliderMin = this.slider.minValue; +} +- **primaryTicks**: `number` — Returns the number of the presented primary ticks. +const primaryTicks = this.slider.primaryTicks; +- **secondaryTicks**: `number` — Returns the number of the presented secondary ticks. +const secondaryTicks = this.slider.secondaryTicks; +- **step**: `number` — Returns the incremental/decremental dragging step of the IgxSliderComponent. +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let step = this.slider.step; +} +- **type**: `IgxSliderType` — Gets the type of the slider. +The slider type can be SLIDER (default) or RANGE. +@ViewChild("slider2") +public slider: IgxSliderComponent; +ngAfterViewInit(){ + let type = this.slider.type; +} +- **upperBound**: `number` — Returns the upper boundary of settable values of the slider. +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 slider. +Returns value of a SLIDER slider + @ViewChild("slider2") +public slider: IgxSliderComponent; +public upperValue(event){ + let upperValue = this.slider.upperValue; +} +- **value**: `number | IRangeSliderValue` — Returns the slider value. If the slider is of type IgxSliderType.SLIDER the returned value is number. +If the slider type is IgxSliderType.RANGE. +The returned value represents an object of lowerValue and upperValue. +@ViewChild("slider2") +public slider: IgxSliderComponent; +public sliderValue(event){ + let sliderVal = this.slider.value; +} +- **ngAfterContentInit**(): void — A callback method that is invoked immediately after +Angular has completed initialization of all of the directive's +content. +It is invoked only once when the directive is instantiated. +- **setValue**(value: number | IRangeSliderValue, triggerChange: boolean): void + +### [IgxSnackbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + +
+ + Message sent + +
+ +- **constructor**(): IgxSnackbarComponent +- **actionText**: `string` — Sets/gets the actionText attribute. + +- **animationDone**: `EventEmitter` — An event that will be emitted when the snackbar animation ends. +Provides reference to the ToggleViewEventArgs interface as an argument. + +- **animationStarted**: `EventEmitter` — An event that will be emitted when the snackbar animation starts. +Provides reference to the ToggleViewEventArgs interface as an argument. + +- **clicked**: `EventEmitter` — An event that will be emitted when the action button is clicked. +Provides reference to the snackbar as an argument. + +- **id**: `string` — Sets/gets the id of the snackbar. +If not set, the id of the first snackbar component will be "igx-snackbar-0"; + + +let snackbarId = this.snackbar.id; +- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the snackbar. +@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent; +let currentPosition: PositionSettings = this.snackbar.positionSettings +- **open**(message?: string): void — Shows the snackbar and hides it after the displayTime is over if autoHide is set to true. +this.snackbar.open(); +- **toggle**(): void — Opens or closes the snackbar, depending on its current state. + +this.snackbar.toggle(); + +### [IgxSorting](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSorting) +Represents a class implementing the IGridSortingStrategy interface. +It provides sorting functionality for grid data based on sorting expressions. + +- **constructor**(): IgxSorting +- **sort**(data: any[], expressions: ISortingExpression[], grid?: GridTypeBase): any[] — Sorts the provided data based on the given sorting expressions. +data: The array of data to be sorted. +expressions: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +grid: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. + +### [IgxSplitterComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSplitterComponent) +Provides a framework for a simple layout, splitting the view horizontally or vertically +into multiple smaller resizable and collapsible areas. + +- **constructor**(): IgxSplitterComponent +- **document**: `Document` +- **nonCollapsible**: `boolean` — Sets the visibility of the handle and expanders in the splitter bar. +False by default +- **panes**: `QueryList` — Gets the list of splitter panes. +- **resizeEnd**: `EventEmitter` — Event fired when resizing of panes ends. +- **resizeStart**: `EventEmitter` — Event fired when resizing of panes starts. +- **resizing**: `EventEmitter` — Event fired when resizing of panes is in progress. +- **type**: `SplitterType` — Gets/Sets the splitter orientation. +- **onMoveEnd**(delta: number): void + +### [IgxSplitterPaneComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSplitterPaneComponent) +Represents individual resizable/collapsible panes. + +- **constructor**(): IgxSplitterPaneComponent +- **collapsedChange**: `EventEmitter` — Event fired when collapsed state of pane is changed. +- **resizable**: `boolean` — Gets/Sets whether pane is resizable. +- **collapsed**: `boolean` +- **dragSize**: `any` +- **maxSize**: `string` — Gets/Set the maximum allowed size of the current pane. +- **minSize**: `string` — Gets/Sets the minimum allowed size of the current pane. +- **order**: `number` +- **size**: `string` — Gets/Sets the size of the current pane. + * +- **toggle**(): void — Toggles the collapsed state of the pane. + +### [IgxStepActiveIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepActiveIndicatorDirective) +Allows a custom element to be added as an active step indicator. + +- **constructor**(): IgxStepActiveIndicatorDirective + +### [IgxStepCompletedIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepCompletedIndicatorDirective) +Allows a custom element to be added as a complete step indicator. + +- **constructor**(): IgxStepCompletedIndicatorDirective + +### [IgxStepComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepComponent) +The step is used within the stepper element and it holds the content of each step. +It also supports custom indicators, title and subtitle. + +- **constructor**(): IgxStepComponent +- **activeChange**: `EventEmitter` — Emitted when the step's active property changes. Can be used for two-way binding. + + + + + +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"; + + +const stepId = this.step.id; +- **optional**: `boolean` — Get/Set whether the step is optional. +- **renderer**: `Renderer2` +- **stepper**: `IgxStepper` +- **active**: `boolean` +- **disabled**: `boolean` +- **index**: `number` — Get the step index inside of the stepper. + +const step = this.stepper.steps[1]; +const stepIndex: number = step.index; +- **isValid**: `boolean` — Get/Set whether the step is valid. + + ... +
+
+ ... +
+
+ +- **tabIndex**: `number` + +### [IgxStepContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepContentDirective) +Allows a custom element to be added as a step content. + +- **constructor**(): IgxStepContentDirective +- **defaultClass**: `boolean` +- **elementRef**: `ElementRef` +- **id**: `string` +- **role**: `string` +- **stepId**: `string` +- **tabIndex**: `number` + +### [IgxStepIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepIndicatorDirective) +Allows a custom element to be added as a step indicator. + +- **constructor**(): IgxStepIndicatorDirective + +### [IgxStepInvalidIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepInvalidIndicatorDirective) +Allows a custom element to be added as an invalid step indicator. + +- **constructor**(): IgxStepInvalidIndicatorDirective + +### [IgxStepperComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepperComponent) +Stepper provides a wizard-like workflow by dividing content into logical steps. + +- **constructor**(): IgxStepperComponent +- **activeStepChanged**: `EventEmitter` — Emitted when the active step is changed. +- **activeStepChanging**: `EventEmitter` — Emitted when the stepper's active step is changing. + + + + + +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. + + +- **horizontalAnimationType**: `HorizontalAnimationType` — Get/Set the animation type of the stepper when the orientation direction is horizontal. +- **linear**: `boolean` — Get/Set whether the stepper is linear. +- **orientation**: `IgxStepperOrientation` — Get/Set the stepper orientation. + +this.stepper.orientation = IgxStepperOrientation.Vertical; +- **steps**: `IgxStepComponent[]` — Get all steps. + +const steps: IgxStepComponent[] = this.stepper.steps; +- **verticalAnimationType**: `VerticalAnimationType` — Get/Set the animation type of the stepper when the orientation direction is vertical. +- **navigateTo**(index: number): void — Activates the step at a given index. + +this.stepper.navigateTo(1); +- **next**(): void — Activates the next enabled step. + +this.stepper.next(); +- **prev**(): void — Activates the previous enabled step. + +this.stepper.prev(); +- **reset**(): void — Resets the stepper to its initial state i.e. activates the first step. + +### [IgxStepSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepSubtitleDirective) +Allows a custom element to be added as a step subtitle. + +- **constructor**(): IgxStepSubtitleDirective +- **defaultClass**: `boolean` + +### [IgxStepTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStepTitleDirective) +Allows a custom element to be added as a step title. + +- **constructor**(): IgxStepTitleDirective +- **defaultClass**: `boolean` + +### [IgxStringFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStringFilteringOperand) +Provides filtering operations for strings + +- static **applyIgnoreCase**(a: string, ignoreCase: boolean): string — Applies case sensitivity on strings if provided + +### [IgxStringReplacePipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxStringReplacePipe) + +- **constructor**(): IgxStringReplacePipe +- **transform**(value: string, search: string | RegExp, replacement: string): string + +### [IgxSummaryDataPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSummaryDataPipe) + +- **constructor**(): IgxSummaryDataPipe +- **transform**(id: string, trigger: number): any + +### [IgxSummaryFormatterPipe](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSummaryFormatterPipe) + +- **constructor**(): IgxSummaryFormatterPipe +- **transform**(summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand, summaryFormatter: any): any + +### [IgxSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSummaryOperand) + +- **constructor**(): IgxSummaryOperand +- **operate**(data: any[], _allData: any[], _fieldName?: string, _groupRecord?: IGroupByRecord): IgxSummaryResult[] — Executes the static count method and returns summary result[]. +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/22.0.0/classes/IgxSummaryRow) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **grid**: `GridType` — The grid that contains the row. +- **index**: `number` — Returns the row index. +- **isSummaryRow**: `boolean` — Returns always true, because this is in instance of an group by row. +- **summaries**: `Map` — Optional +A map of column field names to the summary results for the row. +- **viewIndex**: `number` — Returns the view index calculated per the grid page. + +### [IgxSummaryRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSummaryRowComponent) + +- **constructor**(): IgxSummaryRowComponent +- **_summaryCells**: `QueryList` +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **firstCellIndentation**: `number` +- **grid**: `GridType` +- **gridID**: `any` +- **index**: `number` +- **summaries**: `Map` +- **dataRowIndex**: `number` +- **minHeight**: `number` +- **nativeElement**: `HTMLElement` +- **summaryCells**: `QueryList` +- **getColumnSummaries**(columnName: string): IgxSummaryResult[] +- **getContext**(row: any, cols: any): any +- **ngDoCheck**(): void — A callback method that performs change-detection, invoked +after the default change-detector has checked the directive's input +bindings in the parent template. +See KeyValueDiffers and IterableDiffers for implementing +custom change checking for collections. + +### [IgxSummaryTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSummaryTemplateDirective) + +- **constructor**(): IgxSummaryTemplateDirective +- **template**: `TemplateRef` +- static **ngTemplateContextGuard**(_directive: IgxSummaryTemplateDirective, context: unknown): context + +### [IgxSwitchComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxSwitchComponent) +The Switch component is a binary choice selection component. + +- **constructor**(): IgxSwitchComponent +- **cssClass**: `string` — Returns the class of the switch component. +- **disabled**: `boolean` — Sets/gets the disabled attribute. +Default value is false. +- **focused**: `boolean` — Sets/gets whether the switch component is on focus. +Default value is false. +- **invalid**: `boolean` — Sets/gets whether the switch component is invalid. +Default value is false. +- **checked**: `boolean` + +### [IgxTabContentComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabContentComponent) + +- **constructor**(): IgxTabContentComponent + +### [IgxTabContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabContentDirective) + +- **constructor**(): IgxTabContentDirective + +### [IgxTabHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabHeaderComponent) + +- **constructor**(): IgxTabHeaderComponent + +### [IgxTabHeaderDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabHeaderDirective) + +- **constructor**(): IgxTabHeaderDirective + +### [IgxTabHeaderIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabHeaderIconDirective) + +- **constructor**(): IgxTabHeaderIconDirective + +### [IgxTabHeaderLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabHeaderLabelDirective) + +- **constructor**(): IgxTabHeaderLabelDirective + +### [IgxTabItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabItemComponent) + +- **constructor**(): IgxTabItemComponent + +### [IgxTabItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabItemDirective) + +- **constructor**(): IgxTabItemDirective +- **disabled**: `boolean` — Disables the item. +- **selectedChange**: `EventEmitter` — Output to enable support for two-way binding on [(selected)] +- **selected**: `boolean` — Gets/Sets whether an item is selected. + +### [IgxTabsComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabsComponent) +Tabs component is used to organize or switch between similar data sets. + +- **constructor**(): IgxTabsComponent +- **activation**: `"manual" | "auto"` — Determines the tab activation. +When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed. +When set to manual, the tab is only focused. The selection happens after pressing Space or Enter. +Defaults is auto. +- **tabAlignment**: `string` — Gets/Sets the tab alignment. Defaults to start. + +### [IgxTabsDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTabsDirective) + +- **constructor**(): IgxTabsDirective +- **disableAnimation**: `boolean` — Enables/disables the transition animation of the contents. +- **items**: `QueryList` — Returns the items. +- **selectedIndexChange**: `EventEmitter` — Output to enable support for two-way binding on [(selectedIndex)] +- **selectedIndexChanging**: `EventEmitter` — Emitted when the selected index is about to change. +- **selectedItemChange**: `EventEmitter` — Emitted when the selected item is changed. +- **selectedIndex**: `number` — Gets/Sets the index of the selected item. +Default value is 0 if contents are defined otherwise defaults to -1. +- **selectedItem**: `IgxTabItemDirective` — Gets the selected item. + +### [IgxTextHighlightDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTextHighlightDirective) + +- **constructor**(): IgxTextHighlightDirective +- **activeCssClass**: `string` — Determines the CSS class of the active highlight element. +This allows the developer to provide custom CSS to customize the highlight. + +
+
+- **column**: `any` — The identifier of the column on which the directive is currently on. + +
+
+- **cssClass**: `string` — Determines the CSS class of the highlight elements. +This allows the developer to provide custom CSS to customize the highlight. + +
+
+- **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. + +
+
+- **metadata**: `Map` — A map that contains all additional conditions, that you need to activate a highlighted +element. To activate the condition, you will have to add a new metadata key to +the metadata property of the IActiveHighlightInfo interface. +- **row**: `any` — The identifier of the row on which the directive is currently on. + +
+
+- **value**: `any` — The underlying value of the element that will be highlighted. + +// get +const elementValue = this.textHighlight.value; + + + +
+
+- **activateIfNecessary**(): void — Activates the highlight if it is on the currently active row and column. +- **clearHighlight**(): void — Clears any existing highlight. +- **highlight**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number — Clears the existing highlight and highlights the searched text. +Returns how many times the element contains the searched text. +- **observe**(): void — Attaches a MutationObserver to the parentElement and watches for when the container element is removed/readded to the DOM. +Should be used only when necessary as using many observers may lead to performance degradation. + +### [IgxTextHighlightService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTextHighlightService) + +- **constructor**(): IgxTextHighlightService +- **highlightGroupsMap**: `Map` +- **onActiveElementChanged**: `EventEmitter` +- **clearActiveHighlight**(groupName: any): void — Clears any existing highlight. +- **destroyGroup**(groupName: string): void — Destroys a highlight group. +- **setActiveHighlight**(groupName: string, highlight: IActiveHighlightInfo): void — Activates the highlight at a given index. +(if such index exists) + +### [IgxTextSelectionDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTextSelectionDirective) + +- **constructor**(): IgxTextSelectionDirective +- **selected**: `boolean` — Determines whether the input element could be selected through the directive. + + + + + + + +- **nativeElement**: `any` — Returns the nativeElement of the element where the directive was applied. + + + + + +@ViewChild('firstName', + {read: IgxTextSelectionDirective}) +public inputElement: IgxTextSelectionDirective; + +public getNativeElement() { + return this.inputElement.nativeElement; +} +- **trigger**(): void — Triggers the selection of the element if it is marked as selectable. + + + + + +@ViewChild('firstName', + {read: IgxTextSelectionDirective}) +public inputElement: IgxTextSelectionDirective; + +public triggerElementSelection() { + this.inputElement.trigger(); +} + +### [IgxThumbFromTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxThumbFromTemplateDirective) +Template directive that allows you to set a custom template representing the lower label value of the IgxSliderComponent + + + {{value}} + + +- **constructor**(): IgxThumbFromTemplateDirective + +### [IgxThumbToTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxThumbToTemplateDirective) +Template directive that allows you to set a custom template representing the upper label value of the IgxSliderComponent + + + {{value}} + + +- **constructor**(): IgxThumbToTemplateDirective + +### [IgxTickLabelTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/classes/IgxTimeFilteringOperand) + + +### [IgxTimePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTimePickerComponent) +Common interface for Components with show and collapse functionality + +- **constructor**(): IgxTimePickerComponent +- **formatter**: `any` — Gets/Sets a custom formatter function on the selected or passed date. +- **id**: `string` — Sets the value of the id attribute. + +- **mode**: `PickerInteractionMode` — Gets/Sets the interaction mode - dialog or drop down. +- **selected**: `EventEmitter` — Emitted after a selection has been done. +- **spinLoop**: `boolean` — Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached. +By default it's set to true. + +- **validationFailed**: `EventEmitter` — Emitted when the user types/spins invalid time in the time-picker editor. +- **valueChange**: `EventEmitter` — 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; +- **displayFormat**: `string` — The format used to display the picker's value when it's not being edited. +- **inputFormat**: `string` — The editor's input mask. +- **itemsDelta**: `Pick` +- **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. + + +@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent; +picker.close(); +- **decrement**(datePart?: DatePart, delta?: number): void — Decrement a specified DatePart +- **increment**(datePart?: DatePart, delta?: number): void — Increment a specified DatePart. +- **open**(settings?: OverlaySettings): void — Opens the picker's dialog UI. +- **select**(date: string | Date): void — Selects time from the igxTimePicker. +- **toggle**(settings?: OverlaySettings): void + +### [IgxTimeSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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: + + + Notification displayed + + +- **constructor**(): IgxToastComponent +- **id**: `string` — Sets/gets the id of the toast. +If not set, the id will have value "igx-toast-0". + + +let toastId = this.toast.id; +- **role**: `string` — Sets/gets the role attribute. +If not set, role will have value "alert". + + +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/22.0.0/classes/IgxToggleActionDirective) + +- **constructor**(): IgxToggleActionDirective +- **outlet**: `IgxOverlayOutletDirective | ElementRef` — Determines where the toggle element overlay should be attached. + + +
+ +Where outlet is an instance of overlay outlet or a reference to the element. +- **overlaySettings**: `OverlaySettings` — Provide settings that control the toggle overlay positioning, interaction and scroll behavior. +const settings: OverlaySettings = { + closeOnOutsideClick: false, + modal: false + } + +--- + +
+ +### [IgxToggleDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxToggleDirective) +Common interface for Components with show and collapse functionality + +- **constructor**(): IgxToggleDirective +- **appended**: `EventEmitter` — Emits an event after the toggle element is appended to the overlay container. + +onAppended() { + alert("Content appended!"); +} + + +
+
+- **closed**: `EventEmitter` — Emits an event after the toggle container is closed. + +onToggleClosed(event) { + alert("Toggle closed!"); +} + + +
+
+- **closing**: `EventEmitter` — Emits an event before the toggle container is closed. + +onToggleClosing(event) { + alert("Toggle closing!"); +} + + +
+
+- **id**: `string` — Identifier which is registered into navigation + +let myToggleId = this.toggle.id; +- **opened**: `EventEmitter` — Emits an event after the toggle container is opened. + +onToggleOpened(event) { + alert("Toggle opened!"); +} + + +
+
+- **opening**: `EventEmitter` — Emits an event before the toggle container is opened. + +onToggleOpening(event) { + alert("Toggle opening!"); +} + + +
+
+- **overlayId**: `string` — Returns the id of the overlay the content is rendered in. +this.myToggle.overlayId; +- **close**(event?: Event): void — Closes the toggle. + +this.myToggle.close(); +- **open**(overlaySettings?: OverlaySettings): void — Opens the toggle. + +this.myToggle.open(); +- **reposition**(): void — Repositions the toggle. +this.myToggle.reposition(); +- **setOffset**(deltaX: number, deltaY: number, offsetMode?: OffsetMode): void — Offsets the content along the corresponding axis by the provided amount with optional +offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set +- **toggle**(overlaySettings?: OverlaySettings): void — Opens or closes the toggle, depending on its current state. + +this.myToggle.toggle(); + +### [IgxTooltipDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + +Hello there, I am a tooltip! + +- **constructor**(): IgxTooltipDirective +- **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; +- **arrow**: `HTMLElement` — Get the arrow element of the tooltip. + +let tooltipArrow = this.tooltip.arrow; +- **role**: `"tooltip" | "status"` + +### [IgxTooltipTargetDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + +Hello there, I am a tooltip! + +- **constructor**(): IgxTooltipTargetDirective +- **hideDelay**: `number` — Gets/sets the amount of milliseconds that should pass before hiding the tooltip. + +// get +let tooltipHideDelay = this.tooltipTarget.hideDelay; + + + + +Hello there, I am a tooltip! +- **showDelay**: `number` — Gets/sets the amount of milliseconds that should pass before showing the tooltip. + +// get +let tooltipShowDelay = this.tooltipTarget.showDelay; + + + + +Hello there, I am a tooltip! +- **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; + + + + +Hello there, I am a tooltip! +- **tooltipHide**: `EventEmitter` — 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!"); +} + + + +Hello there, I am a tooltip! +- **tooltipShow**: `EventEmitter` — 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!"); +} + + + +Hello there, I am a tooltip! +- **closeTemplate**: `TemplateRef` +- **hasArrow**: `boolean` +- **hideTriggers**: `string` — Which event triggers will hide the tooltip. +Expects a comma-separated string of different event triggers. +Defaults to pointerleave and click. +info +Hello there, I am a tooltip! +- **nativeElement**: `any` — Gets the respective native element of the directive. + +let tooltipTargetElement = this.tooltipTarget.nativeElement; +- **positionSettings**: `PositionSettings` — Get the position and animation settings used by the tooltip. +let positionSettings = this.tooltipTarget.positionSettings; +- **showTriggers**: `string` — Which event triggers will show the tooltip. +Expects a comma-separated string of different event triggers. +Defaults to pointerenter. +info +Hello there, I am a tooltip! +- **sticky**: `boolean` +- **tooltip**: `any` +- **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 if not already hidden. + +this.tooltipTarget.hideTooltip(); +- **showTooltip**(): void — Shows the tooltip if not already shown. + +this.tooltipTarget.showTooltip(); + +### [IgxTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTransactionService) + +- **constructor**(): IgxTransactionService +- **canRedo**: `boolean` +- **canUndo**: `boolean` +- **enabled**: `boolean` — Returns whether transaction is enabled for this service +- **add**(transaction: T, recordRef?: any): void — Adds provided transaction with recordRef if any +- **clear**(id?: any): void — Clears all transactions +- **commit**(data: any[], id?: any): void — Applies all transactions over the provided data +- **endPending**(commit: boolean): void — Clears all pending transactions and aggregated pending state. If commit is set to true +commits pending states as single transaction +- **getAggregatedChanges**(mergeChanges: boolean): T[] — Returns aggregated changes from all transactions +- **getAggregatedValue**(id: any, mergeChanges: boolean): any — Returns value of the required id including all uncommitted changes +- **getState**(id: any, pending: boolean): S — Returns the state of the record with provided id +- **getTransactionLog**(id?: any): T[] — Returns all recorded transactions in chronological order +- **redo**(): void — Applies the last undone transaction if any +- **undo**(): void — Remove the last transaction if any + +### [IgxTreeComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTreeComponent) +Tree allows a developer to show a set of nodes in a hierarchical fashion. + +- **constructor**(): IgxTreeComponent +- **activeNodeChanged**: `EventEmitter>` — Emitted when the active node is changed. +- **animationSettings**: `ToggleAnimationSettings` — Get/Set the animation settings that branches should use when expanding/collpasing. + + + + + +const animationSettings: ToggleAnimationSettings = { + openAnimation: growVerIn, + closeAnimation: growVerOut +}; + +this.tree.animationSettings = animationSettings; +- **cssClass**: `string` +- **expandIndicator**: `TemplateRef` — A custom template to be used for the expand indicator of nodes + + + {{ expanded ? "close_fullscreen": "open_in_full"}} + + +- **nodeCollapsed**: `EventEmitter` — Emitted when a node is collapsed, after it finishes +- **nodeCollapsing**: `EventEmitter` — Emitted when a node is collapsing, before it finishes + + + + + +public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) { + const collapsedNode: IgxTreeNode = event.node; + if (collapsedNode.alwaysOpen) { + event.cancel = true; + } +} +- **nodeExpanded**: `EventEmitter` — Emitted when a node is expanded, after it finishes + + + + + +public handleNodeExpanded(event: ITreeNodeToggledEventArgs) { + const expandedNode: IgxTreeNode = event.node; + console.log("Node is expanded: ", expandedNode.data); +} +- **nodeExpanding**: `EventEmitter` — Emitted when a node is expanding, before it finishes + + + + + +public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) { + const expandedNode: IgxTreeNode = event.node; + if (expandedNode.disabled) { + event.cancel = true; + } +} +- **nodeSelection**: `EventEmitter` — Emitted when the node selection is changed through interaction + + + + + +public handleNodeSelection(event: ITreeNodeSelectionEvent) { + const newSelection: IgxTreeNode[] = event.newSelection; + const added: IgxTreeNode[] = 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 + + +... + + + +const tree: IgxTree = this.tree; +this.tree.singleBranchExpand = false; +- **toggleNodeOnClick**: `boolean` — Get/Set if nodes should be expanded/collapsed when clicking over them. + + +... + + + +const tree: IgxTree = this.tree; +this.tree.toggleNodeOnClick = false; +- **rootNodes**: `IgxTreeNodeComponent[]` — Returns all **root level** nodes + +const tree: IgxTree = this.tree; +const rootNodes: IgxTreeNodeComponent[] = tree.rootNodes; +- **selection**: `IgxTreeSelectionType` — Gets/Sets tree selection mode +- **collapseAll**(nodes?: IgxTreeNode[]): void — Collapses all of the passed nodes. +If no nodes are passed, collapses ALL nodes +- **deselectAll**(nodes?: IgxTreeNodeComponent[]): void — Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection. +- **expandAll**(nodes?: IgxTreeNode[]): void — Expands all of the passed nodes. +If no nodes are passed, expands ALL nodes +- **findNodes**(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNodeComponent[] — Returns all of the nodes that match the passed searchTerm. +Accepts a custom comparer function for evaluating the search term against the nodes. + +### [IgxTreeGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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: + + + + + + +- **constructor**(): IgxTreeGridComponent +- **cascadeOnDelete**: `boolean` — Sets whether child records should be deleted when their parent gets deleted. +By default it is set to true and deletes all children along with the parent. + + +- **childDataKey**: `string` — Sets the child data key of the tree grid. + +- **foreignKey**: `string` — Sets the foreign key of the tree grid. + + +- **hasChildrenKey**: `string` — Sets the key indicating whether a row has children. +This property is only used for load on demand scenarios. + + +- **id**: `string` — Sets the value of the id attribute. If not provided it will be automatically generated. + +- **loadChildrenOnDemand**: `any` — Sets a callback for loading child rows on demand. + + + +public loadChildren = (parentID: any, done: (children: any[]) => void) => { + this.dataService.getData(parentID, children => done(children)); +} +- **processedRecords**: `Map` — 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` — Returns a map of all ITreeGridRecords. +// gets the record with primaryKey=2 +const states = this.grid.records.get(2); +- **rootRecords**: `ITreeGridRecord[]` — Returns an array of the root level ITreeGridRecords. +// gets the root record with index=2 +const states = this.grid.rootRecords[2]; +- **data**: `any[]` — Gets/Sets the array of data that populates the component. + +- **expansionDepth**: `number` — Sets the count of levels to be expanded in the tree grid. By default it is +set to Infinity which means all levels would be expanded. + +- **rowLoadingIndicatorTemplate**: `TemplateRef` — Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **selectedCells**: `CellType[]` — Returns an array of the selected grid cells. +- **addRow**(data: any, parentRowID?: any): void — Creates a new tree grid row with the given data. If a parentRowID is not specified, the newly created +row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches +the specified parentRowID. If the parentRowID does not exist, an error would be thrown. +const record = { + ID: this.grid.data[this.grid1.data.length - 1].ID + 1, + Name: this.newRecord +}; +this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1. +- **beginAddRowByIndex**(index: number, asChild?: boolean): void — Enters add mode by spawning the UI with the context of the specified row by index. +- **collapseAll**(): void — Collapses all rows. + +this.grid.collapseAll(); +- **expandAll**(): void — Expands all rows. +this.grid.expandAll(); +- **getCellByColumn**(rowIndex: number, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getCellByKey**(rowSelector: any, columnField: string): CellType — Returns a CellType object that matches the conditions. +- **getRowByIndex**(index: number): RowType — Returns the tree grid row by index. +- **getRowByKey**(key: any): RowType — Returns the RowType object by the specified primary key. +- **getSelectedData**(formatters: boolean, headers: boolean): any[] — Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...]. +- **pinRow**(rowID: any, index?: number): boolean — Pin the row by its id. +- **unpinRow**(rowID: any): boolean — Unpin the row by its id. + +### [IgxTreeGridRow](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTreeGridRow) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **children**: `RowType[]` — Optional +Contains the child rows of the current row, if there are any. +- **data**: `any` — The data passed to the row component. + +let selectedRowData = this.grid.selectedRows[0].data; +- **disabled**: `boolean` — Optional +Indicates whether the current row is disabled +- **expanded**: `boolean` — Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed +- **hasChildren**: `boolean` — Optional +Indicates whether the current row has any child rows +- **parent**: `RowType` — Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row +- **pinned**: `boolean` — Optional +Indicates whether the current row is pinned. +- **treeRow**: `ITreeGridRecord` — Optional +Represents the hierarchical record associated with the row (for tree grids). +It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc. +- **viewIndex**: `number` — Returns the view index calculated per the grid page. + +### [IgxTreeNodeComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxTreeNodeComponent) +The tree node component represents a child node of the tree component or another tree node. +Usage: + + + ... + + {{ data.FirstName }} {{ data.LastName }} + + ... + + +- **constructor**(): IgxTreeNodeComponent +- **data**: `T` — The data entry that the node is visualizing. +- **expandedChange**: `EventEmitter` — Emitted when the node's expanded property changes. + + + + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e)) +- **loading**: `boolean` — To be used for load-on-demand scenarios in order to specify whether the node is loading data. +- **parentNode**: `IgxTreeNode` +- **selectedChange**: `EventEmitter` — Emitted when the node's selected property changes. + + + + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e)) +- **tree**: `IgxTree` +- **active**: `boolean` +- **children**: `IgxTreeNode[]` — 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 + + + ... + + {{ node.label }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const expanded = node.expanded; +node.expanded = true; +- **level**: `number` — The depth of the node, relative to the root + + + ... + + My level is {{ node.level }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[12])[0]; +const level: number = node.level; +- **path**: `IgxTreeNode[]` — Retrieves the full path to the node incuding itself + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const path: IgxTreeNode[] = node.path; +- **resourceStrings**: `ITreeResourceStrings` — An accessor that returns the resource strings. +- **selected**: `boolean` — Get/set whether the node is selected. Supporst two-way binding. + + + ... + + {{ node.label }} + + + + +const node: IgxTreeNode = this.tree.findNodes(data[0])[0]; +const selected = node.selected; +node.selected = true; +- **collapse**(): void — Collapses the node, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; +myNode.collapse(); +- **expand**(): void — Expands the node, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; +myNode.expand(); +- **toggle**(): void — Toggles the node expansion state, triggering animation + + + My Node + + + + +const myNode: IgxTreeNode = this.tree.findNodes(data[0])[0]; +myNode.toggle(); + +### [IgxYearsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IgxYearsViewComponent) + +- **constructor**(): IgxYearsViewComponent +- **el**: `ElementRef` +- **standalone**: `boolean` +- **yearFormat**: `any` — Gets the year format option of the years view. +let yearFormat = this.yearsView.yearFormat. + +### [IntlFormatter](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/IntlFormatter) + +- **constructor**(): IntlFormatter +- **formatCurrency**(value: string | number, locale?: string, display?: string, currencyCode?: string, digitsInfo?: string): string — Format number as a currency based on locale +- **formatDate**(value: string | number | Date, format: string, locale: string, timezone?: string): string — Format provided date to reflect locales format. Similar to Angular's formatDate. +- **formatNumber**(value: string | number, locale?: string, digitsInfo?: string): string — Format number value based on locale +- **formatPercent**(value: string | number, locale?: string, digitsInfo?: string): string — Format number value as percent based on locale +- **getCurrencyCode**(_locale: string, overrideCode?: string): string — Retrieve the currency code of the locale provided. +Angular provides locale data for them, if using that. +When using Intl, it should be user defined and defaults to USD. +- **getCurrencySymbol**(currencyCode: string, locale?: string, currencyDisplay: any): string — Get the currency symbol based on a currency code. +- **getLocaleFirstDayOfWeek**(locale?: string): number — Get first day of the week. +Angular's default: 0...6. +Intl default: 1...7. +- **verifyLocale**(locale: string): string + +### [ITreeGridAggregation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/ITreeGridAggregation) + +- **constructor**(): ITreeGridAggregation +- **aggregate**: `any` +- **field**: `string` + +### [NoopFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/NoopFilteringStrategy) + +- **constructor**(): NoopFilteringStrategy +- **filter**(data: any[], _: IFilteringExpressionsTree, __?: IFilteringExpressionsTree): any[] +- static **instance**(): NoopFilteringStrategy + +### [NoopPivotDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/NoopPivotDimensionsStrategy) +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +- **constructor**(): NoopPivotDimensionsStrategy +- **process**(collection: any[], _: IPivotDimension[], __: IPivotValue[]): any[] +- static **instance**(): NoopPivotDimensionsStrategy + +### [NoOpScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/NoOpScrollStrategy) +Empty scroll strategy. Does nothing. + +- **constructor**(): NoOpScrollStrategy +- **attach**(): void — Detaches the strategy +settings.scrollStrategy.detach(); +- **detach**(): void — Detaches the strategy +settings.scrollStrategy.detach(); +- **initialize**(): void — Initializes the strategy. Should be called once + +### [NoopSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/NoopSortingStrategy) +Represents a class implementing the IGridSortingStrategy interface with a no-operation sorting strategy. +It performs no sorting and returns the data as it is. + +- **sort**(data: any[]): any[] — data: The array of data to be sorted. Could be of any type. +expressions: An array of sorting expressions that define the sorting rules. The expression contains information like file name, whether the letter case should be taken into account, etc. +grid: (Optional) The instance of the grid where the sorting is applied. +Returns a new array with the data sorted according to the sorting expressions. +- static **instance**(): NoopSortingStrategy + +### [PickerBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/PickerBaseDirective) +Common interface for Components with show and collapse functionality + +- **constructor**(): PickerBaseDirective +- **closed**: `EventEmitter` — Emitted after the calendar has closed. +- **closing**: `EventEmitter` — Emitted when the calendar has started closing, cancelable. +- **disabled**: `boolean` — Enables or disables the picker. +- **element**: `ElementRef` +- **headerOrientation**: `PickerHeaderOrientation` — Gets/Sets the orientation of the date picker header. +- **hideHeader**: `boolean` — Gets/Sets whether the header is hidden in dialog mode. +- **mode**: `PickerInteractionMode` — Can be dropdown with editable input field or dialog with readonly input field. +- **opened**: `EventEmitter` — Emitted after the calendar has opened. +- **opening**: `EventEmitter` — Emitted when the calendar has started opening, cancelable. +- **outlet**: `IgxOverlayOutletDirective | ElementRef` — The container used for the pop-up element. +- **overlaySettings**: `OverlaySettings` — Overlay settings used to display the pop-up element. +- **placeholder**: `string` — Sets the placeholder of the picker's input. +- **tabIndex**: `string | number` — Gets/Sets the default template editor's tabindex. +- **valueChange**: `EventEmitter` +- **collapsed**: `boolean` — Gets the picker's pop-up state. +- **displayFormat**: `string` +- **inputFormat**: `string` +- **locale**: `string` — Gets the locale of the date-picker. +If not set, defaults to applciation's locale.. +- **type**: `IgxInputGroupType` +- **weekStart**: `number` — Gets the start day of the week. +Can return a numeric or an enum representation of the week day. +If not set, defaults to the first day of the week for the application locale. +- **clear**(): void +- **close**(): void +- **getEditElement**(): HTMLInputElement — Return the focusable native element +- **open**(settings?: OverlaySettings): void +- **select**(value: string | Date | DateRange): void +- **toggle**(settings?: OverlaySettings): void + +### [PivotColumnDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/PivotColumnDimensionsStrategy) +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +- **constructor**(): PivotColumnDimensionsStrategy +- **process**(collection: IPivotGridRecord[], columns: IPivotDimension[], values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys: IPivotKeys): any[] +- static **instance**(): PivotRowDimensionsStrategy | PivotColumnDimensionsStrategy + +### [PivotRowDimensionsStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/PivotRowDimensionsStrategy) +Interface describing Pivot data processing for dimensions. +Should contain a process method and return records hierarchy based on the provided dimensions. + +- **constructor**(): PivotRowDimensionsStrategy +- **process**(collection: any, rows: IPivotDimension[], _values: IPivotValue[], cloneStrategy: IDataCloneStrategy, pivotKeys: IPivotKeys): IPivotGridRecord[] +- static **instance**(): PivotRowDimensionsStrategy + +### [PivotUtil](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/PivotUtil) + +- **constructor**(): PivotUtil +- static **aggregate**(records: any, values: IPivotValue[]): any +- static **applyAggregations**(rec: IPivotGridRecord, hierarchies: any, values: any, pivotKeys: IPivotKeys): void +- static **assignLevels**(dims: any): void +- static **buildExpressionTree**(config: IPivotConfiguration): FilteringExpressionsTree +- static **extractValueFromDimension**(dim: IPivotDimension, recData: any): any +- static **extractValuesForColumn**(dims: IPivotDimension[], recData: any, pivotKeys: IPivotKeys, path: any[]): Map +- static **extractValuesForRow**(dims: IPivotDimension[], recData: any, pivotKeys: IPivotKeys, cloneStrategy: IDataCloneStrategy): Map +- static **flatten**(arr: any, lvl: number): any +- static **flattenGroups**(data: IPivotGridRecord[], dimension: IPivotDimension, expansionStates: any, defaultExpand: boolean, parent?: IPivotDimension, parentRec?: IPivotGridRecord): void +- static **flattenGroupsHorizontally**(data: IPivotGridRecord[], dimension: IPivotDimension, expansionStates: any, defaultExpand: boolean, visibleDimensions: IPivotDimension[], summariesPosition: PivotSummaryPosition, parent?: IPivotDimension, parentRec?: IPivotGridRecord): void +- static **getAggregateList**(val: IPivotValue, grid: PivotGridType): IPivotAggregator[] +- static **getAggregatorForType**(aggregate: IPivotAggregator, dataType: GridColumnDataType): PivotAggregation +- static **getAggregatorsForValue**(value: IPivotValue, grid: PivotGridType): IPivotAggregator[] +- static **getDimensionDepth**(dim: IPivotDimension): number +- static **getDirectLeafs**(records: IPivotGridRecord[]): any[] +- static **getFieldsHierarchy**(data: any[], dimensions: IPivotDimension[], dimensionType: PivotDimensionType, pivotKeys: IPivotKeys, cloneStrategy: IDataCloneStrategy): Map +- static **getRecordKey**(rec: IPivotGridRecord, currentDim: IPivotDimension): string +- static **processGroups**(recs: IPivotGridRecord[], dimension: IPivotDimension, pivotKeys: IPivotKeys, cloneStrategy: IDataCloneStrategy): void +- static **processHierarchy**(hierarchies: any, pivotKeys: any, level: number, rootData: boolean): IPivotGridRecord[] +- static **sort**(data: IPivotGridRecord[], expressions: ISortingExpression[], sorting: IGridSortingStrategy): any[] +- static **updateColumnTypeByAggregator**(columns: any[], value: IPivotValue, isSingleValue: boolean): void + +### [Point](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/Point) + +- **constructor**(x: number, y: number): Point +- **x**: `number` +- **y**: `number` + +### [ScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 overlay. + +- **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/22.0.0/classes/SortingIndexPipe) + +- **constructor**(): SortingIndexPipe +- **transform**(columnField: string, sortingExpressions: ISortingExpression[]): number + +### [ThemeToken](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/ThemeToken) + +- **constructor**(t?: IgxTheme): ThemeToken +- **subject**: `BehaviorSubject` +- **preferToken**: `boolean` +- **theme**: `IgxTheme` +- **onChange**(callback: any): Subscription +- **set**(theme: IgxTheme): void + +### [TooltipPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/TooltipPositionStrategy) +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): TooltipPositionStrategy +- **position**(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean, target?: HTMLElement | Point): void — Position the element based on the PositionStrategy implementing this interface. +- **positionArrow**(arrow: HTMLElement, arrowFit: ArrowFit): void — Sets the position of the arrow relative to the tooltip element. + +### [TreeGridFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/TreeGridFilteringStrategy) + +- **constructor**(hierarchicalFilterFields?: string[]): TreeGridFilteringStrategy +- **hierarchicalFilterFields**: `string[]` +- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridTypeBase): ITreeGridRecord[] +- **getFilterItems**(column: ColumnType, tree: IFilteringExpressionsTree): Promise + +### [TreeGridFormattedValuesFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/TreeGridFormattedValuesFilteringStrategy) + +- **constructor**(fields?: string[]): TreeGridFormattedValuesFilteringStrategy + +### [TreeGridMatchingRecordsOnlyFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/classes/TreeGridMatchingRecordsOnlyFilteringStrategy) + +- **constructor**(hierarchicalFilterFields?: string[]): TreeGridMatchingRecordsOnlyFilteringStrategy +- **filter**(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridTypeBase): ITreeGridRecord[] + +## Interfaces + +### [Action](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/Action) + +- **recordRef**: `any` +- **transaction**: `T` + +### [AnimationPlayer](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/AnimationPlayer) + +- **animationEnd**: `EventEmitter` — Emits when the animation ends +- **animationStart**: `EventEmitter` — Emits when the animation starts +- **position**: `number` — Current position of the animation. +- **destroy**: `any` +- **finish**: `any` +- **hasStarted**: `any` +- **init**: `any` +- **play**: `any` +- **reset**: `any` + +### [AnimationService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/AnimationService) + +- **buildAnimation**: `any` — Creates an AnimationPlayer instance + +### [ArrowFit](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ArrowFit) + +- **arrowRect?**: `Partial` — Rectangle of the arrow element. +- **direction?**: `"left" | "right" | "top" | "bottom"` — Direction in which the arrow points. +- **left?**: `number` — Horizontal offset of the arrow element from the tooltip +- **tooltipRect?**: `Partial` — Rectangle of the tooltip element. +- **top?**: `number` — Vertical offset of the arrow element from the tooltip + +### [AutocompleteOverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/AutocompleteOverlaySettings) + +- **outlet?**: `IgxOverlayOutletDirective | ElementRef` — 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/22.0.0/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/22.0.0/interfaces/BannerCancelEventArgs) + + +### [BannerEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/BannerEventArgs) + +- **event?**: `Event` + +### [CancelableBrowserEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/CancelableBrowserEventArgs) + +- **event?**: `Event` — Browser event + +### [CancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/CancelableEventArgs) + +- **cancel**: `boolean` — Provides the ability to cancel the event. + +### [CarouselAnimationSettings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/CarouselAnimationSettings) + +- **enterAnimation**: `AnimationReferenceMetadata` +- **leaveAnimation**: `AnimationReferenceMetadata` + +### [CellType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/CellType) +Interface representing a cell in the grid. It is essentially the blueprint to a cell object. +Contains definitions of properties and methods, relevant to a cell + +- **active**: `boolean` — Indicates whether the cell is currently active (focused). +- **cellID?**: `any` — Optional; The cellID is the unique key, used to identify the cell +- **column**: `ColumnType` — Represents the column that the cell belongs to. +- **editable**: `boolean` — Indicates whether the cell can be edited. +- **editMode**: `boolean` — Indicates whether the cell is currently in edit mode. +- **editValue**: `any` — The value to display when the cell is in edit mode. +- **grid**: `GridType` — Represents the grid instance containing the cell +- **id?**: `any` — Optional; An object identifying the cell. It contains rowID, columnID, and rowIndex of the cell. +- **nativeElement?**: `HTMLElement` — Represents the native HTML element of the cell itself +- **readonly?**: `boolean` +- **row**: `RowType` — Represents the row that the cell belongs to +- **selected**: `boolean` — Indicates whether the cell is currently selected. It is false, if the sell is not selected, and true, if it is. +- **title?**: `any` — An optional title to display for the cell +- **update**: `any` — A method definition to update the value of the cell. +- **validation?**: `IGridValidationState` — Optional; An object representing the validation state of the cell. +Whether it's valid or invalid, and if it has errors +- **value**: `any` — The current value of the cell. +- **visibleColumnIndex?**: `number` — The index of the column that the cell belongs to. It counts only the visible (not hidden) columns +- **width**: `string` — The CSS width of the cell as a string. +- **activate?**: `any` +- **calculateSizeToFit?**: `any` +- **onClick?**: `any` +- **onDoubleClick?**: `any` +- **setEditMode?**: `any` + +### [ChatInputContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ChatInputContext) +Context provided to the chat input template. + +- **$implicit**: `string` — The current input value +- **attachments**: `IgcChatMessageAttachment[]` — Array of attachments associated with the input + +### [ColumnGroupsCache](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ColumnGroupsCache) + +- **level**: `number` +- **visibleIndex**: `number` + +### [ColumnType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ColumnType) +Represents a column in the GridType. It is essentially the blueprint to a column object. +Contains definitions of properties and methods, relevant to a column + +- **additionalTemplateContext**: `any` +- **applySelectableClass**: `boolean` +- **calcWidth**: `any` — Custom CSS styling, applied to every column +calcWidth, minWidthPx, maxWidthPx, minWidth, maxWidth, minWidthPercent, maxWidthPercent, resolvedWidth +- **children**: `QueryList` — A list containing all the child columns under this column (if any). +- **colEnd**: `number` +- **collapsible?**: `boolean` — Optional +Indicated whether the column can be collapsed. If the value is true, the column can be collapsed +It is used in tree grid and for navigation +- **collapsibleIndicatorTemplate?**: `TemplateRef` — The template reference for the collapsible indicator of the column. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **colStart**: `number` +- **columnGroup**: `boolean` — Specifies whether the column belongs to a group of columns. +- **columnLayout**: `boolean` +- **columnLayoutChild**: `boolean` +- **dataType**: `GridColumnDataType` — Represents the type of data for the column: +string, number, boolean, currency, date, time, etc. +- **disabledSummaries?**: `string[]` +- **disableHiding**: `boolean` — Indicates whether a column can be hidden. If the value is true, the column cannot be hidden +- **disablePinning**: `boolean` — Indicates whether a column can be pinned. If the value is true, the column cannot be pinned +- **editable**: `boolean` — Indicated whether the column can be edited. If the value is true, the column can be edited +- **editorOptions**: `IColumnEditorOptions` — Sets properties on the default column editors +- **expanded**: `boolean` — Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded +- **filterable**: `boolean` — Indicates whether a column can be filtered. If the value is true, the column can be filtered +- **filterCellTemplate**: `TemplateRef` — Represents a custom template for filtering +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **filteringExpressionsTree**: `FilteringExpressionsTree` — The filtering expressions for the column. +The type contains properties and methods for filtering: filteringOperands, operator (logic), fieldName, etc. +- **filteringIgnoreCase**: `boolean` +- **grid**: `GridTypeBase` — Represents the instance of the parent GridType that contains this column. +- **groupable**: `boolean` — Indicates whether a column can be put in a group. If the value is true, the column can be put in a group +- **groupingComparer**: `any` — Represents a method with custom grouping comparator to determine the members of the group. +- **hasNestedPath**: `boolean` +- **hasSummary**: `boolean` +- **header?**: `string` — Optional +Represents the header text of the column +- **headerClasses**: `any` — Represents custom CSS classes applied to the header element. When added, they take different styling +- **headerGroupClasses**: `any` — Represents custom CSS classes applied to the header group. When added, they take different styling +- **headerGroupStyles**: `any` — Represents custom CSS styles applied to the header group. When added, they take different styling +- **headerStyles**: `any` — Represents custom CSS styles applied to the header element. When added, they take different styling +- **headerTemplate**: `TemplateRef` — The template reference for the custom header of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **hidden**: `boolean` — Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible +- **index**: `number` — The index of the column within the grid. +Includes the hidden columns when counting +- **inlineEditorTemplate**: `TemplateRef` — The template reference for the custom inline editor of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **isFirstPinned**: `boolean` — Indicates whether the current column is the first for the grid to be pinned. +If the value is false, there are columns, that have been pinned before the current +- **isLastPinned**: `boolean` — Indicates whether the current column is the last to be pinned. +If the value is false, there are columns, that have been pinned after the current +- **level**: `number` — Represents the hierarchical level of the column in the column layout +- **maxWidth**: `string` +- **maxWidthPercent**: `number` +- **maxWidthPx**: `number` +- **merge**: `boolean` +- **mergingComparer**: `any` +- **minWidth**: `string` +- **minWidthPercent**: `number` +- **minWidthPx**: `number` +- **parent**: `ColumnType` — Optional +The immediate parent (right above) column of this column (if any). +If there is no parent, that means the current column is the root parent +- **pinned**: `boolean` — Indicates if the column is currently pinned. If the value is true, the column is pinned +- **pipeArgs**: `IColumnPipeArgs` — Optional arguments for any pipe applied to the field. +- **resizable**: `boolean` — Specifies whether the column can be resized. If the value is true, the column can be resized +- **resolvedWidth**: `string` +- **rowEnd**: `number` +- **rowStart**: `number` +- **searchable**: `boolean` — Specifies whether the data of the column can be searched. If the value is true, the column data can be searched +- **selectable**: `boolean` — Indicates if the column can be selected. If the value is true, the column can be selected +- **selected**: `boolean` — Indicates if the column is currently selected. If the value is true, the column is selected +- **sortable**: `boolean` — Indicates whether a column can be sorted. If the value is true, the column can be sorted. +- **sortingIgnoreCase**: `boolean` — Indicates whether the search should match results, no matter the case of the letters (upper and lower) +If the value is false, the result will depend on the case (example: E will not match e) +If the value is true, the result will not depend on the case (example: E will match e) +- **sortStrategy**: `ISortingStrategy` — The sorting strategy used for sorting this column. +The interface contains a method sort that sorts the provided data based on the given sorting expressions +- **summaries**: `any` +- **summaryTemplate**: `TemplateRef` — The template reference for a summary of the column +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **title**: `string` — The title of the column, used for accessibility purposes +- **topLevelParent?**: `ColumnType` — Optional +The root parent of this column (if any). +If there is no root parent, that means the current column is the root parent +- **validators**: `any[]` +- **visibleIndex**: `number` — The index of the column within the grid. +Does not include the hidden columns when counting +- **width**: `string` +- **childColumns**: `any` +- **getAutoSize**: `any` +- **getCellWidth**: `any` +- **getGridTemplate**: `any` +- **getResizableColUnderEnd**: `any` +- **move**: `any` +- **pin**: `any` +- **populateVisibleIndexes?**: `any` +- **toggleVisibility**: `any` +- **unpin**: `any` + +### [CustomDateRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/CustomDateRange) +Represents a range between two dates and a label used for predefined and custom date ranges. + +- **dateRange**: `DateRange` +- **label**: `string` + +### [DatePartDeltas](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/DatePartDeltas) +Delta values used for spin actions. + +- **date?**: `number` +- **fractionalSeconds?**: `number` +- **hours?**: `number` +- **minutes?**: `number` +- **month?**: `number` +- **seconds?**: `number` +- **year?**: `number` + +### [DateRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/DateRange) +Represents a range between two dates. + +- **end**: `string | Date` +- **start**: `string | Date` + +### [DateRangeDescriptor](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/DateRangeDescriptor) + +- **dateRange?**: `Date[]` +- **type**: `DateRangeType` + +### [DimensionValueType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/DimensionValueType) + +- **children**: `Map` +- **value**: `string` + +### [EntityType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/EntityType) +Describes an entity in the QueryBuilder. +An entity represents a logical grouping of fields and can have nested child entities. + +- **childEntities?**: `EntityType[]` — Optional child entities. +This allows building hierarchical or nested query structures. +- **fields**: `FieldType[]` — The list of fields that belong to this entity. +- **name**: `string` — The name of the entity. +Typically used as an identifier in expressions. + +### [FamilyMeta](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/FamilyMeta) + +- **className**: `string` +- **prefix?**: `string` +- **type**: `IconType` + +### [FieldType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/FieldType) +Describes a field that can be used in the Grid and QueryBuilder components. + +- **dataType**: `GridColumnDataType` — The data type of the field. +- **defaultDateTimeFormat?**: `string` — Default date/time format for Date/Time fields. +- **defaultTimeFormat?**: `string` — Default time format for Date/Time fields. +- **editorOptions?**: `IFieldEditorOptions` — Options for the editor associated with this field. +- **field**: `string` — The internal field name, used in expressions and queries. +- **filters?**: `IgxFilteringOperand` — Optional filtering operands that apply to this field. +- **header?**: `string` — Optional column header for UI display purposes. +- **label?**: `string` — Display label for the field. +- **pipeArgs?**: `IFieldPipeArgs` — Optional arguments for any pipe applied to the field. +- **formatter?**: `any` + +### [FlatGridType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/FlatGridType) +An interface describing a Flat Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from GridType + +- **groupingExpansionState**: `IGroupByExpandState[]` +- **groupingExpressions**: `IGroupingExpression[]` +- **groupingExpressionsChange**: `EventEmitter` +- **clearGrouping**: `any` +- **groupBy**: `any` +- **toggleGroup**: `any` + +### [GridSelectionRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/GridSelectionRange) +Represents a range selection between certain rows and columns of the grid. +Range selection can be made either through drag selection or through keyboard selection. + +- **columnEnd**: `string | number` — The identifier or index of the ending column of the selection range. +It can be either a string representing the column's field name or a numeric index. +- **columnStart**: `string | number` — The identifier or index of the starting column of the selection range. +It can be either a string representing the column's field name or a numeric index. +- **rowEnd**: `number` — The index of the ending row of the selection range. +- **rowStart**: `number` — The index of the starting row of the selection range. + +### [GridServiceType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/GridServiceType) +Represents the service interface for interacting with the grid. + +- **cms**: `IgxColumnMovingService` — A service responsible for handling column moving within the grid. It contains a reference to the column, its icon, and indicator for cancellation. +- **crudService**: `any` — Represents the type of the CRUD service (Create, Read, Update, Delete) operations on the grid data. +- **grid**: `GridType` — The reference to the parent GridType that contains the service. +- **addRowToData**: `any` +- **clear_groupby?**: `any` +- **clear_sort**: `any` +- **deleteRowById**: `any` +- **expand_path_to_record?**: `any` +- **filterDataByExpressions**: `any` +- **get_all_data**: `any` +- **get_cell_by_index**: `any` +- **get_cell_by_key**: `any` +- **get_cell_by_visible_index**: `any` +- **get_column_by_name**: `any` +- **get_data**: `any` +- **get_groupBy_record_id?**: `any` +- **get_pin_row_event_args**: `any` +- **get_rec_by_id**: `any` +- **get_rec_id_by_index**: `any` +- **get_rec_index_by_id**: `any` +- **get_row_by_index**: `any` +- **get_row_by_key**: `any` +- **get_row_expansion_state**: `any` +- **get_row_id**: `any` +- **get_row_index_in_data**: `any` +- **get_selected_children?**: `any` +- **get_summary_data**: `any` +- **getChildGrid?**: `any` +- **getChildGrids?**: `any` +- **getParentRowId?**: `any` +- **getRowData**: `any` +- **prepare_sorting_expression**: `any` +- **registerChildRowIsland?**: `any` +- **remove_grouping_expression?**: `any` +- **row_deleted_transaction**: `any` +- **set_grouprow_expansion_state?**: `any` +- **set_row_expansion_state**: `any` +- **sort**: `any` +- **sort_multiple**: `any` +- **sortDataByExpressions**: `any` +- **unsetChildRowIsland?**: `any` +- **update_cell**: `any` +- **update_row**: `any` + +### [GridSVGIcon](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/GridSVGIcon) + +- **name**: `string` +- **value**: `string` + +### [GridType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/GridType) +Interface representing a grid type. It is essentially the blueprint to a grid object. +Contains definitions of properties and methods, relevant to a grid +Extends IGridDataBindable + +- **_baseFontSize?**: `number` — The default font size, calculated for each element +- **_filteredSortedUnpinnedData**: `any[]` +- **_filteredUnpinnedData**: `any[]` +- **_totalRecords**: `number` +- **activeNodeChange**: `EventEmitter` +- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree` +- **advancedFilteringExpressionsTreeChange**: `EventEmitter` +- **allowAdvancedFiltering**: `boolean` +- **allowFiltering**: `boolean` — Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered +- **batchEditing**: `boolean` +- **batchEditingChange?**: `EventEmitter` +- **calcHeight**: `number` — CSS styling calculated for an element: calcHeight, calcWidth, outerWidth +- **calcWidth**: `number` +- **cascadeOnDelete?**: `boolean` +- **cdr**: `ChangeDetectorRef` — Provides change detection functionality. +A change-detection tree collects all views that are to be checked for changes. +The property cannot be changed (readonly) +- **cellClick**: `EventEmitter` +- **cellEdit**: `EventEmitter` +- **cellEditDone**: `EventEmitter` +- **cellEditEnter**: `EventEmitter` +- **cellEditExit**: `EventEmitter` +- **cellMergeMode**: `GridCellMergeMode` +- **cellSelection**: `GridSelectionMode` — Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade' +- **childDataKey?**: `any` +- **childLayoutKeys?**: `any[]` +- **childLayoutList?**: `QueryList` +- **columnInDrag**: `any` — Indicates if the column of the grid is in drag mode +- **columnList**: `QueryList` — An unmodifiable list, containing all the columns of the grid. +- **columnMoving**: `EventEmitter` +- **columnMovingEnd**: `EventEmitter` +- **columnMovingStart**: `EventEmitter` +- **columnPin**: `EventEmitter` +- **columnPinned**: `EventEmitter` +- **columnResized**: `EventEmitter` +- **columns**: `ColumnType[]` +- **columnSelection**: `GridSelectionMode` — Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade' +- **columnSelectionChanging**: `EventEmitter` +- **columnVisibilityChanged**: `EventEmitter` +- **columnVisibilityChanging**: `EventEmitter` +- **columnWidthSetByUser**: `boolean` — Indicates whether the width of the column is set by the user, or is configured automatically. +- **contextMenu**: `EventEmitter` +- **currencyPositionLeft**: `boolean` — Indicates whether the currency symbol is positioned to the left of values. +- **dataCloneStrategy**: `IDataCloneStrategy` — Strategy, used for cloning the provided data. The type has one method, that takes any type of data +- **dataRowList**: `any` +- **dataView**: `any[]` +- **dataWithAddedInTransactionRows**: `any[]` +- **defaultRowHeight**: `number` +- **defaultSummaryHeight**: `number` +- **disableTransitions**: `boolean` — Indicates whether transitions are disabled for the grid. +- **doubleClick**: `EventEmitter` +- **dragIndicatorIconBase**: `any` — The base drag indicator icon. Could be of any type +- **dragIndicatorIconTemplate**: `any` — The template for drag indicator icons. Could be of any type +- **excelStyleHeaderIconTemplate**: `TemplateRef` — The template for header icon +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **expansionDepth?**: `number` +- **expansionStates**: `Map` +- **filteredSortedData**: `any[]` +- **filtering**: `EventEmitter` +- **filteringDone**: `EventEmitter` +- **filteringExpressionsTree**: `IFilteringExpressionsTree` +- **filteringExpressionsTreeChange**: `EventEmitter` +- **filteringLogic**: `FilteringLogic` +- **filteringPipeTrigger**: `number` +- **filterMode**: `FilterMode` — The filter mode for the grid. It can be quick filter of excel-style filter +- **filterStrategy**: `IFilteringStrategy` +- **firstEditableColumnIndex**: `number` +- **flatData?**: `any[]` +- **foreignKey?**: `any` +- **formGroupCreated**: `EventEmitter` +- **getHeaderCellWidth**: `any` — Property, that gets the header cell inner width for auto-sizing. +- **gridAPI**: `GridServiceType` — Represents the grid service type providing API methods for the grid +- **gridKeydown**: `EventEmitter` +- **groupByRowSelectorTemplate?**: `TemplateRef` — Optional +The template for the group row selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **groupingExpansionState?**: `IGroupByExpandState[]` +- **groupingExpressions?**: `IGroupingExpression[]` +- **groupingExpressionsChange?**: `EventEmitter` +- **groupingFlatResult?**: `any[]` +- **groupingMetadata?**: `any[]` +- **groupingResult?**: `any[]` +- **groupRowTemplate?**: `TemplateRef` — Optional +The template for group-by rows. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **groupsExpanded?**: `boolean` +- **groupsRecords?**: `IGroupByRecord[]` +- **groupStrategy?**: `IGridGroupingStrategy` +- **hasChildrenKey?**: `any` +- **hasDetails**: `boolean` +- **hasExpandableChildren?**: `boolean` — Optional +Indicates whether the grid has expandable children (hierarchical and tree grid) +- **hasPinnedRecords**: `boolean` +- **hasVisibleColumns**: `boolean` — Indicates whether the grid has columns that are shown +- **headerCollapsedIndicatorTemplate**: `TemplateRef` — The template for header collapsed indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **headerExpandedIndicatorTemplate**: `TemplateRef` — The template for header expanded indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **headerFeaturesWidth**: `number` +- **headSelectorBaseAriaLabel**: `string` +- **headSelectorTemplate**: `TemplateRef` — The template for the header selector. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **hiddenColumnsCount**: `number` — Represents the count of only the hidden (not visible) columns +- **highlightedRowID?**: `any` +- **iconTemplate?**: `TemplateRef` — Optional +The template for grid icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **id**: `string` — Represents the unique identifier of the grid. +- **isCellSelectable**: `boolean` — Indicates whether cells are selectable in the grid +- **isLoading**: `boolean` +- **isMultiRowSelectionEnabled**: `boolean` — Indicates whether it is allowed to select more than one row in the grid +- **isRowPinningToTop**: `boolean` +- **isRowSelectable**: `boolean` — Indicates whether the grid's rows can be selected +- **lastChildGrid?**: `GridType` +- **lastEditableColumnIndex**: `number` +- **lastSearchInfo**: `ISearchInfo` — Represents the last search in the grid +It contains the search text (the user has entered), the match and some settings for the search +- **loadChildrenOnDemand?**: `any` +- **loadingRows?**: `Set` +- **locale**: `string` — Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc. +- **localeChange**: `EventEmitter` +- **mergeStrategy**: `IGridMergeStrategy` +- **moving**: `boolean` — Indicates whether the grid is currently in a moving state. +- **multiRowLayoutRowSize**: `number` +- **nativeElement**: `HTMLElement` — Represents the native HTML element itself +- **navigation**: `any` +- **outerWidth**: `number` +- **outlet**: `any` +- **pagingMode**: `GridPagingMode` — Represents the paging of the grid. It can be either 'Local' or 'Remote' +- Local: Default value; The grid will paginate the data source based on the page +- **parent?**: `GridType` +- **parentVirtDir**: `any` +- **pinnedColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are pinned +- **pinnedColumnsCount**: `number` — Represents the count of only the pinned columns +- **pinnedEndColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are pinned to the end. +- **pinnedEndWidth**: `number` — The width of pinned element for pinning at end. +- **pinnedRecords**: `any[]` +- **pinnedRecordsCount**: `number` +- **pinnedRows**: `any[]` +- **pinnedStartColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are pinned to the start. +- **pinnedStartWidth**: `number` — The width of pinned element for pinning at start. +- **pinning**: `IPinningConfig` — The configuration for columns and rows pinning in the grid +It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom) +- **pipeTrigger**: `number` +- **primaryKey**: `string` — Represents the unique primary key used for identifying rows in the grid +- **processedExpandedFlatData?**: `any[]` +- **processedRecords?**: `Map` +- **processedRootRecords?**: `ITreeGridRecord[]` +- **rangeSelected**: `EventEmitter` +- **records?**: `Map` +- **rendered$**: `Observable` +- **renderedRowHeight**: `number` — The height of the visible rows in the grid. +- **resizeNotify**: `Subject` +- **resourceStrings**: `IGridResourceStrings` +- **rootGrid?**: `GridType` +- **rootRecords?**: `ITreeGridRecord[]` +- **rootSummariesEnabled**: `boolean` +- **rowAdd**: `EventEmitter` +- **rowAdded**: `EventEmitter` +- **rowAddedNotifier**: `Subject` +- **rowClick**: `EventEmitter` +- **rowCollapsedIndicatorTemplate**: `TemplateRef` — The template for collapsed row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowDelete**: `EventEmitter` +- **rowDeleted**: `EventEmitter` +- **rowDeletedNotifier**: `Subject` +- **rowDragEnd**: `EventEmitter` +- **rowDraggable**: `boolean` — Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged +- **rowDragging**: `boolean` — Indicates whether a row is currently being dragged +- **rowDragStart**: `EventEmitter` +- **rowEdit**: `EventEmitter` +- **rowEditable**: `boolean` — Indicates whether rows in the grid are editable. If te value is true, the rows can be edited +- **rowEditDone**: `EventEmitter` +- **rowEditEnter**: `EventEmitter` +- **rowEditExit**: `EventEmitter` +- **rowEditingOverlay**: `IgxToggleDirective` +- **rowEditTabs**: `any` +- **rowExpandedIndicatorTemplate**: `TemplateRef` — The template for expanded row indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowHeight**: `number` — The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling +- **rowList**: `any` +- **rowLoadingIndicatorTemplate?**: `TemplateRef` — Optional +The template for row loading indicators. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowSelection**: `GridSelectionMode` — Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade' +- **rowSelectionChanging**: `EventEmitter` +- **rowSelectorTemplate**: `TemplateRef` — The template for row selectors. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **rowToggle**: `EventEmitter` +- **scrollSize**: `number` +- **selected**: `EventEmitter` +- **selectedCells?**: `CellType[]` +- **selectedRows**: `any[]` +- **selectionService**: `any` — The service handling selection in the grid. Selecting, deselecting elements +- **selectRowOnClick**: `boolean` +- **showExpandAll?**: `boolean` — Optional +Indicates whether collapsed grid elements should be expanded +- **showRowSelectors**: `boolean` — Indicates whether the selectors of the rows are visible +- **sortAscendingHeaderIconTemplate**: `TemplateRef` — The template for ascending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortDescendingHeaderIconTemplate**: `TemplateRef` — The template for descending sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortHeaderIconTemplate**: `TemplateRef` — The template for sort header icons. +It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views +- **sortingExpressions**: `ISortingExpression[]` +- **sortingExpressionsChange**: `EventEmitter[]>` +- **sortingOptions**: `ISortingOptions` +- **sortStrategy**: `IGridSortingStrategy` +- **summariesMargin**: `number` — The CSS margin of the summaries +- **summariesRowList**: `any` +- **summaryCalculationMode**: `GridSummaryCalculationMode` — Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels' +- **summaryPipeTrigger**: `number` +- **summaryPosition**: `GridSummaryPosition` — Represents the position of summaries: 'top', 'bottom' +- **summaryRowHeight**: `number` +- **tbody**: `any` +- **toolbarExporting**: `EventEmitter` +- **totalRowsCountAfterFilter**: `number` +- **transactions**: `TransactionService` — Represents the transaction service for the grid. +- **treeGroupArea?**: `any` +- **uniqueColumnValuesStrategy**: `any` — Property, that provides a callback for loading unique column values on demand. +If this property is provided, the unique values it generates will be used by the Excel Style Filtering +- **unpinnedColumns**: `ColumnType[]` — An array of columns, but it counts only the ones that are not pinned +- **unpinnedRecords**: `any[]` +- **unpinnedWidth**: `number` — The width of unpinned element +- **updateOnRender?**: `boolean` +- **validation**: `IgxGridValidationService` — Represents the validation service for the grid. The type contains properties and methods (logic) for validating records +- **validationStatusChange**: `EventEmitter` +- **validationTrigger**: `GridValidationTrigger` — The trigger for grid validation. It's value can either be change or blur +- **verticalScrollContainer**: `any` +- **virtualizationState**: `IForOfState` — Represents the state of virtualization for the grid. It has an owner, start index and chunk size +- **visibleColumns**: `ColumnType[]` — An array of columns, but it counts only the ones visible (not hidden) in the view +- **clearCellSelection**: `any` +- **clearGrouping?**: `any` +- **clearSort**: `any` +- **closeRowEditingOverlay**: `any` +- **collapseRow**: `any` +- **columnToVisibleIndex**: `any` +- **createColumnsList?**: `any` +- **createFilterDropdown**: `any` +- **createRow?**: `any` +- **deleteRow**: `any` +- **deleteRowById**: `any` +- **deselectAllColumns**: `any` +- **deselectAllRows**: `any` +- **deselectColumns**: `any` +- **deselectRows**: `any` +- **generateRowPath?**: `any` +- **getChildGrids?**: `any` +- **getColumnByName**: `any` +- **getColumnByVisibleIndex**: `any` +- **getDefaultExpandState**: `any` +- **getDragGhostCustomTemplate**: `any` +- **getEmptyRecordObjectFor**: `any` +- **getHeaderGroupWidth**: `any` +- **getInitialPinnedIndex**: `any` +- **getNextCell**: `any` +- **getPossibleColumnWidth**: `any` +- **getPreviousCell**: `any` +- **getRowByIndex?**: `any` +- **getRowByKey?**: `any` +- **getSelectedRanges**: `any` +- **getUnpinnedIndexById**: `any` +- **getVisibleContentHeight**: `any` +- **groupBy?**: `any` +- **hasVerticalScroll**: `any` +- **isChildGridRecord?**: `any` +- **isColumnGrouped**: `any` +- **isDetailRecord**: `any` +- **isExpandedGroup**: `any` +- **isGhostRecord**: `any` +- **isGroupByRecord**: `any` +- **isHierarchicalRecord?**: `any` +- **isRecordMerged**: `any` +- **isRecordPinned**: `any` +- **isRecordPinnedByViewIndex**: `any` +- **isSummaryRow**: `any` +- **isTreeRow?**: `any` +- **moveColumn**: `any` +- **navigateTo**: `any` +- **notifyChanges**: `any` +- **openAdvancedFilteringDialog**: `any` +- **openRowOverlay**: `any` +- **pinRow**: `any` +- **preventHeaderScroll?**: `any` +- **reflow**: `any` +- **refreshSearch**: `any` +- **repositionRowEditingOverlay**: `any` +- **resetColumnCollections**: `any` +- **resetHorizontalVirtualization**: `any` +- **resolveOutlet?**: `any` +- **selectAllRows**: `any` +- **selectColumns**: `any` +- **selectedColumns**: `any` +- **selectRange**: `any` +- **selectRows**: `any` +- **setFilteredData**: `any` +- **setFilteredSortedData**: `any` +- **setUpPaginator**: `any` +- **showSnackbarFor**: `any` +- **sort**: `any` +- **toggleAll?**: `any` +- **toggleAllGroupRows?**: `any` +- **toggleGroup?**: `any` +- **trackColumnChanges**: `any` +- **triggerPipes**: `any` +- **unpinRow**: `any` +- **updateCell**: `any` +- **updateColumns**: `any` +- **updateRow**: `any` + +### [GridTypeBase](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/GridTypeBase) +Stub type for GridType - minimal interface for typing in core + +- **data**: `any[]` +- **id?**: `string` +- **primaryKey?**: `string` + +### [HeaderType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/HeaderType) +Interface representing a header cell in the grid. It is essentially the blueprint to a header cell object. +Contains definitions of properties, relevant to the header + +- **column**: `ColumnType` — The column that the header cell represents. +- **nativeElement**: `HTMLElement` — Represents the native HTML element of the cell itself +- **selectable**: `boolean` — Indicates whether the cell can be selected +- **selected**: `boolean` — Indicates whether the cell is currently selected +- **sortDirection**: `SortingDirection` — Represents the sorting direction of the column (ascending, descending or none). +- **sorted**: `boolean` — Indicates whether the column is currently sorted. +- **title**: `boolean` — Indicates whether the column header is a title cell. + +### [HierarchicalGridType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/HierarchicalGridType) +An interface describing a Hierarchical Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from GridType + +- **childLayoutKeys**: `any[]` + +### [HierarchicalTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/HierarchicalTransactionService) + +- **commit**: `any` + +### [IAccordionCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IAccordionCancelableEventArgs) + +- **cancel**: `boolean` — Enables canceling the expansion/collapse operation. +- **owner**: `IgxAccordionComponent` — Provides reference to the owner component. +- **panel**: `IgxExpansionPanelBase` — Provides a reference to the expansion panel which is currently expanding/collapsing. + +### [IAccordionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IAccordionEventArgs) + +- **owner**: `IgxAccordionComponent` — Provides reference to the owner component. +- **panel**: `IgxExpansionPanelBase` — Provides a reference to the expansion panel which was expanded/collapsed. + +### [IActiveHighlightInfo](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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` — Additional, custom checks to perform prior an element highlighting. +- **row?**: `any` — The row of the highlight. + +### [IActiveNode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IActiveNode) + +- **column?**: `number` +- **gridID?**: `string` +- **layout?**: `IMultiRowLayoutNode` +- **level?**: `number` +- **mchCache?**: `ColumnGroupsCache` +- **row**: `number` + +### [IActiveNodeChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IActiveNodeChangeEventArgs) +Emitted when the active node is changed + +- **column**: `number` — Represents the column index of the active node +- **level?**: `number` — Optional +Represents the hierarchical level of the active node +- **row**: `number` — Represents the row index of the active node +- **tag**: `GridKeydownTargetType` — Represents the type of the active node. +The GridKeydownTargetType is an enum or that specifies the possible target types + +### [IBaseCancelableBrowserEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseCancelableBrowserEventArgs) + + +### [IBaseCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseCancelableEventArgs) + + +### [IBaseChipEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseChipEventArgs) + +- **originalEvent**: `KeyboardEvent | MouseEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs` +- **owner**: `IgxChipComponent` — Provides reference to the owner component. + +### [IBaseChipsAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseChipsAreaEventArgs) + +- **originalEvent**: `KeyboardEvent | MouseEvent | TouchEvent | IDropBaseEventArgs | IDragBaseEventArgs` +- **owner**: `IgxChipsAreaComponent` + +### [IBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseEventArgs) + +- **owner?**: `any` — Provides reference to the owner component. + +### [IBaseSearchInfo](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IBaseSearchInfo) + +- **caseSensitive**: `boolean` +- **content**: `string` +- **exactMatch**: `boolean` +- **matchCount**: `number` +- **searchText**: `string` + +### [IButtonEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IButtonEventArgs) + +- **button**: `IgxButtonDirective` + +### [IButtonGroupEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IButtonGroupEventArgs) + +- **button**: `IgxButtonDirective` +- **index**: `number` +- **owner**: `IgxButtonGroupComponent` — Provides reference to the owner component. + +### [ICachedViewLoadedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ICachedViewLoadedEventArgs) + +- **oldContext**: `any` + +### [ICellPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ICellPosition) +The event is triggered when getting the current position of a certain cell + +- **rowIndex**: `number` — It returns the position (index) of the row, the cell is in +- **visibleColumnIndex**: `number` — It returns the position (index) of the column, the cell is in +Counts only the visible (non hidden) columns + +### [IChangeCheckboxEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChangeCheckboxEventArgs) + +- **checked**: `boolean` +- **value?**: `any` + +### [IChangeProgressEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChangeProgressEventArgs) + +- **currentValue**: `number` +- **previousValue**: `number` + +### [IChipClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipClickEventArgs) + +- **cancel**: `boolean` + +### [IChipEnterDragAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipEnterDragAreaEventArgs) + +- **dragChip**: `IgxChipComponent` + +### [IChipKeyDownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipKeyDownEventArgs) + +- **cancel**: `boolean` +- **originalEvent**: `KeyboardEvent` + +### [IChipsAreaReorderEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipsAreaReorderEventArgs) + +- **chipsArray**: `IgxChipComponent[]` + +### [IChipsAreaSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipsAreaSelectEventArgs) + +- **newSelection**: `IgxChipComponent[]` + +### [IChipSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IChipSelectEventArgs) + +- **cancel**: `boolean` +- **selected**: `boolean` + +### [IClipboardOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IClipboardOptions) +An interface describing settings for clipboard options + +- **copyFormatters**: `boolean` — Apply the columns formatters (if any) on the data in the clipboard output. +- **copyHeaders**: `boolean` — Include the columns headers in the clipboard output. +- **enabled**: `boolean` — Enables/disables the copy behavior +- **separator**: `string` — The separator used for formatting the copy output. Defaults to \t. + +### [IColumnEditorOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnEditorOptions) + + +### [IColumnExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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?**: `GridTypeBase` — 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/22.0.0/interfaces/IColumnInfo) + +- **columnGroup?**: `string | ColumnType` +- **columnGroupParent?**: `string | ColumnType` +- **columnSpan?**: `number` +- **currencyCode?**: `string` +- **dataType?**: `GridColumnDataType` +- **dateFormat?**: `string` +- **digitsInfo?**: `string` +- **displayFormat?**: `string` +- **exportIndex?**: `number` +- **field**: `string` +- **formatter?**: `any` +- **header**: `string` +- **headerType?**: `ExportHeaderType` +- **level?**: `number` +- **pinnedIndex?**: `number` +- **rowSpan?**: `number` +- **skip**: `boolean` +- **skipFormatter?**: `boolean` +- **startIndex?**: `number` + +### [IColumnList](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnList) + +- **columns**: `IColumnInfo[]` +- **columnWidths**: `number[]` +- **indexOfLastPinnedColumn**: `number` +- **maxLevel?**: `number` +- **maxRowLevel?**: `number` + +### [IColumnMovingEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnMovingEndEventArgs) +Represents event arguments related to the end of a column moving operation in a grid + +- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **source**: `ColumnType` — The source of the event represents the column that is being moved. +The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties +- **target**: `ColumnType` — The target of the event represents the column, the source is being moved to. +The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties + +### [IColumnMovingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnMovingEventArgs) +Represents event arguments related to a column moving operation in a grid + +- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **source**: `ColumnType` — Represents the column that is being moved. +The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties + +### [IColumnMovingStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnMovingStartEventArgs) +Represents event arguments related to the start of a column moving operation in a grid. + +- **source**: `ColumnType` — Represents the column that is being moved. +The ColumnType contains the information (the grid it belongs to, css data, settings, etc.) of the column in its properties + +### [IColumnPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnPipeArgs) + + +### [IColumnResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnResizeEventArgs) +The event arguments when a column is being resized + +- **column**: `ColumnType` — Represents the information of the column that is being resized +- **newWidth**: `string` — Represents the new width, the column is being resized to +- **prevWidth**: `string` — Represents the old width of the column before the resizing + +### [IColumnResizingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnResizingEventArgs) +The event arguments when a column is being resized +It contains information about the column, it's old and new width +The event can be canceled + + +### [IColumnSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnSelectionEventArgs) +The event arguments when the selection state of a column is being changed +The event is cancelable + +- **added**: `string[]` — Represents an array of all added columns +Whenever a column has been selected, the array is "refreshed" with the selected columns +- **event?**: `Event` — Represents the original event, that has triggered the selection change +selecting, deselecting +- **newSelection**: `string[]` — Represents the newly selected columns +- **oldSelection**: `string[]` — Represents an array of columns, that have already been selected +- **removed**: `string[]` — Represents an array of all columns, removed from the selection +Whenever a column has been deselected, the array is "refreshed" with the columns, that have been previously selected, but are no longer + +### [IColumnSelectionState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnSelectionState) +Represents the state of the columns in the grid. + +- **field**: `string` — Represents the field name of the selected column, if any. Can be null if no column is selected. +- **range**: `string[]` — An array of strings representing the ranges of selected columns in the grid. + +### [IColumnState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnState) + +- **colEnd?**: `number` +- **collapsible?**: `boolean` +- **colStart?**: `number` +- **columnGroup**: `boolean` +- **columnLayout?**: `boolean` +- **dataType**: `GridColumnDataType` +- **disableHiding**: `boolean` +- **disablePinning**: `boolean` +- **editable**: `boolean` +- **expanded?**: `boolean` +- **field**: `string` +- **filterable**: `boolean` +- **filteringIgnoreCase**: `boolean` +- **groupable**: `boolean` +- **hasSummary**: `boolean` +- **header**: `string` +- **headerClasses**: `string` +- **headerGroupClasses**: `string` +- **hidden**: `boolean` +- **key**: `string` +- **maxWidth**: `string` +- **parent?**: `any` +- **parentKey**: `string` +- **pinned**: `boolean` +- **resizable**: `boolean` +- **rowEnd?**: `number` +- **rowStart?**: `number` +- **searchable**: `boolean` +- **sortable**: `boolean` +- **sortingIgnoreCase**: `boolean` +- **visibleWhenCollapsed?**: `boolean` +- **width**: `any` + +### [IColumnToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnToggledEventArgs) +Event emitted when a checkbox in the checkbox +list of an column actions 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/22.0.0/interfaces/IColumnVisibilityChangedEventArgs) +The event arguments after a column's visibility is changed. + +- **column**: `any` — Represents the column the event originated from +- **newValue**: `boolean` — The new hidden state that the column will have, if operation is successful. +Will be true when hiding and false when showing. + +### [IColumnVisibilityChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IColumnVisibilityChangingEventArgs) +The event arguments when a column's visibility is changed. +The event is cancelable +It contains information about the column and the it's visibility after the operation (will be true when hiding and false when showing) + + +### [IComboFilteringOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IComboFilteringOptions) +The filtering criteria to be applied on data search + +- **caseSensitive?**: `boolean` — Defines filtering case-sensitivity +- **filteringKey?**: `string` — Defines optional key to filter against complex list items. Default to displayKey if provided. + +### [IComboItemAdditionEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IComboItemAdditionEvent) + +- **addedItem**: `any` +- **newCollection**: `any[]` +- **oldCollection**: `any[]` + +### [IComboSearchInputEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IComboSearchInputEventArgs) +Event emitted when the igx-combo's search input changes + +- **searchText**: `string` — The text that has been typed into the search input + +### [IComboSelectionChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IComboSelectionChangedEventArgs) +Event emitted when the Combo's selection has changed + +- **added**: `any[]` — An array containing the items added to the selection (if any) +- **displayText**: `string` — The display text of the combo text box +- **event?**: `Event` — The user interaction that triggered the selection change +- **newSelection**: `any[]` — An array containing the new selection items +- **newValue**: `any[]` — An array containing the new selection items +- **oldSelection**: `any[]` — An array containing the old selection items +- **oldValue**: `any[]` — An array containing the old selection values +- **removed**: `any[]` — An array containing the items removed from the selection (if any) + +### [IComboSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IComboSelectionChangingEventArgs) +Event emitted when the Combo's selection is changing + + +### [IconFamily](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IconFamily) + +- **meta**: `FamilyMeta` +- **name**: `string` + +### [IconMeta](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IconMeta) + +- **family**: `string` +- **name**: `string` +- **type?**: `IconType` + +### [ICsvExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ICsvExportEndedEventArgs) + +- **csvData?**: `string` + +### [IDataCloneStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDataCloneStrategy) + +- **clone**: `any` + +### [IDateParts](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDateParts) +Interface describing Date object in parts + +- **day**: `number` +- **hours**: `number` +- **milliseconds**: `number` +- **minutes**: `number` +- **month**: `number` +- **seconds**: `number` +- **year**: `number` + +### [IDatePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDatePickerValidationFailedEventArgs) +Provides information about date picker reference and its previously valid value +when onValidationFailed event is fired. + +- **currentValue**: `string | Date` +- **prevValue**: `string | Date` + +### [IDialogCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDialogCancellableEventArgs) + + +### [IDialogEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDialogEventArgs) + +- **dialog**: `IgxDialogComponent` +- **event**: `Event` + +### [IDimensionsChange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IDimensionsChange) +Event emitted when dimension collection for rows, columns of filters is changed. + +- **dimensionCollectionType**: `PivotDimensionType` — The dimension list type - Row, Column or Filter. +- **dimensions**: `IPivotDimension[]` — The new list of dimensions. + +### [IDragBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IDragCustomTransitionArgs) + +- **delay?**: `number` +- **duration?**: `number` +- **timingFunction?**: `string` + +### [IDragGhostBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/interfaces/IDragStartEventArgs) + +- **cancel**: `boolean` — Set if the the dragging should be canceled. + +### [IDropBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IDropDownNavigationDirective) +Interface for an instance of drop down navigation + +- **target**: `any` +- **handleKeyDown**: `any` +- **onArrowDownKeyDown**: `any` +- **onArrowUpKeyDown**: `any` +- **onEndKeyDown**: `any` +- **onHomeKeyDown**: `any` + +### [IDropDroppedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IDropStrategy) + +- **dropAction**: `any` + +### [IExcelExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IExcelExportEndedEventArgs) + +- **xlsx?**: `Object` + +### [IExpansionPanelCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IExpansionPanelCancelableEventArgs) + + +### [IExpansionPanelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IExpansionPanelEventArgs) + +- **event**: `Event` + +### [IExportRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IExportRecord) + +- **data**: `any` +- **dimensionKeys?**: `string[]` +- **hidden?**: `boolean` +- **hierarchicalOwner?**: `string` +- **level**: `number` +- **owner?**: `string | GridTypeBase` +- **rawData?**: `any` +- **references?**: `IColumnInfo[]` +- **summaryKey?**: `string` +- **type**: `ExportRecordType` + +### [IExpressionTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IExpressionTree) + +- **entity?**: `string` +- **fieldName?**: `string` +- **filteringOperands**: `IFilteringExpression | IExpressionTree[]` +- **operator**: `FilteringLogic` +- **returnFields?**: `string[]` + +### [IFieldEditorOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFieldEditorOptions) + +- **dateTimeFormat?**: `string` — A custom input format string used for the built-in editors of date/time columns. +See the Editing section under https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types#datetime-date-and-time + +### [IFieldPipeArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IFieldValidationState) +Interface representing the validation state of a field in the grid. +-field: The name of the field (property) being validated. + +- **field**: `string` + +### [IFilteringEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringEventArgs) +Represents event arguments related to filtering operations +The event is cancelable + +- **filteringExpressions**: `IFilteringExpressionsTree` — Represents the filtering expressions applied to the grid. +The expression contains information like filtering operands and operator, an expression or condition, etc. + +### [IFilteringExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringExpression) +Represents filtering expressions. + +- **condition?**: `IFilteringOperation` +- **conditionName?**: `string` +- **fieldName**: `string` +- **ignoreCase?**: `boolean` +- **searchTree?**: `IExpressionTree` +- **searchVal?**: `any` + +### [IFilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringExpressionsTree) + +- **filteringOperands**: `IFilteringExpression | IFilteringExpressionsTree[]` +- **find?**: `any` +- **findIndex?**: `any` +- **type?**: `FilteringExpressionsTreeType` + +### [IFilteringOperation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringOperation) +Interface describing filtering operations + +- **hidden?**: `boolean` +- **iconName**: `string` +- **isNestedQuery?**: `boolean` +- **isUnary**: `boolean` +- **logic?**: `any` +- **name**: `string` + +### [IFilteringState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringState) + +- **advancedExpressionsTree?**: `IFilteringExpressionsTree` +- **expressionsTree**: `IFilteringExpressionsTree` +- **strategy?**: `IFilteringStrategy` + +### [IFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFilteringStrategy) + +- **filter**: `any` +- **getFilterItems**: `any` + +### [IFormattedParts](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFormattedParts) + +- **combined**: `string` +- **literal?**: `string` +- **value**: `string` + +### [IFormattingOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFormattingOptions) + +- **day?**: `"numeric" | "2-digit"` +- **month?**: `"short" | "long" | "narrow" | "numeric" | "2-digit"` +- **weekday?**: `"short" | "long" | "narrow"` +- **year?**: `"numeric" | "2-digit"` + +### [IFormattingViews](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IFormattingViews) + +- **day?**: `boolean` +- **month?**: `boolean` +- **year?**: `boolean` + +### [IForOfDataChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IForOfDataChangeEventArgs) + + +### [IForOfDataChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IForOfDataChangingEventArgs) + +- **containerSize**: `number` +- **state**: `IForOfState` + +### [IForOfState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IForOfState) + +- **chunkSize?**: `number` +- **startIndex?**: `number` + +### [IgcCalendarBaseEventMap](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgcCalendarBaseEventMap) + +- **igcChange**: `CustomEvent` + +### [IGridCellEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridCellEventArgs) +Represents an event argument related to grid cell interactions. + +- **cell**: `CellType` — Represents the grid cell that triggered the event. +- **event**: `Event` — Represents the original event that occurred +Examples of such events include: selecting, clicking, double clicking, etc. + +### [IGridClipboardEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridClipboardEvent) +The event arguments when data from a grid is being copied. + +- **cancel**: `boolean` — cancel returns whether an external event has intercepted the copying +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **data**: `any[]` — data can be of any type and refers to the data that is being copied/stored to the clipboard + +### [IGridContextMenuEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridContextMenuEventArgs) +Represents an event argument for the grid contextMenu output + + +### [IGridCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridCreatedEventArgs) + +- **grid**: `IgxHierarchicalGridComponent` +- **owner**: `IgxRowIslandComponent` — Provides reference to the owner component. +- **parentID**: `any` +- **parentRowData?**: `any` + +### [IGridDataBindable](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridDataBindable) +Stub type for GridType - minimal interface for typing in core + +- **data**: `any[]` +- **filteredData**: `any` + +### [IGridEditDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridEditDoneEventArgs) +Represents event arguments related to grid editing completion. + +- **cellID?**: `any` +- **column?**: `ColumnType` — Optional +Represents the column information of the edited cell +- **event?**: `Event` — Optional +Represents the original event, that has triggered the edit +- **isAddRow?**: `boolean` — Optional +Indicates if the editing consists of adding a new row +- **newValue?**: `any` — Optional +Represents the value, that is being entered in the edited cell +When there is no newValue and the event has ended, the value of the cell returns to the oldValue +- **oldValue**: `any` — Represents the previous (before editing) value of the edited cell. +It's used when the event has been stopped/exited. +- **owner?**: `GridType` — Optional +Represents the grid instance that owns the edit event. +- **primaryKey**: `any` +- **rowData**: `any` — rowData represents the updated/committed data of the row after the edit (newValue) +The only case rowData (of the current object) is used directly, is when there is no rowEditing or transactions enabled +- **rowID**: `any` +- **rowKey**: `any` +- **valid?**: `boolean` — Optional +Indicates if the new value would be valid. +It can be set to return the result of the methods for validation of the grid + +### [IGridEditEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridEditEventArgs) +Represents event arguments related to grid editing. +The event is cancelable +It contains information about the row and the column, as well as the old and nwe value of the element/cell + + +### [IGridFormGroupCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridFormGroupCreatedEventArgs) +Interface representing the event arguments when a form group is created in the grid. +- formGroup: The form group that is created. +- owner: The grid instance that owns the form group. + +- **formGroup**: `FormGroup` +- **owner**: `GridType` + +### [IGridGroupingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridGroupingStrategy) +Represents a grouping strategy for the grid data, extending the Sorting Strategy interface (contains a sorting method). + +- **groupBy**: `any` + +### [IGridKeydownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridKeydownEventArgs) +Represents an event, emitted when keydown is triggered over element inside grid's body +This event is fired only if the key combination is supported in the grid. + +- **cancel**: `boolean` — The event is cancelable +cancel returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **event**: `Event` — Represents the original event, that occurred. +- **target**: `any` — Represents the information and details of the object itself +- **targetType**: `GridKeydownTargetType` — The targetType represents the type of the targeted object. For example a cell or a row + +### [IGridMergeStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridMergeStrategy) +Merge strategy interface. + +- **comparer**: `any` — Function that compares values for merging. Returns true if same, false if different. +- **merge**: `any` — Function that processes merging of the whole data per merged field. +Returns collection where object has reference to the original record and map of the cell merge metadata per field. + +### [IGridRowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridRowEventArgs) +Represents an event argument related to grid row interactions. + +- **event**: `Event` — Represents the original event that occurred +Examples of such events include: selecting, clicking, double clicking, etc. +- **row**: `RowType` — Represents the grid row that triggered the event. + +### [IGridScrollEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IGridSortingStrategy) +Represents a sorting strategy for the grid data +Contains a single method sort that sorts the provided data based on the given sorting expressions + +- **sort**: `any` + +### [IGridState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridState) + +- **advancedFiltering?**: `IFilteringExpressionsTree` +- **cellSelection?**: `GridSelectionRange[]` +- **columns?**: `IColumnState[]` +- **columnSelection?**: `string[]` +- **expansion?**: `any[]` +- **filtering?**: `IFilteringExpressionsTree` +- **groupBy?**: `IGroupingState` +- **id?**: `string` +- **moving?**: `boolean` +- **paging?**: `IPagingState` +- **pinningConfig?**: `IPinningConfig` +- **pivotConfiguration?**: `IPivotConfiguration` +- **rowIslands?**: `IGridStateCollection[]` +- **rowPinning?**: `any[]` +- **rowSelection?**: `any[]` +- **sorting?**: `ISortingExpression[]` + +### [IGridStateCollection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridStateCollection) + +- **id**: `string` +- **parentRowID**: `any` +- **state**: `IGridState` + +### [IGridStateOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridStateOptions) + +- **advancedFiltering?**: `boolean` +- **cellSelection?**: `boolean` +- **columns?**: `boolean` +- **columnSelection?**: `boolean` +- **expansion?**: `boolean` +- **filtering?**: `boolean` +- **groupBy?**: `boolean` +- **moving?**: `boolean` +- **paging?**: `boolean` +- **pinningConfig?**: `boolean` +- **pivotConfiguration?**: `boolean` +- **rowIslands?**: `boolean` +- **rowPinning?**: `boolean` +- **rowSelection?**: `boolean` +- **sorting?**: `boolean` + +### [IGridToolbarExportEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridToolbarExportEventArgs) +Represents the arguments for the grid toolbar export event. +It provides information about the grid instance, exporter service, export options, +and allows the event to be canceled. + +- **cancel**: `boolean` — cancel returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **exporter**: `IgxBaseExporter` — The exporter is a base service. +The type (an abstract class base exporter) has it's own properties and methods +It is used to define the format and options of the export, the exported element +and methods for preparing the data from the elements for exporting +- **grid**: `GridType` — grid represents a reference to the instance of the grid te event originated from +- **options**: `IgxExporterOptionsBase` — Represents the different settings, that can be given to an export +The type (an abstract class exporter options base) has properties for column settings +(whether they should be ignored) as well as method for generating a file name + +### [IGridValidationState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridValidationState) +Interface representing the validation state of a grid. +- status: The validation status ('VALID' or 'INVALID'). +- errors: The validation errors if any. + +- **errors?**: `ValidationErrors` +- **status**: `ValidationStatus` + +### [IGridValidationStatusEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGridValidationStatusEventArgs) +Interface representing the event arguments for the grid validation status change event. +- status: The validation status ('VALID' or 'INVALID'). +- owner: The grid instance that owns the validation state. + +- **owner**: `GridType` +- **status**: `ValidationStatus` + +### [IGroupByExpandState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupByExpandState) + +- **expanded**: `boolean` +- **hierarchy**: `IGroupByKey[]` + +### [IGroupByKey](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupByKey) + +- **fieldName**: `string` +- **value**: `any` + +### [IGroupByRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupByRecord) + +- **column?**: `ColumnType` +- **expression**: `ISortingExpression` +- **groupParent**: `IGroupByRecord` +- **groups?**: `IGroupByRecord[]` +- **height**: `number` +- **level**: `number` +- **records**: `GroupedRecords` +- **value**: `any` + +### [IGroupByResult](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupByResult) + +- **data**: `any[]` +- **metadata**: `IGroupByRecord[]` + +### [IGroupingDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupingDoneEventArgs) + +- **expressions**: `ISortingExpression | ISortingExpression[]` +- **groupedColumns**: `IgxColumnComponent | IgxColumnComponent[]` +- **ungroupedColumns**: `IgxColumnComponent | IgxColumnComponent[]` + +### [IGroupingExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupingExpression) + +- **groupingComparer?**: `any` + +### [IGroupingState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IGroupingState) + +- **defaultExpanded**: `boolean` +- **expansion**: `IGroupByExpandState[]` +- **expressions**: `IGroupingExpression[]` + +### [IgxAddRowParent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxAddRowParent) + +- **asChild**: `boolean` +- **index**: `number` +- **isPinned**: `boolean` +- **rowID**: `string` +- **rowKey**: `any` + +### [IgxCellTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxCellTemplateContext) + +- **$implicit**: `any` +- **additionalTemplateContext**: `any` +- **cell**: `CellType` +- **defaultErrorTemplate?**: `TemplateRef` +- **formControl?**: `FormControl` + +### [IgxColumnTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxColumnTemplateContext) + +- **$implicit**: `ColumnType` +- **column**: `ColumnType` + +### [IgxDateTimeEditorEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxDateTimeEditorEventArgs) + +- **newValue?**: `Date` +- **oldValue?**: `Date` +- **userInput**: `string` + +### [IgxDragCustomEventDetails](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxDragCustomEventDetails) + +- **originalEvent**: `any` +- **owner**: `IgxDragDirective` +- **pageX**: `number` +- **pageY**: `number` +- **startX**: `number` +- **startY**: `number` + +### [IgxExpansionPanelBase](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxExpansionPanelBase) + +- **animationSettings**: `any` +- **collapsed**: `boolean` +- **contentCollapsed**: `EventEmitter` +- **contentCollapsing**: `EventEmitter` +- **contentExpanded**: `EventEmitter` +- **contentExpanding**: `EventEmitter` +- **cssClass**: `string` +- **id**: `string` +- **collapse**: `any` +- **expand**: `any` +- **toggle**: `any` + +### [IgxExporterEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxExporterEvent) + +- **cancel**: `boolean` +- **exporter**: `IgxBaseExporter` +- **grid**: `GridType` +- **options**: `IgxExporterOptions` + +### [IgxFilterItem](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxFilterItem) + +- **children?**: `IgxFilterItem[]` +- **label?**: `string` +- **value**: `any` + +### [IgxGridEmptyTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridEmptyTemplateContext) + +- **$implicit**: `undefined` + +### [IgxGridHeaderTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridHeaderTemplateContext) + +- **$implicit**: `HeaderType` + +### [IgxGridMasterDetailContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridMasterDetailContext) + +- **$implicit**: `any` +- **index**: `number` + +### [IgxGridPaginatorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridPaginatorTemplateContext) + +- **$implicit**: `GridType` + +### [IgxGridRowDragGhostContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridRowDragGhostContext) + +- **$implicit**: `any` +- **data**: `any` +- **grid**: `GridType` + +### [IgxGridRowEditActionsTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridRowEditActionsTemplateContext) + +- **$implicit**: `any` + +### [IgxGridRowEditTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridRowEditTemplateContext) + +- **$implicit**: `undefined` +- **endEdit**: `any` +- **rowChangesCount**: `number` + +### [IgxGridRowEditTextTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridRowEditTextTemplateContext) + +- **$implicit**: `number` + +### [IgxGridRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridRowTemplateContext) + +- **$implicit**: `RowType` + +### [IgxGridTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridTemplateContext) + +- **$implicit**: `GridType` + +### [IgxGridToolbarTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGridToolbarTemplateContext) + +- **$implicit**: `GridType` + +### [IgxGroupByRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGroupByRowSelectorTemplateContext) + +- **$implicit**: `IgxGroupByRowSelectorTemplateDetails` + +### [IgxGroupByRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGroupByRowSelectorTemplateDetails) + +- **groupRow**: `IGroupByRecord` +- **selectedCount**: `number` +- **totalCount**: `number` + +### [IgxGroupByRowTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxGroupByRowTemplateContext) + +- **$implicit**: `IGroupByRecord` + +### [IgxHeadSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxHeadSelectorTemplateContext) + +- **$implicit**: `IgxHeadSelectorTemplateDetails` + +### [IgxHeadSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxHeadSelectorTemplateDetails) + +- **deselectAll?**: `any` +- **selectAll?**: `any` +- **selectedCount**: `number` +- **totalCount**: `number` + +### [IgxIconLoadedEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxIconLoadedEvent) +Event emitted when a SVG icon is loaded through +a HTTP request. + +- **family**: `string` — The font-family for the icon. Defaults to material. +- **name**: `string` — Name of the icon +- **value?**: `string` — The actual SVG text, if any + +### [IgxPivotGridValueTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxPivotGridValueTemplateContext) + +- **$implicit**: `IPivotValue` + +### [IgxRowSelectorTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxRowSelectorTemplateContext) + +- **$implicit**: `IgxRowSelectorTemplateDetails` + +### [IgxRowSelectorTemplateDetails](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxRowSelectorTemplateDetails) + +- **deselect?**: `any` +- **index**: `number` +- **key**: `any` +- **rowID**: `any` +- **select?**: `any` +- **selected**: `boolean` + +### [IgxSummaryResult](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IgxSummaryTemplateContext) + +- **$implicit**: `IgxSummaryResult[]` + +### [IgxTimePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxTimePickerValidationFailedEventArgs) + +- **currentValue**: `string | Date` +- **previousValue**: `string | Date` + +### [IgxTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxTree) + +- **activeNodeChanged**: `EventEmitter>` +- **animationSettings**: `ToggleAnimationSettings` +- **expandIndicator**: `TemplateRef` +- **nodeCollapsed**: `EventEmitter` +- **nodeCollapsing**: `EventEmitter` +- **nodeExpanded**: `EventEmitter` +- **nodeExpanding**: `EventEmitter` +- **nodeSelection**: `EventEmitter` +- **selection**: `IgxTreeSelectionType` +- **singleBranchExpand**: `boolean` +- **toggleNodeOnClick**: `boolean` +- **collapseAll**: `any` +- **deselectAll**: `any` +- **expandAll**: `any` +- **findNodes**: `any` + +### [IgxTreeGridAPIService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxTreeGridAPIService) +Stub type for tree grid api - minimal interface for typing in core + +- **get_row_id**: `any` + +### [IgxTreeNode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IgxTreeNode) + +- **active**: `boolean` +- **data**: `T` +- **disabled**: `boolean` +- **expanded**: `boolean` +- **expandedChange**: `EventEmitter` +- **level**: `number` +- **loading**: `boolean` +- **parentNode?**: `IgxTreeNode` +- **path**: `IgxTreeNode[]` +- **selected**: `boolean` +- **selectedChange**: `EventEmitter` +- **collapse**: `any` +- **expand**: `any` +- **toggle**: `any` + +### [IInputResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IInputResourceStrings) + +- **igx_input_file_placeholder?**: `string` +- **igx_input_upload_button?**: `string` + +### [IListItemClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IListItemClickEventArgs) +Interface for the listItemClick igxList event arguments + +- **direction**: `IgxListPanState` +- **event**: `Event` +- **item**: `IgxListItemComponent` + +### [IListItemPanningEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IListItemPanningEventArgs) +Interface for the listItemPanning igxList event arguments + +- **direction**: `IgxListPanState` +- **item**: `IgxListItemComponent` +- **keepItem**: `boolean` + +### [IMaskEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IMaskEventArgs) +The IgxMaskModule provides the IgxMaskDirective inside your application. + +- **formattedValue**: `string` +- **rawValue**: `string` + +### [IMergeByResult](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IMergeByResult) + +- **childRecords?**: `any[]` +- **root?**: `any` +- **rowSpan**: `number` + +### [IMultiRowLayoutNode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IMultiRowLayoutNode) + +- **colEnd**: `number` +- **colStart**: `number` +- **columnVisibleIndex**: `number` +- **rowEnd**: `number` +- **rowStart**: `number` + +### [IPageCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPageCancellableEventArgs) + +- **current**: `number` +- **next**: `number` + +### [IPageEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPageEventArgs) + +- **current**: `number` +- **previous**: `number` + +### [IPagingState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPagingState) + +- **index**: `number` +- **metadata?**: `any` +- **recordsPerPage**: `number` + +### [IPanStateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPanStateChangeEventArgs) +Interface for the panStateChange igxList event arguments + +- **item**: `IgxListItemComponent` +- **newState**: `IgxListPanState` +- **oldState**: `IgxListPanState` + +### [IPathSegment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPathSegment) +Interface representing a segment of a path in a hierarchical grid. + +- **rowID**: `any` — The unique identifier of the row within the segment. +- **rowIslandKey**: `string` — The key representing the row's 'hierarchical level. +- **rowKey**: `any` + +### [IPdfExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPdfExportEndedEventArgs) + +- **pdf?**: `jsPDF` + +### [IPinColumnCancellableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPinColumnCancellableEventArgs) +The event arguments before a column's pin state is changed. +insertAtIndexspecifies at which index in the pinned/unpinned area the column is inserted. +Can be changed in the columnPin event. +isPinned returns the actual pin state of the column. When pinning/unpinning is successful, +the value of isPinned will change accordingly when read in the "-ing" and "-ed" event. + + +### [IPinColumnEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPinColumnEventArgs) +The event arguments after a column's pin state is changed. +insertAtIndexspecifies at which index in the pinned/unpinned area the column was inserted. +isPinned returns the actual pin state of the column after the operation completed. + +- **column**: `ColumnType` +- **insertAtIndex**: `number` — If pinned, specifies at which index in the pinned area the column is inserted. +If unpinned, specifies at which index in the unpinned area the column is inserted. +- **isPinned**: `boolean` — Returns the actual pin state of the column. +If pinning/unpinning is successful, value of isPinned will change accordingly when read in the "-ing" and "-ed" event. + +### [IPinningConfig](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPinningConfig) +An interface describing settings for row/column pinning position. + +- **columns?**: `ColumnPinningPosition` +- **rows?**: `RowPinningPosition` + +### [IPinRowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPinRowEventArgs) +Event emitted when a row's pin state changes. +The event is cancelable + +- **insertAtIndex?**: `number` — The index at which to pin the row in the pinned rows collection. +- **isPinned**: `boolean` — Whether or not the row is pinned or unpinned. +- **row?**: `RowType` +- **rowID**: `any` — The ID of the row, that was pinned/unpinned. +ID is either the primaryKey value or the data record instance. +- **rowKey**: `any` + +### [IPivotAggregator](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotAggregator) +Interface describing a IPivotAggregator class. +Used for specifying custom aggregator lists. + +- **aggregator?**: `PivotAggregation` — Aggregator function can be a custom implementation of PivotAggregation, or +use predefined ones from pivot aggregate and its variants. +- **aggregatorName?**: `PivotAggregationType` — Aggregation name that will be used from a list of predefined aggregations. +If not set will use the specified aggregator function. +- **key**: `string` — Aggregation unique key. +- **label**: `string` — Aggregation label to show in the UI. + +### [IPivotConfiguration](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotConfiguration) +Configuration of the pivot grid. + +- **columns**: `IPivotDimension[]` — A list of the columns. +- **columnStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the columns. +- **filters?**: `IPivotDimension[]` — Dimensions to be displayed in the filter area. +- **pivotKeys?**: `IPivotKeys` — Pivot data keys used for data generation. Can be used for custom remote scenarios where the data is pre-populated. +- **rows**: `IPivotDimension[]` — A list of the rows. +- **rowStrategy?**: `IPivotDimensionStrategy` — A strategy to transform the rows. +- **values**: `IPivotValue[]` — A list of the values. + +### [IPivotConfigurationChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotConfigurationChangedEventArgs) +Event emitted when pivot configuration is changed. + +- **pivotConfiguration**: `IPivotConfiguration` — The new configuration. + +### [IPivotDateDimensionOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IPivotDimension) +Configuration of a pivot dimension. + +- **childLevel?**: `IPivotDimension` — Allows defining a hierarchy when multiple sub groups need to be extracted from single member. +- **dataType?**: `GridColumnDataType` — The dataType of the related data field. +- **displayName?**: `string` — Display name to show instead of the field name of this value. * +- **enabled**: `boolean` — Enables/Disables a particular dimension from pivot structure. +- **filter?**: `IFilteringExpressionsTree` — A predefined or defined via the igxPivotSelector filter expression tree for the current dimension to be applied in the filter pipe. +- **horizontalSummary?**: `boolean` +- **level?**: `number` — Level of the dimension. +- **memberFunction?**: `any` — Function that extracts the value +- **memberName**: `string` — Unique member to extract related data field value or the result of the memberFunction. +- **sortable?**: `boolean` — Enable/disable sorting for a particular dimension. True by default. +- **sortDirection?**: `SortingDirection` — The sorting direction of the current dimension. Determines the order in which the values will appear in the related dimension. +- **width?**: `string` — The width of the dimension cells to be rendered.Can be pixel, % or "auto". + +### [IPivotDimensionData](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/interfaces/IPivotGridColumn) +Interface describing the Pivot column data. + Contains information on the related column dimensions and their values. + +- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the column.* +- **dimensionValues**: `Map` — Gets/Sets the group value associated with the related column dimension by its memberName. * +- **field**: `string` +- **value**: `IPivotValue` + +### [IPivotGridGroupRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotGridGroupRecord) + +- **height?**: `number` +- **rowSpan?**: `number` + +### [IPivotGridHorizontalGroup](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotGridHorizontalGroup) + +- **colSpan?**: `number` +- **colStart?**: `number` +- **dimensions?**: `IPivotDimension[]` +- **records?**: `IPivotGridRecord[]` +- **rootDimension?**: `IPivotDimension` +- **rowSpan?**: `number` +- **rowStart?**: `number` +- **value?**: `string` + +### [IPivotGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotGridRecord) + +- **aggregationValues**: `Map` — Gets/Sets the aggregation value associated with the value path. Value path depends on configured column dimension hierarchy and values.* +- **children?**: `Map` — List of children records in case any row dimension member contain a hierarchy. Each dimension member contains its own hierarchy, which you can get by its memberName. * +- **dataIndex?**: `number` — The index of the record in the total view +- **dimensions**: `IPivotDimension[]` — List of dimensions associated with the record.* +- **dimensionValues**: `Map` — Gets/Sets the group value associated with the related row dimension by its memberName. * +- **level?**: `number` — Record level* +- **records?**: `any[]` — List of original data records associated with the current pivoted data. * +- **totalRecordDimensionName?**: `string` — If set, it specifies the name of the dimension, that has total record enabled. + +### [IPivotKeys](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotKeys) +Interface describing the Pivot data keys used for data generation. + Can be used for custom remote scenarios where the data is pre-populated. + +- **aggregations**: `string` — Field that stores aggregation values. +- **children**: `string` — Field that stores children for hierarchy building. +- **columnDimensionSeparator**: `string` — Separator used when generating the unique column field values. +- **level**: `string` — Field that stores dimension level based on its hierarchy. +- **records**: `string` — Field that stores reference to the original data records. +- **rowDimensionSeparator**: `string` — Separator used when generating the unique row field values. + +### [IPivotUISettings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotUISettings) + +- **horizontalSummariesPosition?**: `PivotSummaryPosition` +- **rowLayout?**: `PivotRowLayoutType` +- **showConfiguration?**: `boolean` +- **showRowHeaders?**: `boolean` + +### [IPivotValue](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IPivotValue) +Configuration of a pivot value aggregation. + +- **aggregate**: `IPivotAggregator` — Active aggregator definition with key, label and aggregator. +- **aggregateList?**: `IPivotAggregator[]` — List of aggregates to show in aggregate drop-down. +- **dataType?**: `GridColumnDataType` — Enables a data type specific template of the cells +- **displayName?**: `string` — Display name to show instead of member for the column header of this value. * +- **enabled**: `boolean` — Enables/Disables a particular value from pivot aggregation. +- **formatter?**: `any` — Applies display format to cell values. +- **member**: `string` — Unique member to extract related data field value for aggregations. +- **styles?**: `any` — Allow conditionally styling of the pivot grid cells. + +### [IPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 overlay. + +- **settings**: `PositionSettings` — PositionSettings to use when position the component in the overlay +- **clone**: `any` +- **position**: `any` + +### [IRangeSliderValue](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRangeSliderValue) + +- **lower**: `number` +- **upper**: `number` + +### [IRecordValidationState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRecordValidationState) +Interface representing the validation state of a record in the grid. +- key: The unique identifier of the record. +- fields: An array of the validation state of individual fields in the record. + +- **fields**: `IFieldValidationState[]` +- **key**: `any` + +### [IResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IResourceStrings) + + +### [IRowDataCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRowDataCancelableEventArgs) +Represents event arguments related to events, that can occur for rows in a grid +Example for events: adding, deleting, selection, transaction, etc. + +- **cellID?**: `any` +- **isAddRow?**: `boolean` +- **newValue?**: `any` +- **oldValue**: `any` +- **owner**: `GridType` — Represents the grid instance that owns the edit event. + +### [IRowDataEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRowDataEventArgs) +Represents event arguments related to events, that can occur for rows in a grid +Example for events: adding, deleting, selection, transaction, etc. + +- **data**: `any` +- **owner**: `GridType` — Represents the grid instance that owns the edit event. +- **primaryKey**: `any` — Represents the unique key, the row can be associated with. +Available if primaryKey exists +- **rowData**: `any` +- **rowKey**: `any` + +### [IRowDragEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRowDragEndEventArgs) +Emitted when a dragging operation is finished (when the row is dropped) + +- **animation**: `boolean` — animation returns whether the event is animated +- **dragData**: `RowType` — Represents the information of the row that is being dragged. +- **dragDirective**: `any` — Represents the drag directive or information associated with the drag operation +- **dragElement**: `HTMLElement` — Represents the HTML element itself + +### [IRowDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRowDragStartEventArgs) +Emitted when a dragging operation is starting (when the row is "picked") +The event is cancelable + +- **dragData**: `RowType` — Represents the information of the row that is being dragged. +- **dragDirective**: `any` — Represents the drag directive or information associated with the drag operation +- **dragElement**: `HTMLElement` — Represents the HTML element itself + +### [IRowExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IRowSelectionEventArgs) +The event arguments when the selection state of a row is being changed +The event is cancelable + +- **added**: `any[]` — Represents an array of all added rows +Whenever a row has been selected, the array is "refreshed" with the selected rows +- **allRowsSelected?**: `boolean` — Indicates whether or not all rows of the grid have been selected +- **event?**: `Event` — Represents the original event, that has triggered the selection change +selecting, deselecting +- **newSelection**: `any[]` — Represents the newly selected rows +- **oldSelection**: `any[]` — Represents an array of rows, that have already been selected +- **removed**: `any[]` — Represents an array of all rows, removed from the selection +Whenever a row has been deselected, the array is "refreshed" with the rows, +that have been previously selected, but are no longer + +### [IRowToggleEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IRowToggleEventArgs) +Represents event arguments related to the row's expansion state being changed in a grid + +- **cancel**: `boolean` — The event is cancelable +cancel returns whether the event has been intercepted and stopped +If the value becomes "true", it returns/exits from the method, instantiating the interface +- **event?**: `Event` — Optional +Represents the original event, that has triggered the expansion/collapse +- **expanded**: `boolean` — Returns the state of the row after the operation has ended +Indicating whether the row is being expanded (true) or collapsed (false) +- **rowID**: `any` — Represents the ID of the row that emitted the event (which state is changed) +- **rowKey**: `any` + +### [IScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 overlay. + +- **attach**: `any` +- **detach**: `any` +- **initialize**: `any` + +### [ISearchInfo](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISearchInfo) + +- **activeMatchIndex**: `number` +- **matchInfoCache**: `any[]` + +### [ISelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISelectionEventArgs) +Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection. + +- **newSelection**: `IgxDropDownItemBaseDirective` +- **oldSelection**: `IgxDropDownItemBaseDirective` + +### [ISelectionKeyboardState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISelectionKeyboardState) +Represents the state of the keyboard when selecting. + +- **active**: `boolean` — Indicates whether the selection is currently active (being performed). False when resetting the selection. +- **node**: `ISelectionNode` — The selected node in the grid, if any. Can be null if no node is selected. +- **range**: `GridSelectionRange` — The range of the selected cells in the grid. Can be null when resetting the selection. +- **shift**: `boolean` — Indicates whether the Shift key is currently pressed during the selection. + +### [ISelectionNode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISelectionNode) +Represents a single selected cell or node in a grid. + +- **column**: `number` — The index of the selected column. +- **isSummaryRow?**: `boolean` — (Optional) +Indicates if the selected node is a summary row. +This property is true if the selected row is a summary row; otherwise, it is false. +- **layout?**: `IMultiRowLayoutNode` — (Optional) +Additional layout information for multi-row selection nodes. +- **row**: `number` — The index of the selected row. + +### [ISelectionPointerState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISelectionPointerState) +Represents the state of the grid selection using pointer interactions (mouse). +Extends ISelectionKeyboardState to include pointer-specific properties. + +- **ctrl**: `boolean` — Indicates whether the Ctrl key is currently pressed during the selection. +- **primaryButton**: `boolean` — Indicates whether the primary pointer button is pressed during the selection (clicked). + +### [ISimpleComboSelectionChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISimpleComboSelectionChangedEventArgs) +Emitted when the Combo's selection has changed. + +- **displayText**: `string` — The display text of the combo text box +- **newSelection**: `any` — The new selection item +- **newValue**: `any` — The new selection value +- **oldSelection**: `any` — The old selection item +- **oldValue**: `any` — The old selection value + +### [ISimpleComboSelectionChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISimpleComboSelectionChangingEventArgs) +Emitted when the Combo's selection is changing. + + +### [ISizeInfo](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISizeInfo) + +- **padding**: `number` +- **width**: `number` + +### [ISlideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISlideEventArgs) + +- **carousel**: `IgxCarouselComponent` +- **slide**: `IgxSlideComponent` + +### [ISliderValueChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISliderValueChangeEventArgs) + +- **oldValue**: `number | IRangeSliderValue` +- **value**: `number | IRangeSliderValue` + +### [ISortingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISortingEventArgs) +Represents event arguments related to sorting and grouping operations +The event is cancelable + +- **groupingExpressions?**: `IGroupingExpression | IGroupingExpression[]` — Optional +Represents the grouping expressions applied to the grid. +It can be a single grouping expression or an array of them +The expression contains information like the sorting expression and criteria by which the elements will be grouped +- **sortingExpressions?**: `ISortingExpression | ISortingExpression[]` — Optional +Represents the sorting expressions applied to the grid. +It can be a single sorting expression or an array of them +The expression contains information like file name, whether the letter case should be taken into account, etc. + +### [ISortingExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISortingExpression) + +- **dir**: `SortingDirection` +- **fieldName**: `KeyOfOrString & string` +- **ignoreCase?**: `boolean` +- **strategy?**: `ISortingStrategy` + +### [ISortingOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISortingOptions) + +- **mode**: `"single" | "multiple"` + +### [ISortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISortingStrategy) + +- **sort**: `any` + +### [ISplitterBarResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISplitterBarResizeEventArgs) + +- **pane**: `IgxSplitterPaneComponent` +- **sibling**: `IgxSplitterPaneComponent` + +### [IStepChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IStepChangedEventArgs) + +- **index**: `number` +- **owner**: `IgxStepper` — Provides reference to the owner component. + +### [IStepChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IStepChangingEventArgs) + +- **newIndex**: `number` +- **oldIndex**: `number` +- **owner**: `IgxStepper` — Provides reference to the owner component. + +### [ISummaryExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISummaryExpression) + +- **customSummary?**: `any` +- **fieldName**: `string` + +### [ISummaryRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ISummaryRecord) + +- **cellIndentation?**: `number` +- **max?**: `number` +- **summaries**: `Map` + +### [ITabsBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITabsBaseEventArgs) + +- **owner**: `IgxTabsDirective` — Provides reference to the owner component. + +### [ITabsSelectedIndexChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITabsSelectedIndexChangingEventArgs) + +- **cancel**: `boolean` +- **newIndex**: `number` +- **oldIndex**: `number` + +### [ITabsSelectedItemChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITabsSelectedItemChangeEventArgs) + +- **newItem**: `IgxTabItemDirective` +- **oldItem**: `IgxTabItemDirective` + +### [IToggleView](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/ITooltipHideEventArgs) + +- **cancel**: `boolean` +- **target**: `IgxTooltipTargetDirective` +- **tooltip**: `IgxTooltipDirective` + +### [ITooltipShowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITooltipShowEventArgs) + +- **cancel**: `boolean` +- **target**: `IgxTooltipTargetDirective` +- **tooltip**: `IgxTooltipDirective` + +### [ITreeGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/ITreeNodeEditedEvent) + +- **node**: `IgxTreeNode` +- **value**: `any` + +### [ITreeNodeEditingEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITreeNodeEditingEvent) + +- **node**: `IgxTreeNode` +- **value**: `string` + +### [ITreeNodeSelectionEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITreeNodeSelectionEvent) + +- **added**: `IgxTreeNode[]` +- **event?**: `Event` — Browser event +- **newSelection**: `IgxTreeNode[]` +- **oldSelection**: `IgxTreeNode[]` +- **removed**: `IgxTreeNode[]` + +### [ITreeNodeToggledEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITreeNodeToggledEventArgs) + +- **node**: `IgxTreeNode` + +### [ITreeNodeTogglingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ITreeNodeTogglingEventArgs) + +- **node**: `IgxTreeNode` + +### [IValuesChange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/interfaces/IViewChangeEventArgs) + +- **context**: `any` +- **owner**: `IgxTemplateOutletDirective` — Provides reference to the owner component. +- **view**: `EmbeddedViewRef` + +### [IViewDateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/IViewDateChangeEventArgs) + +- **currentValue**: `Date` +- **previousValue**: `Date` + +### [OverlayAnimationEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/OverlayAnimationEventArgs) + +- **animationPlayer**: `AnimationPlayer` — Animation player that will play the animation +- **animationType**: `"close" | "open"` — Type of animation to be played. It should be either 'open' or 'close' +- **id**: `string` — Id of the overlay generated with attach() method + +### [OverlayCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/OverlayCancelableEventArgs) + + +### [OverlayClosingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/OverlayClosingEventArgs) + + +### [OverlayCreateSettings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/OverlayCreateSettings) + +- **injector?**: `Injector` — An Injector instance to add in the created component ref's injectors tree. + +### [OverlayEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/OverlayEventArgs) + +- **componentRef?**: `ComponentRef` — Available when Type is provided to the attach() method and allows access to the created Component instance +- **elementRef?**: `ElementRef` — 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/22.0.0/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?**: `IgxOverlayOutletDirective | ElementRef` — 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 + +### [PdfUnicodeFont](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/PdfUnicodeFont) +Font configuration interface for PDF export with Unicode character support. + +This interface defines the structure for providing custom TrueType fonts (TTF) +to the PDF exporter. Custom fonts are required when exporting data that contains +non-Latin characters, as the default Helvetica font only supports basic Latin characters. + +- **bold?**: `any` — Optional bold variant of the font for styling headers and emphasized text. + +If provided, this font will be used for table headers and any other text +that should appear in bold. If not provided, the normal font specified +by data and name will be used for all text, including headers. +- **data**: `string` — Base64-encoded font data from a TrueType Font (TTF) file. + +This should be the complete TTF file contents encoded as a Base64 string. +The font must include glyphs for all characters that may appear in your grid data. +- **name**: `string` — The font family name to register with the PDF library. + +This name is used internally by jsPDF to reference the font. It should be +a simple identifier without spaces (e.g., 'NotoSans', 'ArialUnicode'). + +### [PivotGridType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/PivotGridType) +An interface describing a Pivot Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from GridType + +- **allDimensions**: `IPivotDimension[]` — An array of all dimensions (rows and columns) in the pivot grid. +it includes hierarchical level, filters and sorting, dimensional level, etc. +- **dimensionsChange**: `EventEmitter` — Emits an event when the dimensions in the pivot grid change. +- **dimensionsSortingExpressionsChange**: `EventEmitter[]>` — Emits an event when the a dimension is sorted. +- **excelStyleFilterMaxHeight**: `string` +- **excelStyleFilterMinHeight**: `string` +- **hasMultipleValues**: `boolean` +- **pivotConfiguration**: `IPivotConfiguration` — The configuration settings for the pivot grid. +it includes dimension strategy for rows and columns, filters and data keys +- **pivotRowWidths**: `number` +- **pivotUI**: `IPivotUISettings` — Specifies whether to show the pivot configuration UI in the grid. +- **rowDimensionHeaderTemplate**: `TemplateRef` +- **rowDimensionResizing**: `boolean` +- **valueChipTemplate**: `TemplateRef` +- **valuesChange**: `EventEmitter` — Emits an event when the values in the pivot grid change. +- **getDimensionsByType**: `any` +- **getRowDimensionByName**: `any` +- **moveDimension**: `any` +- **moveValue**: `any` +- **resolveDataTypes**: `any` +- **rowDimensionWidth**: `any` +- **rowDimensionWidthToPixels**: `any` +- **setupColumns**: `any` +- **sortDimension**: `any` +- **toggleDimension**: `any` +- **toggleRow**: `any` +- **toggleValue**: `any` + +### [PivotRowHeaderGroupType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/PivotRowHeaderGroupType) + +- **grid**: `any` +- **header**: `any` +- **headerID**: `string` +- **parent**: `any` +- **rowIndex**: `number` + +### [PositionSettings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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 +- **offset?**: `number` — The offset of the element from the target in pixels +- **openAnimation?**: `AnimationReferenceMetadata` — Animation applied while overlay opens +- **verticalDirection?**: `VerticalAlignment` — Direction in which the component should show +- **verticalStartPoint?**: `VerticalAlignment` — Target's starting point + +### [RowType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/RowType) +Interface representing a row in the grid. It is essentially the blueprint to a row object. +Contains definitions of properties and methods, relevant to a row + +- **addRowUI?**: `boolean` +- **beginAddRow?**: `any` — Optional +A method to handle adding a new row +- **cells?**: `QueryList | CellType[]` — Optional +A list or an array of cells, that belong to the row +- **children?**: `RowType[]` — Optional +Contains the child rows of the current row, if there are any. +- **data?**: `any` +- **delete?**: `any` — Optional +A method to handle deleting rows +- **deleted?**: `boolean` — Optional +Indicates whether the row is marked for deletion. +- **disabled?**: `boolean` — Optional +Indicates whether the current row is disabled +- **expanded?**: `boolean` — Optional +Indicates whether the current row is expanded. +The value is true, if the row is expanded and false, if it is collapsed +- **focused?**: `boolean` — Optional +Indicates whether the row is currently focused. +- **grid**: `GridType` — Represent the grid instance, the row belongs to +- **groupRow?**: `IGroupByRecord` +- **hasChildren?**: `boolean` — Optional +Indicates whether the current row has any child rows +- **index**: `number` — The index of the row within the grid +- **inEditMode?**: `boolean` — Optional +Indicates whether the row is currently being edited. +- **isGroupByRow?**: `boolean` — Indicates whether the row is grouped. +- **isSummaryRow?**: `boolean` +- **key?**: `any` +- **nativeElement?**: `HTMLElement` — Represents the native HTML element of the row itself +- **onClick?**: `any` — Optional +A method to handle click event on the row +It takes a MouseEvent as an argument +- **onRowSelectorClick?**: `any` +- **parent?**: `RowType` — Optional +Contains the parent row of the current row, if it has one. +If the parent row exist, it means that the current row is a child row +- **pin?**: `any` — Optional +A method to handle pinning a row +- **pinned?**: `boolean` — Optional +Indicates whether the current row is pinned. +- **selected?**: `boolean` — Optional +Indicates whether the current row is selected +- **summaries?**: `Map` — Optional +A map of column field names to the summary results for the row. +- **treeRow?**: `ITreeGridRecord` — Optional +Represents the hierarchical record associated with the row (for tree grids). +It is of type ITreeGridRecord, which contains the data, children, the hierarchical level, etc. +- **unpin?**: `any` — Optional +A method to handle unpinning a row, that has been pinned +- **update?**: `any` — Optional +A method to handle changing the value of elements of the row +It takes the new value as an argument +- **validation?**: `IGridValidationState` +- **viewIndex**: `number` +- **virtDirRow?**: `IgxGridForOfDirective` — Optional +Virtualization state of data record added from cache + +### [Size](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/Size) + +- **height**: `number` — Gets or sets the vertical component of Size +- **width**: `number` — Gets or sets the horizontal component of Size + +### [State](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/State) + +- **recordRef**: `any` +- **type**: `TransactionType` +- **value**: `any` + +### [StateUpdateEvent](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/StateUpdateEvent) + +- **actions**: `Action[]` +- **origin**: `TransactionEventOrigin` + +### [ToggleViewCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ToggleViewCancelableEventArgs) + + +### [ToggleViewEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/ToggleViewEventArgs) + +- **event?**: `Event` +- **id**: `string` — Id of the toggle view + +### [Transaction](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/Transaction) + +- **id**: `any` +- **newValue**: `any` +- **type**: `TransactionType` + +### [TransactionService](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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` — Event fired when transaction state has changed - add transaction, commit all transactions, undo and redo +- **add**: `any` +- **clear**: `any` +- **commit**: `any` +- **endPending**: `any` +- **getAggregatedChanges**: `any` +- **getAggregatedValue**: `any` +- **getState**: `any` +- **getTransactionLog**: `any` +- **redo**: `any` +- **startPending**: `any` +- **undo**: `any` + +### [TreeGridType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/interfaces/TreeGridType) +An interface describing a Tree Grid type. It is essentially the blueprint to a grid kind +Contains definitions of properties and methods, relevant to a grid kind +Extends from GridType + +- **records**: `Map` +- **isTreeRow**: `any` + +## Enumerations + +### [AbsolutePosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/AbsolutePosition) +Defines the possible positions for the absolute overlay settings presets. + +- **Bottom** = "bottom" +- **Center** = "center" +- **Top** = "top" + +### [CarouselAnimationDirection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/CarouselAnimationDirection) + +- **NEXT** = 1 +- **NONE** = 0 +- **PREV** = 2 + +### [ColumnPinningPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/ColumnPinningPosition) +Enumeration representing the possible positions for pinning columns. +- Start: Columns are pinned to the start of the grid. +- End: Columns are pinned to the end of the grid. + +- **End** = 1 +- **Start** = 0 + +### [CsvFileTypes](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/enums/DatePart) +Specify a particular date, time or AmPm part. + +- **AmPm** = "ampm" +- **Date** = "date" +- **FractionalSeconds** = "fractionalSeconds" +- **Hours** = "hours" +- **Literal** = "literal" +- **Minutes** = "minutes" +- **Month** = "month" +- **Seconds** = "seconds" +- **Year** = "year" + +### [DateRangeType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/DateRangeType) + +- **After** = 0 +- **Before** = 1 +- **Between** = 2 +- **Specific** = 3 +- **Weekdays** = 4 +- **Weekends** = 5 + +### [DragDirection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/DragDirection) + +- **BOTH** = 2 +- **HORIZONTAL** = 1 +- **VERTICAL** = 0 + +### [DropPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/DropPosition) +This enumeration is used to configure whether the drop position is set before or after +the target. + +- **AfterDropTarget** = 1 +- **BeforeDropTarget** = 0 + +### [ExportHeaderType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/ExportHeaderType) + +- **ColumnHeader** = "ColumnHeader" +- **MultiColumnHeader** = "MultiColumnHeader" +- **MultiRowHeader** = "MultiRowHeader" +- **PivotMergedHeader** = "PivotMergedHeader" +- **PivotRowHeader** = "PivotRowHeader" +- **RowHeader** = "RowHeader" + +### [ExportRecordType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/enums/FilteringExpressionsTreeType) + +- **Advanced** = 1 +- **Regular** = 0 + +### [FilteringLogic](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/FilteringLogic) + +- **And** = 0 +- **Or** = 1 + +### [HorizontalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/HorizontalAlignment) + +- **Center** = -0.5 +- **Left** = -1 +- **Right** = 0 + +### [IgxInputState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/IgxInputState) + +- **INITIAL** = 0 +- **INVALID** = 2 +- **VALID** = 1 + +### [IgxListPanState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/IgxListPanState) + +- **LEFT** = 1 +- **NONE** = 0 +- **RIGHT** = 2 + +### [OffsetMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/OffsetMode) +Determines whether to add or set the offset values. + +- **Add** = 0 +- **Set** = 1 + +### [PagingError](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/PagingError) + +- **IncorrectPageIndex** = 1 +- **IncorrectRecordsPerPage** = 2 +- **None** = 0 + +### [PivotDimensionType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/PivotDimensionType) +The dimension types - Row, Column or Filter. + +- **Column** = 1 +- **Filter** = 2 +- **Row** = 0 + +### [PivotRowLayoutType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/PivotRowLayoutType) + +- **Horizontal** = "horizontal" +- **Vertical** = "vertical" + +### [PivotSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/PivotSummaryPosition) + +- **Bottom** = "bottom" +- **Top** = "top" + +### [RelativePosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/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/22.0.0/enums/RowPinningPosition) +Enumeration representing the possible positions for pinning rows. +- Top: Rows are pinned to the top of the grid. +- Bottom: Rows are pinned to the bottom of the grid. + +- **Bottom** = 1 +- **Top** = 0 + +### [ScrollDirection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/ScrollDirection) + +- **NEXT** = "next" +- **NONE** = "none" +- **PREV** = "prev" + +### [SortingDirection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/SortingDirection) + +- **Asc** = 1 +- **Desc** = 2 +- **None** = 0 + +### [SplitterType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/SplitterType) +An enumeration that defines the SplitterComponent panes orientation. + +- **Horizontal** = 0 +- **Vertical** = 1 + +### [TRANSACTION_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/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/22.0.0/enums/TransactionEventOrigin) + +- **ADD** = "add" +- **CLEAR** = "clear" +- **END** = "endPending" +- **REDO** = "redo" +- **UNDO** = "undo" + +### [TransactionType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/TransactionType) + +- **ADD** = "add" +- **DELETE** = "delete" +- **UPDATE** = "update" + +### [VerticalAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/VerticalAlignment) + +- **Bottom** = 0 +- **Middle** = -0.5 +- **Top** = -1 + +### [WEEKDAYS](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/enums/WEEKDAYS) +Enumeration representing the days of the week. + +- **FRIDAY** = 5 +- **MONDAY** = 1 +- **SATURDAY** = 6 +- **SUNDAY** = 0 +- **THURSDAY** = 4 +- **TUESDAY** = 2 +- **WEDNESDAY** = 3 + +## Type Aliases + +### [ButtonGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ButtonGroupAlignment) +`any` +Determines the Button Group alignment + +### [CalendarRangeParams](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/CalendarRangeParams) +`any` + +### [CalendarSelection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/CalendarSelection) +`any` +Sets the selection type - single, multi or range. + +### [CarouselAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/CarouselAnimationType) +`any` + +### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/CarouselIndicatorsOrientation) +`any` + +### [ColumnDisplayOrder](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ColumnDisplayOrder) +`any` +Enumeration representing different column display order options. + +### [DayInterval](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/DayInterval) +`"year" | "quarter" | "month" | "week" | "day"` + +### [DayParameter](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/DayParameter) +`CalendarDay | Date` + +### [DropDownActionKey](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/DropDownActionKey) +`any` +Key actions that have designated handlers in drop down + +### [FilterMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/FilterMode) +`any` +Enumeration representing different filter modes for grid filtering. +- quickFilter: Default mode with a filter row UI between the column headers and the first row of records. +- excelStyleFilter: Filter mode where an Excel-style filter is used. + +### [GridCellMergeMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridCellMergeMode) +`any` +Enumeration representing different cell merging modes for the grid elements. +- 'onSort': Only merge cells in column that are sorted. +- 'always': Always merge adjacent cells based on merge strategy. + +### [GridFeatures](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridFeatures) +`any` + +### [GridKeydownTargetType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridKeydownTargetType) +`"dataCell" | "summaryCell" | "groupRow" | "hierarchicalRow" | "headerCell" | "masterDetailRow"` +Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid. +- 'dataCell': Represents a data cell within the grid. It contains and displays individual data values +- 'summaryCell': Summary cells display aggregated/summarized data at the bottom of the grid. They provide insights like total record count, min/max values, etc. +- 'groupRow': Group row within the grid. Group rows are used to group related data rows by columns. Contains the related group expression, level, sub-records and group value. +- 'hierarchicalRow': Hierarchical rows are similar to group rows, but represent a more complex hierarchical structure, allowing for nested grouping +- 'headerCell': Represents a header cell within the grid. Header cells are used to display column headers, providing context and labels for the columns. +- 'masterDetailRow': Represents a grid row that can be expanded in order to show additional information + +### [GridPagingMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridPagingMode) +`any` +Enumeration representing different paging modes for the grid. +- Local: The grid will use local data to extract pages during paging. +- Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions. + +### [GridSelectionMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridSelectionMode) +`any` +Enumeration representing different selection modes for the grid elements if can be selected. +- 'none': No selection is allowed. Default row and column selection mode. +- 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one. +- 'multiple': Default cell selection mode. More than one element can be selected at a time. +- 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action + +### [GridSummaryCalculationMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridSummaryCalculationMode) +`any` +Enumeration representing different calculation modes for grid summaries. +- rootLevelOnly: Summaries are calculated only for the root level. +- childLevelsOnly: Summaries are calculated only for child levels. +- rootAndChildLevels: Default value; Summaries are calculated for both root and child levels. + +### [GridSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridSummaryPosition) +`any` +Enumeration representing the position of grid summary rows. +- top: Default value; Summary rows are displayed at the top of the grid. +- bottom: Summary rows are displayed at the bottom of the grid. + +### [GridValidationTrigger](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/GridValidationTrigger) +`"change" | "blur"` +Type representing the triggers for grid cell validation. +- 'change': Validation is triggered when the cell value changes. +- 'blur': Validation is triggered when the cell loses focus. + +### [HorizontalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/HorizontalAnimationType) +`any` + +### [IActionStripResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IActionStripResourceStrings) +`PrefixedResourceStrings` + +### [IBannerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IBannerResourceStrings) +`PrefixedResourceStrings` + +### [ICalendarResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ICalendarResourceStrings) +`PrefixedResourceStrings` + +### [ICarouselResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ICarouselResourceStrings) +`PrefixedResourceStrings` + +### [IChipResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IChipResourceStrings) +`PrefixedResourceStrings` + +### [IComboResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IComboResourceStrings) +`PrefixedResourceStrings` + +### [IconReference](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IconReference) +`IconMeta & FamilyMeta` + +### [IDatePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IDatePickerResourceStrings) +`PrefixedResourceStrings` + +### [IDateRangePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IDateRangePickerResourceStrings) +`PrefixedResourceStrings` + +### [IGridResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IGridResourceStrings) +`PrefixedResourceStrings` + +### [IgxAvatarSize](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxAvatarSize) +`any` + +### [IgxAvatarType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxAvatarType) +`any` + +### [IgxBadgeType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxBadgeType) +`any` +Determines the igxBadge type + +### [IgxButtonType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxButtonType) +`any` +Determines the Button type. + +### [IgxCalendarView](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxCalendarView) +`any` +Determines the Calendar active view - days, months or years. + +### [IgxCardActionsLayout](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxCardActionsLayout) +`any` + +### [IgxChatOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxChatOptions) +`Omit` +Configuration options for the chat component. + +### [IgxChatTemplates](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxChatTemplates) +`any` +Template references for customizing chat component rendering. +Each property corresponds to a specific part of the chat UI that can be customized. + +### [IgxChipTypeVariant](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxChipTypeVariant) +`any` + +### [IgxDividerType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxDividerType) +`any` + +### [IgxExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxExporterOptions) +`IgxCsvExporterOptions | IgxExcelExporterOptions | IgxPdfExporterOptions` + +### [IgxGridLiteCellTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteCellTemplateContext) +`IgcCellContext & any` +Context provided to the header template. + +### [IgxGridLiteColumnConfiguration](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteColumnConfiguration) +`ColumnConfiguration` +Configuration object for grid columns. + +### [IgxGridLiteColumnSortConfiguration](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteColumnSortConfiguration) +`ColumnSortConfiguration` + +### [IgxGridLiteDataPipelineConfiguration](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteDataPipelineConfiguration) +`DataPipelineConfiguration` + +### [IgxGridLiteFilteringExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteFilteringExpression) +`FilterExpression` + +### [IgxGridLiteHeaderTemplateContext](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteHeaderTemplateContext) +`IgcHeaderContext & any` +Context provided to the header template. + +### [IgxGridLiteSortingExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteSortingExpression) +`SortingExpression` + +### [IgxGridLiteSortingOptions](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxGridLiteSortingOptions) +`GridLiteSortingOptions` + +### [IgxIconButtonType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxIconButtonType) +`any` +Determines the Icon Button type. + +### [IgxInputGroupType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxInputGroupType) +`any` +Determines the InputGroupType. + +### [IgxProgressType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxProgressType) +`any` + +### [IgxSliderType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxSliderType) +`any` + +### [IgxStepperOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxStepperOrientation) +`any` + +### [IgxStepperTitlePosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxStepperTitlePosition) +`any` + +### [IgxStepType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxStepType) +`any` + +### [IgxTabsAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxTabsAlignment) +`any` + +### [IgxTextAlign](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxTextAlign) +`any` + +### [IgxTheme](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxTheme) +`any` +Determines the component theme. + +### [IgxTreeSearchResolver](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxTreeSearchResolver) +`any` +Comparer function that can be used when searching through tree node[] + +### [IgxTreeSelectionType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IgxTreeSelectionType) +`any` + +### [IListResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IListResourceStrings) +`PrefixedResourceStrings` + +### [IPaginatorResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IPaginatorResourceStrings) +`PrefixedResourceStrings` + +### [IQueryBuilderResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/IQueryBuilderResourceStrings) +`PrefixedResourceStrings` + +### [ITimePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ITimePickerResourceStrings) +`PrefixedResourceStrings` + +### [ITreeResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ITreeResourceStrings) +`PrefixedResourceStrings` + +### [KeyOfOrString](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/KeyOfOrString) +`any` + +### [LabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/LabelPosition) +`any` + +### [PickerCalendarOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/PickerCalendarOrientation) +`any` +Calendar orientation. + +### [PickerHeaderOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/PickerHeaderOrientation) +`any` +Header orientation in dialog mode. + +### [PickerInteractionMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/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. + +### [PivotAggregation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/PivotAggregation) +`any` +Interface describing a PivotAggregation function. +Accepts an array of extracted data members and an optional array of the original data records, +which can be omitted or undefined. + +### [PivotAggregationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/PivotAggregationType) +`"SUM" | "AVG" | "MIN" | "MAX" | "COUNT" | "LATEST" | "EARLIEST"` + +### [RadioGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/RadioGroupAlignment) +`any` +Determines the Radio Group alignment + +### [SelectionState](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/SelectionState) +`ISelectionKeyboardState | ISelectionPointerState` +Represents the overall state of grid selection, combining both keyboard and pointer interaction states. +It can be either an ISelectionKeyboardState or an ISelectionPointerState. + +### [SliderHandle](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/SliderHandle) +`any` + +### [TickLabelsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/TickLabelsOrientation) +`any` +Slider Tick labels Orientation + +### [TicksOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/TicksOrientation) +`any` +Slider Ticks orientation + +### [ValidationStatus](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/ValidationStatus) +`"VALID" | "INVALID"` +Type representing the validation status. +- 'VALID': The validation status is valid. +- 'INVALID': The validation status is invalid. + +### [VerticalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/VerticalAnimationType) +`any` + +### [WeekDays](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/types/WeekDays) +`"sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday"` + +## Functions + +### [areSameMonth](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/areSameMonth) +`areSameMonth(firstMonth: DayParameter, secondMonth: DayParameter): boolean` + +### [calendarRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/calendarRange) +`calendarRange(options: CalendarRangeParams): Generator` +Returns a generator yielding day values between start and end (non-inclusive) +by a given unit as a step. + +### [changei18n](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/changei18n) +`changei18n(resourceStrings: IResourceStrings): void` +Change resource strings for all components globally. The locale is not taken into account and this method should be called when the locale is changed. +Note: Legacy method. We suggest using the new registerI18n and setCurrentI18n methods exposed. + +### [columnFieldPath](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/columnFieldPath) +`columnFieldPath(path?: string): string[]` + +### [comboIgnoreDiacriticsFilter](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/comboIgnoreDiacriticsFilter) +`comboIgnoreDiacriticsFilter(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[]` +Combo filter function which does not distinguish between accented letters and their base letters. +For example, when filtering for "resume", this function will match both "resume" and "résumé". + +### [copyDescriptors](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/copyDescriptors) +`copyDescriptors(obj: any): any` +Creates an object with prototype from provided source and copies +all properties descriptors from provided source + +### [first](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/first) +`first(arr: T[]): T` +Get the first item in an array + +### [formatToParts](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/formatToParts) +`formatToParts(date: Date, locale: string, options: DateTimeFormatOptions, parts: string[]): Record` + +### [generateExpressionsList](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/generateExpressionsList) +`generateExpressionsList(expressions: IFilteringExpression | IFilteringExpressionsTree, operator: FilteringLogic, expressionsUIs: ExpressionUI[]): void` + +### [generateMonth](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/generateMonth) +`generateMonth(value: DayParameter, firstWeekDay: number): Generator` + +### [getClosestActiveDate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getClosestActiveDate) +`getClosestActiveDate(start: CalendarDay, delta: number, disabled: DateRangeDescriptor[]): CalendarDay` + +### [getComponentCssSizeVar](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getComponentCssSizeVar) +`getComponentCssSizeVar(size: string): "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"` + +### [getComponentSize](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getComponentSize) +`getComponentSize(el: Element): string` +Get the size of the component as derived from the CSS size variable + +### [getComponentTheme](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getComponentTheme) +`getComponentTheme(el: Element): IgxTheme` + +### [getCurrentResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getCurrentResourceStrings) +`getCurrentResourceStrings(defaultEN: T, init: boolean, locale?: string): T` +Get current resource strings based on default. Result is truncated result, containing only relevant locale strings. + +### [getHierarchy](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getHierarchy) +`getHierarchy(gRow: IGroupByRecord): IGroupByKey[]` + +### [getNextActiveDate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getNextActiveDate) +`getNextActiveDate(start: CalendarDay, disabled: DateRangeDescriptor[]): CalendarDay` +Returns the next date starting from start that does not match the disabled descriptors + +### [getPreviousActiveDate](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getPreviousActiveDate) +`getPreviousActiveDate(start: CalendarDay, disabled: DateRangeDescriptor[]): CalendarDay` +Returns the previous date starting from start that does not match the disabled descriptors + +### [getUUID](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getUUID) +`getUUID(): any` +Use the function to get a random UUID string when secure context is not guaranteed making crypto.randomUUID unavailable. + +### [getYearRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/getYearRange) +`getYearRange(current: DayParameter, range: number): any` + +### [intoChunks](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/intoChunks) +`intoChunks(arr: T[], size: number): Generator` +Splits an array into chunks of length size and returns a generator +yielding each chunk. +The last chunk may contain less than size elements. + +### [isConstructor](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isConstructor) +`isConstructor(ref: any): boolean` + +### [isDateInRanges](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isDateInRanges) +`isDateInRanges(date: DayParameter, ranges: DateRangeDescriptor[]): boolean` + +### [isHierarchyMatch](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isHierarchyMatch) +`isHierarchyMatch(h1: IGroupByKey[], h2: IGroupByKey[], expressions: IGroupingExpression[]): boolean` + +### [isLeap](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isLeap) +`isLeap(year: number): boolean` +Returns true for leap years, false for non-leap years. + +### [isNextMonth](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isNextMonth) +`isNextMonth(target: DayParameter, origin: DayParameter): boolean` + +### [isPreviousMonth](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isPreviousMonth) +`isPreviousMonth(target: DayParameter, origin: DayParameter): boolean` + +### [isTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/isTree) +`isTree(entry: IFilteringExpression | IExpressionTree): entry` +Checks if the given entry is an IExpressionTree. + +### [last](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/last) +`last(arr: T[]): T` +Get the last item in an array + +### [modulo](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/modulo) +`modulo(n: number, d: number): number` +Calculates the modulo of two numbers, ensuring a non-negative result. + +### [monthRange](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/monthRange) +`monthRange(year: number, month: number): number[]` +Return weekday and number of days for year, month. + +### [normalizeURI](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/normalizeURI) +`normalizeURI(path: string): string` + +### [notifyChanges](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/notifyChanges) +`notifyChanges(repaint: boolean): any` + +### [onResourceChangeHandle](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/onResourceChangeHandle) +`onResourceChangeHandle(destroyObj: Subject | DestroyRef, callback: any, context: any): void` +Bind to the i18n manager's onResourceChange event + +### [provideIgniteIntl](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/provideIgniteIntl) +`provideIgniteIntl(): Provider[]` +Set up provider for Ignite UI components to use Intl formatting, replacing the default Angular's one. + +### [range](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/range) +`range(start: number, stop: number, step: number): any[]` + +### [recreateExpression](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/recreateExpression) +`recreateExpression(expression: IFilteringExpression, fields: FieldType[]): IFilteringExpression` +Recreates an expression from the given fields by applying the correct operands +and adjusting the search value to be the correct type. + +### [recreateTree](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/recreateTree) +`recreateTree(tree: IExpressionTree, entities: EntityType[], isRoot: boolean): IExpressionTree` +Recreates the tree from a given array of entities by applying the correct operands +for each expression and adjusting the search values to be the correct type. + +### [recreateTreeFromFields](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/recreateTreeFromFields) +`recreateTreeFromFields(tree: IExpressionTree, fields: FieldType[]): IExpressionTree` +Recreates the tree from a given array of fields by applying the correct operands. +It is recommended to use recreateTree if there will be multiple entities in the tree +with potentially colliding field names. + +### [registerI18n](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/registerI18n) +`registerI18n(resourceStrings: IResourceStrings, locale: string): void` +Set the current locale of all Ignite UI components. + +### [rem](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/rem) +`rem(value: string | number): number` +Converts pixel values to their rem counterparts for a base value + +### [setCurrentI18n](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/setCurrentI18n) +`setCurrentI18n(locale: string): void` +Set the current locale of all Ignite UI components. + +### [toCalendarDay](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/toCalendarDay) +`toCalendarDay(date: DayParameter): CalendarDay` + +### [trackByIdentity](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/trackByIdentity) +`trackByIdentity(item: T): T` +Collection re-created w/ the built in track by identity will always log +warning even for valid cases of recalculating all collection items. +See https://github.com/angular/angular/blob/55581b4181639568fb496e91055142a1b489e988/packages/core/src/render3/instructions/control_flow.ts#L393-L409 +Current solution explicit track function doing the same as suggested in: +https://github.com/angular/angular/issues/56471#issuecomment-2180315803 +This should be used with moderation and when necessary. + +### [WatchColumnChanges](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/WatchColumnChanges) +`WatchColumnChanges(): PropertyDecorator` + +### [weekDay](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/functions/weekDay) +`weekDay(year: number, month: number, day: number): number` + +## Variables + +### [ActionStripResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ActionStripResourceStringsEN) +`IActionStripResourceStrings` + +### [BannerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/BannerResourceStringsEN) +`IBannerResourceStrings` + +### [ButtonGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ButtonGroupAlignment) +`any` +Determines the Button Group alignment + +### [CalendarResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/CalendarResourceStringsEN) +`ICalendarResourceStrings` + +### [CalendarSelection](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/CalendarSelection) +`any` +Sets the selection type - single, multi or range. + +### [CarouselAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/CarouselAnimationType) +`any` + +### [CarouselIndicatorsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/CarouselIndicatorsOrientation) +`any` + +### [CarouselResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/CarouselResourceStringsEN) +`ICarouselResourceStrings` + +### [ChipResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ChipResourceStringsEN) +`IChipResourceStrings` + +### [ColumnDisplayOrder](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ColumnDisplayOrder) +`any` +Enumeration representing different column display order options. + +### [ComboResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ComboResourceStringsEN) +`IComboResourceStrings` + +### [DatePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DatePickerResourceStringsEN) +`IDatePickerResourceStrings` + +### [DateRangePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DateRangePickerResourceStringsEN) +`IDateRangePickerResourceStrings` + +### [daysInWeek](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/daysInWeek) +`7` + +### [DEFAULT_LOCALE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DEFAULT_LOCALE) +`"en-US"` + +### [DEFAULT_OWNER](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DEFAULT_OWNER) +`"default"` + +### [DEFAULT_PIVOT_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DEFAULT_PIVOT_KEYS) +`any` +Default pivot keys used for data processing in the pivot pipes. + +### [DropDownActionKey](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/DropDownActionKey) +`any` +Key actions that have designated handlers in drop down + +### [FilterMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/FilterMode) +`any` +Enumeration representing different filter modes for grid filtering. +- quickFilter: Default mode with a filter row UI between the column headers and the first row of records. +- excelStyleFilter: Filter mode where an Excel-style filter is used. + +### [GRID_LEVEL_COL](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GRID_LEVEL_COL) +`"GRID_LEVEL_COL"` + +### [GRID_PARENT](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GRID_PARENT) +`"grid-parent"` + +### [GRID_ROOT_SUMMARY](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GRID_ROOT_SUMMARY) +`"igxGridRootSummary"` + +### [GridCellMergeMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridCellMergeMode) +`any` +Enumeration representing different cell merging modes for the grid elements. +- 'onSort': Only merge cells in column that are sorted. +- 'always': Always merge adjacent cells based on merge strategy. + +### [GridPagingMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridPagingMode) +`any` +Enumeration representing different paging modes for the grid. +- Local: The grid will use local data to extract pages during paging. +- Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions. + +### [GridResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridResourceStringsEN) +`IGridResourceStrings` + +### [GridSelectionMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridSelectionMode) +`any` +Enumeration representing different selection modes for the grid elements if can be selected. +- 'none': No selection is allowed. Default row and column selection mode. +- 'single': Only one element can be selected at a time. Selecting a new one will deselect the previously selected one. +- 'multiple': Default cell selection mode. More than one element can be selected at a time. +- 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action + +### [GridSummaryCalculationMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridSummaryCalculationMode) +`any` +Enumeration representing different calculation modes for grid summaries. +- rootLevelOnly: Summaries are calculated only for the root level. +- childLevelsOnly: Summaries are calculated only for child levels. +- rootAndChildLevels: Default value; Summaries are calculated for both root and child levels. + +### [GridSummaryPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/GridSummaryPosition) +`any` +Enumeration representing the position of grid summary rows. +- top: Default value; Summary rows are displayed at the top of the grid. +- bottom: Summary rows are displayed at the bottom of the grid. + +### [HorizontalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/HorizontalAnimationType) +`any` + +### [I18N_FORMATTER](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/I18N_FORMATTER) +`InjectionToken` +Injection token that allows for retrieving the i18n formatter for the IgniteUI components. + +### [IGX_ACCORDION_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_ACCORDION_DIRECTIVES) +`any` + +### [IGX_ACTION_STRIP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_ACTION_STRIP_DIRECTIVES) +`any` + +### [IGX_BANNER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_BANNER_DIRECTIVES) +`any` + +### [IGX_BOTTOM_NAV_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_BOTTOM_NAV_DIRECTIVES) +`any` + +### [IGX_BUTTON_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_BUTTON_GROUP_DIRECTIVES) +`any` + +### [IGX_CALENDAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CALENDAR_DIRECTIVES) +`any` + +### [IGX_CALENDAR_VIEW_ITEM](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CALENDAR_VIEW_ITEM) +`InjectionToken` + +### [IGX_CARD_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CARD_DIRECTIVES) +`any` + +### [IGX_CAROUSEL_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CAROUSEL_DIRECTIVES) +`any` + +### [IGX_CHIPS_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CHIPS_DIRECTIVES) +`any` + +### [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES) +`any` + +### [IGX_COMBO_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_COMBO_COMPONENT) +`InjectionToken` + +### [IGX_COMBO_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_COMBO_DIRECTIVES) +`any` + +### [IGX_DATE_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DATE_PICKER_DIRECTIVES) +`any` + +### [IGX_DATE_RANGE_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DATE_RANGE_PICKER_DIRECTIVES) +`any` + +### [IGX_DIALOG_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DIALOG_DIRECTIVES) +`any` + +### [IGX_DRAG_DROP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DRAG_DROP_DIRECTIVES) +`any` + +### [IGX_DROP_DOWN_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DROP_DOWN_DIRECTIVES) +`any` + +### [IGX_DROPDOWN_BASE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_DROPDOWN_BASE) +`InjectionToken` + +### [IGX_EXPANSION_PANEL_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_EXPANSION_PANEL_DIRECTIVES) +`any` + +### [IGX_GRID_BASE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_GRID_BASE) +`InjectionToken` + +### [IGX_GRID_COMMON_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_GRID_COMMON_DIRECTIVES) +`any` + +### [IGX_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_GRID_DIRECTIVES) +`any` + +### [IGX_GRID_SERVICE_BASE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_GRID_SERVICE_BASE) +`InjectionToken` + +### [IGX_GRID_VALIDATION_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_GRID_VALIDATION_DIRECTIVES) +`any` + +### [IGX_HIERARCHICAL_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_HIERARCHICAL_GRID_DIRECTIVES) +`any` + +### [IGX_INPUT_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_INPUT_GROUP_DIRECTIVES) +`any` + +### [IGX_INPUT_GROUP_TYPE](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_INPUT_GROUP_TYPE) +`InjectionToken` +Defines the InputGroupType DI token. + +### [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_LINEAR_PROGRESS_BAR_DIRECTIVES) +`any` + +### [IGX_LIST_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_LIST_DIRECTIVES) +`any` + +### [IGX_NAVBAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_NAVBAR_DIRECTIVES) +`any` + +### [IGX_NAVIGATION_DRAWER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_NAVIGATION_DRAWER_DIRECTIVES) +`any` + +### [IGX_PAGINATOR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_PAGINATOR_DIRECTIVES) +`any` + +### [IGX_PIVOT_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_PIVOT_GRID_DIRECTIVES) +`any` + +### [IGX_PROGRESS_BAR_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_PROGRESS_BAR_DIRECTIVES) +`any` + +### [IGX_QUERY_BUILDER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_QUERY_BUILDER_DIRECTIVES) +`any` + +### [IGX_RADIO_GROUP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_RADIO_GROUP_DIRECTIVES) +`any` + +### [IGX_SELECT_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_SELECT_DIRECTIVES) +`any` + +### [IGX_SIMPLE_COMBO_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_SIMPLE_COMBO_DIRECTIVES) +`any` + +### [IGX_SLIDER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_SLIDER_DIRECTIVES) +`any` + +### [IGX_SPLITTER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_SPLITTER_DIRECTIVES) +`any` + +### [IGX_STEPPER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_STEPPER_DIRECTIVES) +`any` + +### [IGX_TABS_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_TABS_DIRECTIVES) +`any` + +### [IGX_TIME_PICKER_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_TIME_PICKER_DIRECTIVES) +`any` + +### [IGX_TOOLTIP_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_TOOLTIP_DIRECTIVES) +`any` + +### [IGX_TREE_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_TREE_DIRECTIVES) +`any` + +### [IGX_TREE_GRID_DIRECTIVES](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IGX_TREE_GRID_DIRECTIVES) +`any` + +### [IgxAvatarSize](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxAvatarSize) +`any` + +### [IgxAvatarType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxAvatarType) +`any` + +### [IgxBadgeType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxBadgeType) +`any` +Determines the igxBadge type + +### [IgxCalendarView](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxCalendarView) +`any` + +### [IgxCardActionsLayout](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxCardActionsLayout) +`any` + +### [IgxChipTypeVariant](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxChipTypeVariant) +`any` + +### [IgxDividerType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxDividerType) +`any` + +### [IgxGridTransaction](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxGridTransaction) +`InjectionToken>` +Injection token for accessing the grid transaction object. +This allows injecting the grid transaction object into components or services. + +### [IgxInputGroupEnum](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxInputGroupEnum) +`any` + +### [IgxProgressType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxProgressType) +`any` + +### [IgxSliderType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxSliderType) +`any` + +### [IgxStepperOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxStepperOrientation) +`any` + +### [IgxStepperTitlePosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxStepperTitlePosition) +`any` + +### [IgxStepType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxStepType) +`any` + +### [IgxTabsAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxTabsAlignment) +`any` + +### [IgxTextAlign](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxTextAlign) +`any` + +### [IgxTreeSelectionType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IgxTreeSelectionType) +`any` + +### [IndigoIcons](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/IndigoIcons) +`Map` + +### [InputResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/InputResourceStringsEN) +`IInputResourceStrings` + +### [LabelPosition](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/LabelPosition) +`any` + +### [ListResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/ListResourceStringsEN) +`IListResourceStrings` + +### [NAVIGATION_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/NAVIGATION_KEYS) +`Set` + +### [PaginatorResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/PaginatorResourceStringsEN) +`IPaginatorResourceStrings` + +### [PickerCalendarOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/PickerCalendarOrientation) +`any` +Calendar orientation. + +### [PickerHeaderOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/PickerHeaderOrientation) +`any` +Header orientation in dialog mode. + +### [PickerInteractionMode](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/PickerInteractionMode) +`any` +This enumeration is used to configure whether the date/time picker has an editable input with drop down +or is readonly - the date/time is selected only through a dialog. + +### [QueryBuilderResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/QueryBuilderResourceStringsEN) +`IQueryBuilderResourceStrings` + +### [RadioGroupAlignment](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/RadioGroupAlignment) +`any` +Determines the Radio Group alignment + +### [SliderHandle](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/SliderHandle) +`any` + +### [THEME_TOKEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/THEME_TOKEN) +`InjectionToken` + +### [TickLabelsOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/TickLabelsOrientation) +`any` +Slider Tick labels Orientation + +### [TicksOrientation](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/TicksOrientation) +`any` +Slider Ticks orientation + +### [TimePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/TimePickerResourceStringsEN) +`ITimePickerResourceStrings` + +### [TreeResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/TreeResourceStringsEN) +`ITreeResourceStrings` + +### [VerticalAnimationType](https://www.infragistics.com/api/angular/igniteui-angular/22.0.0/variables/VerticalAnimationType) +`any` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/9.0.x/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/9.0.x/llms-full.txt new file mode 100644 index 000000000..b4767038d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/angular-api/igniteui-angular/9.0.x/llms-full.txt @@ -0,0 +1,4605 @@ +# Ignite UI for Angular v9.0.x — Full API Reference + +> Complete API reference for the Ignite UI for Angular package (9.0.x). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions. + +Platform: Angular +Package: igniteui-angular +Version: 9.0.x + +## Classes + +### [AbsoluteScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/AbsoluteScrollStrategy) + +- **constructor**(scrollContainer?: HTMLElement): AbsoluteScrollStrategy +- **attach**(): void +- **detach**(): void +- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void + +### [AutoPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/AutoPositionStrategy) + +- **constructor**(settings?: PositionSettings): AutoPositionStrategy + +### [BaseFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/BaseFilteringStrategy) + +- **filter**(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[] +- **findMatchByExpression**(rec: object, expr: IFilteringExpression): boolean +- **matchRecord**(rec: object, expressions: IFilteringExpressionsTree | IFilteringExpression): boolean + +### [BaseFitPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/BaseFitPositionStrategy) + +- **constructor**(settings?: PositionSettings): BaseFitPositionStrategy +- **position**(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void + +### [BlockScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/BlockScrollStrategy) + +- **constructor**(scrollContainer?: HTMLElement): BlockScrollStrategy +- **attach**(): void +- **detach**(): void +- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void + +### [Calendar](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/Calendar) + +- **constructor**(firstWeekDay: number | WEEKDAYS): Calendar +- **firstWeekDay**: `any` +- **formatToParts**(date: Date, locale: string, options: any, parts: string[]): any +- **getFirstViewDate**(date: Date, interval: string, activeViewIdx: number): Date +- **getNextMonth**(date: Date): Date +- **getNextYear**(date: Date): Date +- **getPrevMonth**(date: Date): Date +- **getPrevYear**(date: Date): Date +- **monthdates**(year: number, month: number, extraWeek: boolean): ICalendarDate[] +- **monthdatescalendar**(year: number, month: number, extraWeek: boolean): ICalendarDate[][] +- **timedelta**(date: Date, interval: string, units: number): Date +- **weekdays**(): number[] + +### [CalendarHammerConfig](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/CalendarHammerConfig) + + +### [CarouselHammerConfig](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/CarouselHammerConfig) + + +### [CloseScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/CloseScrollStrategy) + +- **constructor**(scrollContainer?: HTMLElement): CloseScrollStrategy +- **attach**(): void +- **detach**(): void +- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void + +### [ConnectedPositioningStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/ConnectedPositioningStrategy) + +- **constructor**(settings?: PositionSettings): ConnectedPositioningStrategy +- **settings**: `PositionSettings` +- **clone**(): IPositionStrategy +- **position**(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void + +### [ContainerPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/ContainerPositionStrategy) + +- **constructor**(settings?: PositionSettings): ContainerPositionStrategy +- **position**(contentElement: HTMLElement, size?: Size, document?: Document, initialCall?: boolean): void + +### [CustomFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/CustomFilteringStrategy) + +- **constructor**(): CustomFilteringStrategy +- **filter**(data: any[], expressionsTree: IFilteringExpressionsTree): any[] + +### [DefaultSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/DefaultSortingStrategy) + +- **compareValues**(a: any, b: any): 1 | 0 | -1 +- **sort**(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: any): any[] +- static **instance**(): DefaultSortingStrategy + +### [DisplayContainerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/DisplayContainerComponent) + +- **constructor**(cdr: ChangeDetectorRef, _viewContainer: ViewContainerRef): DisplayContainerComponent +- **_vcr**: `any` +- **_viewContainer**: `ViewContainerRef` +- **cdr**: `ChangeDetectorRef` +- **cssClass**: `string` +- **notVirtual**: `boolean` +- **scrollContainer**: `any` +- **scrollDirection**: `string` + +### [DisplayDensityBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/DisplayDensityBase) + +- **constructor**(displayDensityOptions: IDisplayDensityOptions): DisplayDensityBase +- **onDensityChanged**: `EventEmitter` +- **displayDensity**: `any` +- **ngDoCheck**(): void + +### [ElasticPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/ElasticPositionStrategy) + +- **constructor**(settings?: PositionSettings): ElasticPositionStrategy + +### [FilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/FilteringExpressionsTree) + +- **constructor**(operator: FilteringLogic, fieldName?: string): FilteringExpressionsTree +- **fieldName**: `string` +- **filteringOperands**: `IFilteringExpressionsTree | IFilteringExpression[]` +- **operator**: `FilteringLogic` +- **type**: `FilteringExpressionsTreeType` +- **find**(fieldName: string): IFilteringExpressionsTree | IFilteringExpression +- **findIndex**(fieldName: string): number +- static **empty**(expressionTree: IFilteringExpressionsTree): boolean + +### [FilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/FilteringStrategy) + +- **constructor**(): FilteringStrategy +- **filter**(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): T[] +- static **instance**(): FilteringStrategy + +### [GlobalPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/GlobalPositionStrategy) + +- **constructor**(settings?: PositionSettings): GlobalPositionStrategy +- **settings**: `PositionSettings` +- **clone**(): IPositionStrategy +- **position**(contentElement: HTMLElement, size?: Size, document?: Document, initialCall?: boolean): void + +### [HelperTestFunctions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/HelperTestFunctions) + +- static **CALENDAR**: `string` +- static **CALENDAR_COLUMN_CSSCLASS**: `string` +- static **CALENDAR_CSSCLASS**: `string` +- static **CALENDAR_DATE_CSSCLASS**: `string` +- static **CALENDAR_HEADER_CSSCLASS**: `string` +- static **CALENDAR_HEADER_DATE_CSSCLASS**: `string` +- static **CALENDAR_HEADER_YEAR_CSSCLASS**: `string` +- static **CALENDAR_NEXT_BUTTON_CSSCLASS**: `string` +- static **CALENDAR_PREV_BUTTON_CSSCLASS**: `string` +- static **CALENDAR_ROW_CSSCLASS**: `string` +- static **CALENDAR_ROW_WRAP_CSSCLASS**: `string` +- static **CALENDAR_SUBHEADERS_SELECTOR**: `string` +- static **CURRENT_DATE_CSSCLASS**: `string` +- static **CURRENT_MONTH_CSSCLASS**: `string` +- static **CURRENT_YEAR_CSSCLASS**: `string` +- static **DAYS_VIEW**: `string` +- static **DAY_CSSCLASS**: `string` +- static **HIDDEN_DAYS_CSSCLASS**: `string` +- static **ICON_CSSCLASS**: `string` +- static **INACTIVE_DAYS_CSSCLASS**: `string` +- static **MODAL_OVERLAY_CSSCLASS**: `string` +- static **MONTH_CSSCLASS**: `string` +- static **OVERLAY_CSSCLASS**: `string` +- static **RANGE_CSSCLASS**: `string` +- static **SELECTED_DATE**: `string` +- static **SELECTED_DATE_CSSCLASS**: `string` +- static **VERTICAL_CALENDAR_CSSCLASS**: `string` +- static **WEEKSTART_LABEL_CSSCLASS**: `string` +- static **YEAR_CSSCLASS**: `string` +- static **getCalendarSubHeader**(fixture: any): HTMLElement +- static **getCurrentYearsFromYearView**(fixture: any): any +- static **getHiddenDays**(fixture: any, monthNumber: number): any +- static **getInactiveDays**(fixture: any, monthNumber: number): any +- static **getMonthView**(fixture: any, monthsViewNumber: number): any +- static **getMonthViewDates**(fixture: any, monthsViewNumber: number): any +- static **getMonthViewInactiveDates**(fixture: any, monthsViewNumber: number): any +- static **getMonthViewSelectedDates**(fixture: any, monthsViewNumber: number): any +- static **getMonthsFromMonthView**(fixture: any): any +- static **getNexArrowElement**(fixture: any): any +- static **getPreviousArrowElement**(fixture: any): any +- static **getYearsFromYearView**(fixture: any): any +- static **verifyCalendarHeader**(fixture: any, selectedDate: Date): void +- static **verifyCalendarSubHeader**(fixture: any, monthNumber: number, viewDate: Date): void +- static **verifyCalendarSubHeaders**(fixture: any, viewDates: Date[]): void +- static **verifyDateNotSelected**(el: any): void +- static **verifyDateSelected**(el: any): void +- static **verifyMonthsViewNumber**(fixture: any, monthsView: number, checkCurrentDate: boolean): void +- static **verifyNoRangeSelectionCreated**(fixture: any, monthNumber: number): void + +### [IgxActionIconDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxActionIconDirective) + + +### [IgxAdvancedFilteringDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxAdvancedFilteringDialogComponent) + +- **constructor**(cdr: ChangeDetectorRef): IgxAdvancedFilteringDialogComponent +- **cdr**: `ChangeDetectorRef` +- **grid**: `any` + +### [IgxAppendDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxAppendDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxAppendDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void + +### [IgxAutocompleteDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxAutocompleteDirective) + +- **constructor**(ngModel: NgModel, formControl: FormControlName, group: IgxInputGroupComponent, elementRef: ElementRef, cdr: ChangeDetectorRef): IgxAutocompleteDirective +- **autocompleteSettings**: `AutocompleteOverlaySettings` +- **disabled**: `boolean` +- **onItemSelected**: `EventEmitter` +- **target**: `IgxDropDownComponent` +- **close**(): void +- **open**(): void + +### [IgxAvatarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxAvatarComponent) + +- **constructor**(elementRef: ElementRef): IgxAvatarComponent +- **ariaLabel**: `string` +- **bgColor**: `string` +- **color**: `string` +- **cssClass**: `string` +- **elementRef**: `ElementRef` +- **icon**: `string` +- **id**: `string` +- **image**: `ElementRef` +- **initials**: `string` +- **role**: `string` +- **roleDescription**: `string` +- **roundShape**: `boolean` +- **src**: `string` +- **size**: `any` +- **template**: `any` +- **type**: `any` +- **getSrcUrl**(): string + +### [IgxBadgeComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBadgeComponent) + +- **cssClass**: `string` +- **icon**: `string` +- **id**: `string` +- **label**: `string` +- **role**: `string` +- **type**: `string | IgxBadgeType` +- **value**: `string` + +### [IgxBannerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBannerActionsDirective) + + +### [IgxBannerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBannerComponent) + +- **constructor**(elementRef: ElementRef): IgxBannerComponent +- **elementRef**: `ElementRef` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onOpening**: `EventEmitter` +- **animationSettings**: `any` +- **collapsed**: `any` +- **element**: `any` +- **close**(event?: Event): void +- **open**(event?: Event): void +- **toggle**(event?: Event): void + +### [IgxBaseExporter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBaseExporter) + +- **onColumnExport**: `EventEmitter` +- **onRowExport**: `EventEmitter` +- **export**(grid: any, options: IgxExporterOptionsBase): void +- **exportData**(data: any[], options: IgxExporterOptionsBase): void + +### [IgxBaseTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBaseTransactionService) + +- **onStateUpdate**: `EventEmitter` +- **canRedo**: `any` +- **canUndo**: `any` +- **enabled**: `any` +- **add**(transaction: T, recordRef?: any): void +- **clear**(id?: any): void +- **commit**(data: any[], id?: any): void +- **endPending**(commit: boolean): void +- **getAggregatedChanges**(mergeChanges: boolean): T[] +- **getAggregatedValue**(id: any, mergeChanges: boolean): any +- **getState**(id: any): S +- **getTransactionLog**(id?: any): T[] +- **redo**(): void +- **startPending**(): void +- **undo**(): void + +### [IgxBooleanFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBooleanFilteringOperand) + +- **constructor**(): IgxBooleanFilteringOperand + +### [IgxBottomNavComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxBottomNavComponent) + +- **constructor**(_element: ElementRef): IgxBottomNavComponent +- **contentTabs**: `QueryList` +- **id**: `string` +- **onTabDeselected**: `EventEmitter` +- **onTabSelected**: `EventEmitter` +- **panels**: `QueryList` +- **selectedIndex**: `number` +- **viewTabs**: `QueryList` +- **itemStyle**: `any` +- **selectedTab**: `any` +- **tabs**: `any` + +### [IgxButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxButtonDirective) + +- **constructor**(element: ElementRef, _renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxButtonDirective +- **buttonClick**: `EventEmitter` +- **element**: `ElementRef` +- **role**: `string` +- **selected**: `boolean` +- **background**: `any` +- **color**: `any` +- **disabled**: `any` +- **label**: `any` +- **nativeElement**: `any` +- **type**: `any` + +### [IgxButtonGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxButtonGroupComponent) + +- **constructor**(_cdr: ChangeDetectorRef, _renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxButtonGroupComponent +- **id**: `string` +- **multiSelection**: `boolean` +- **onSelect**: `EventEmitter` +- **onUnselect**: `EventEmitter` +- **values**: `any` +- **alignment**: `any` +- **buttons**: `any` +- **disabled**: `any` +- **isVertical**: `any` +- **itemContentCssClass**: `any` +- **selectedButtons**: `any` +- **deselectButton**(index: number): void +- **selectButton**(index: number): void + +### [IgxCalendarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCalendarComponent) + +- **hasHeader**: `boolean` +- **id**: `string` +- **vertical**: `boolean` +- **context**: `any` +- **headerContext**: `any` +- **headerTemplate**: `any` +- **monthsViewNumber**: `any` +- **subheaderTemplate**: `any` +- **deselectDate**(value?: Date | Date[]): void +- **ngAfterViewInit**(): void + +### [IgxCalendarMonthDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCalendarMonthDirective) + +- **constructor**(elementRef: ElementRef): IgxCalendarMonthDirective +- **date**: `Date` +- **elementRef**: `ElementRef` +- **index**: `any` +- **onMonthSelection**: `EventEmitter` +- **tabindex**: `number` +- **value**: `Date` +- **currentCSS**: `any` +- **defaultCSS**: `any` +- **isCurrentMonth**: `any` +- **nativeElement**: `any` +- **onClick**(): void + +### [IgxCardActionsComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardActionsComponent) + +- **constructor**(card: IgxCardComponent): IgxCardActionsComponent +- **card**: `IgxCardComponent` +- **layout**: `IgxCardActionsLayout | string` +- **reverse**: `boolean` +- **vertical**: `boolean` +- **isJustifyLayout**: `any` +- **ngOnChanges**(changes: SimpleChanges): void +- **ngOnInit**(): void + +### [IgxCardComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardComponent) + +- **horizontal**: `boolean` +- **id**: `string` +- **role**: `string` +- **type**: `IgxCardType | string` +- **isOutlinedCard**: `any` + +### [IgxCardContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardContentDirective) + + +### [IgxCardFooterDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardFooterDirective) + +- **role**: `string` + +### [IgxCardHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardHeaderComponent) + +- **role**: `string` +- **vertical**: `boolean` + +### [IgxCardHeaderSubtitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardHeaderSubtitleDirective) + + +### [IgxCardHeaderTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardHeaderTitleDirective) + + +### [IgxCardMediaDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardMediaDirective) + +- **height**: `string` +- **role**: `string` +- **width**: `string` + +### [IgxCardThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCardThumbnailDirective) + + +### [IgxCarouselComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCarouselComponent) + +- **constructor**(element: ElementRef, iterableDiffers: IterableDiffers, builder: AnimationBuilder, platformUtil: PlatformUtil): IgxCarouselComponent +- **animationType**: `CarouselAnimationType` +- **ariaLabel**: `string` +- **cssClass**: `string` +- **gesturesSupport**: `boolean` +- **id**: `string` +- **indicatorTemplate**: `TemplateRef` +- **indicatorsOrientation**: `CarouselIndicatorsOrientation` +- **keyboardSupport**: `boolean` +- **loop**: `boolean` +- **maximumIndicatorsCount**: `number` +- **navigation**: `boolean` +- **nextButtonTemplate**: `TemplateRef` +- **onCarouselPaused**: `EventEmitter` +- **onCarouselPlaying**: `EventEmitter` +- **onSlideAdded**: `EventEmitter` +- **onSlideChanged**: `EventEmitter` +- **onSlideRemoved**: `EventEmitter` +- **pause**: `boolean` +- **prevButtonTemplate**: `TemplateRef` +- **role**: `string` +- **slides**: `QueryList` +- **current**: `any` +- **interval**: `any` +- **isDestroyed**: `any` +- **isPlaying**: `any` +- **nativeElement**: `any` +- **resourceStrings**: `any` +- **tabIndex**: `any` +- **total**: `any` +- **touchAction**: `any` +- **add**(slide: IgxSlideComponent): void +- **get**(index: number): IgxSlideComponent +- **next**(): void +- **play**(): void +- **prev**(): void +- **remove**(slide: IgxSlideComponent): void +- **select**(slide: IgxSlideComponent, direction: Direction): void +- **stop**(): void + +### [IgxCarouselIndicatorDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCarouselIndicatorDirective) + + +### [IgxCarouselNextButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCarouselNextButtonDirective) + + +### [IgxCarouselPrevButtonDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCarouselPrevButtonDirective) + + +### [IgxCell](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCell) + +- **constructor**(id: any, rowIndex: number, column: any, value: any, editValue: any, rowData: any): IgxCell +- **column**: `any` +- **editValue**: `any` +- **id**: `any` +- **primaryKey**: `any` +- **rowData**: `any` +- **rowIndex**: `number` +- **state**: `any` +- **value**: `any` +- **castToNumber**(value: any): any +- **createEditEventArgs**(): IGridEditEventArgs + +### [IgxCellEditorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCellEditorTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCellEditorTemplateDirective +- **template**: `TemplateRef` + +### [IgxCellHeaderTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCellHeaderTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCellHeaderTemplateDirective +- **template**: `TemplateRef` + +### [IgxCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCellTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCellTemplateDirective +- **template**: `TemplateRef` + +### [IgxCheckboxComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCheckboxComponent) + +- **ariaLabel**: `string | null` +- **ariaLabelledBy**: `string` +- **change**: `EventEmitter` +- **checked**: `boolean` +- **cssClass**: `string` +- **disableRipple**: `boolean` +- **disableTransitions**: `boolean` +- **disabled**: `boolean` +- **focused**: `boolean` +- **id**: `string` +- **indeterminate**: `boolean` +- **labelId**: `string` +- **labelPosition**: `LabelPosition | string` +- **name**: `string` +- **nativeCheckbox**: `ElementRef` +- **nativeLabel**: `any` +- **placeholderLabel**: `any` +- **readonly**: `boolean` +- **required**: `boolean` +- **tabindex**: `number` +- **value**: `any` +- **toggle**(): void + +### [IgxCheckboxRequiredDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCheckboxRequiredDirective) + + +### [IgxChildGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxChildGridRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, element: ElementRef, resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef): IgxChildGridRowComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **expanded**: `boolean` +- **gridAPI**: `GridBaseAPIService` +- **index**: `number` +- **layout**: `IgxRowIslandComponent` +- **rowData**: `any` +- **level**: `any` +- **nativeElement**: `any` +- **parentGrid**: `any` + +### [IgxChipComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxChipComponent) + +- **constructor**(cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions): IgxChipComponent +- **animateOnRelease**: `boolean` +- **cdr**: `ChangeDetectorRef` +- **data**: `any` +- **disabled**: `boolean` +- **dragDirective**: `IgxDragDirective` +- **draggable**: `boolean` +- **elementRef**: `ElementRef` +- **hideBaseOnDrag**: `boolean` +- **id**: `string` +- **onClick**: `EventEmitter` +- **onDragEnter**: `EventEmitter` +- **onKeyDown**: `EventEmitter` +- **onMoveEnd**: `EventEmitter` +- **onMoveStart**: `EventEmitter` +- **onRemove**: `EventEmitter` +- **onSelection**: `EventEmitter` +- **onSelectionDone**: `EventEmitter` +- **removable**: `boolean` +- **removeIcon**: `TemplateRef` +- **selectIcon**: `TemplateRef` +- **selectable**: `boolean` +- **chipTabindex**: `any` +- **color**: `any` +- **selected**: `any` +- **onRemoveMouseDown**(event: PointerEvent | MouseEvent): void +- **onSelectTransitionDone**(event: any): void + +### [IgxChipsAreaComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxChipsAreaComponent) + +- **constructor**(cdr: ChangeDetectorRef, element: ElementRef, _iterableDiffers: IterableDiffers): IgxChipsAreaComponent +- **cdr**: `ChangeDetectorRef` +- **chipsList**: `QueryList` +- **element**: `ElementRef` +- **height**: `number` +- **onMoveEnd**: `EventEmitter` +- **onMoveStart**: `EventEmitter` +- **onReorder**: `EventEmitter` +- **onSelection**: `EventEmitter` +- **width**: `number` + +### [IgxCircularProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCircularProgressBarComponent) + +- **constructor**(renderer: Renderer2, _directionality: IgxDirectionality): IgxCircularProgressBarComponent +- **gradientTemplate**: `IgxProgressBarGradientDirective` +- **id**: `string` +- **indeterminate**: `boolean` +- **text**: `string` +- **textTemplate**: `IgxProcessBarTextTemplateDirective` +- **textVisibility**: `boolean` +- **value**: `any` +- **ngAfterContentInit**(): void +- **ngAfterViewInit**(): void + +### [IgxCollapsibleIndicatorTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCollapsibleIndicatorTemplateDirective) + +- **constructor**(template: TemplateRef): IgxCollapsibleIndicatorTemplateDirective +- **template**: `TemplateRef` + +### [IgxColumnComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnComponent) + +- **constructor**(gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, rowIslandAPI: IgxRowIslandAPIService, elementRef: ElementRef): IgxColumnComponent +- **calcPixelWidth**: `number` +- **cdr**: `ChangeDetectorRef` +- **cellClasses**: `any` +- **cellStyles**: `any` +- **children**: `QueryList` +- **colEnd**: `number` +- **colStart**: `number` +- **dataType**: `DataType` +- **defaultWidth**: `string` +- **disableHiding**: `boolean` +- **disablePinning**: `boolean` +- **elementRef**: `ElementRef` +- **field**: `string` +- **filterable**: `boolean` +- **filteringIgnoreCase**: `boolean` +- **formatter**: `any` +- **gridAPI**: `GridBaseAPIService` +- **gridID**: `string` +- **groupable**: `boolean` +- **header**: `string` +- **headerClasses**: `string` +- **headerGroupClasses**: `string` +- **maxWidth**: `string` +- **movable**: `boolean` +- **parent**: `any` +- **resizable**: `boolean` +- **rowEnd**: `number` +- **rowIslandAPI**: `IgxRowIslandAPIService` +- **rowStart**: `number` +- **searchable**: `boolean` +- **sortable**: `boolean` +- **sortingIgnoreCase**: `boolean` +- **widthSetByUser**: `boolean` +- **allChildren**: `any` +- **bodyTemplate**: `any` +- **cells**: `any` +- **columnGroup**: `any` +- **columnLayout**: `any` +- **columnLayoutChild**: `any` +- **defaultMinWidth**: `any` +- **editable**: `any` +- **filterCell**: `any` +- **filterCellTemplate**: `any` +- **filteringExpressionsTree**: `any` +- **filters**: `any` +- **grid**: `any` +- **gridColumnSpan**: `any` +- **gridRowSpan**: `any` +- **groupingComparer**: `any` +- **hasSummary**: `any` +- **headerCell**: `any` +- **headerGroup**: `any` +- **headerTemplate**: `any` +- **hidden**: `any` +- **index**: `any` +- **inlineEditorTemplate**: `any` +- **isLastPinned**: `any` +- **level**: `any` +- **minWidth**: `any` +- **pinned**: `any` +- **sortStrategy**: `any` +- **summaries**: `any` +- **topLevelParent**: `any` +- **visibleIndex**: `any` +- **visibleWhenCollapsed**: `any` +- **width**: `any` +- **autosize**(): void +- **getFilledChildColumnSizes**(children: QueryList): Array +- **getInitialChildColumnSizes**(children: QueryList): Array +- **getResizableColUnderEnd**(): MRLResizeColumnInfo[] +- **pin**(index?: number): boolean +- **unpin**(index?: number): boolean + +### [IgxColumnGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnGroupComponent) + +- **constructor**(gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, rowIslandAPI: IgxRowIslandAPIService, elementRef: ElementRef): IgxColumnGroupComponent +- **children**: `QueryList` +- **searchable**: `boolean` +- **allChildren**: `any` +- **cells**: `any` +- **collapsible**: `any` +- **collapsibleIndicatorTemplate**: `any` +- **columnGroup**: `any` +- **columnLayout**: `any` +- **expanded**: `any` +- **filters**: `any` +- **hidden**: `any` +- **summaries**: `any` +- **width**: `any` + +### [IgxColumnHidingComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnHidingComponent) + +- **constructor**(cdr: ChangeDetectorRef): IgxColumnHidingComponent +- **cdr**: `ChangeDetectorRef` +- **hideAllText**: `string` +- **onColumnVisibilityChanged**: `EventEmitter` +- **showAllText**: `string` +- **disableHideAll**: `any` +- **disableShowAll**: `any` +- **hiddenColumnsCount**: `any` +- **hideAllColumns**(): void +- **showAllColumns**(): void + +### [IgxColumnHidingModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnHidingModule) + + +### [IgxColumnLayoutComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnLayoutComponent) + +- **constructor**(gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, rowIslandAPI: IgxRowIslandAPIService, elementRef: ElementRef): IgxColumnLayoutComponent +- **childrenVisibleIndexes**: `any[]` +- **columnLayout**: `any` +- **hasLastPinnedChildColumn**: `any` +- **hidden**: `any` +- **visibleIndex**: `any` +- **width**: `any` + +### [IgxColumnMovingDropDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnMovingDropDirective) + +- **constructor**(elementRef: ElementRef, renderer: Renderer2, zone: NgZone, cms: IgxColumnMovingService): IgxColumnMovingDropDirective +- **column**: `any` +- **data**: `any` +- **horizontalScroll**: `any` +- **isDropTarget**: `any` +- **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/9.0.x/classes/IgxColumnMovingModule) + + +### [IgxColumnPinningComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnPinningComponent) + +- **constructor**(cdr: ChangeDetectorRef): IgxColumnPinningComponent +- **cdr**: `ChangeDetectorRef` + +### [IgxColumnPinningItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnPinningItemDirective) + +- **constructor**(): IgxColumnPinningItemDirective +- **pinnable**: `any` +- **pinningDisabled**: `any` + +### [IgxColumnPinningModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxColumnPinningModule) + + +### [IgxComboComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxComboComponent) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _displayDensityOptions: IDisplayDensityOptions, _injector: Injector): IgxComboComponent +- **addItemTemplate**: `TemplateRef` +- **allowCustomValues**: `boolean` +- **ariaLabelledBy**: `string` +- **clearIconTemplate**: `TemplateRef` +- **disabled**: `boolean` +- **emptyTemplate**: `TemplateRef` +- **filterable**: `boolean` +- **footerTemplate**: `TemplateRef` +- **headerItemTemplate**: `TemplateRef` +- **headerTemplate**: `TemplateRef` +- **id**: `string` +- **itemTemplate**: `TemplateRef` +- **itemsWidth**: `string` +- **onAddition**: `EventEmitter` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onDataPreLoad**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onOpening**: `EventEmitter` +- **onSearchInput**: `EventEmitter` +- **onSelectionChange**: `EventEmitter` +- **overlaySettings**: `OverlaySettings` +- **placeholder**: `any` +- **searchPlaceholder**: `string` +- **toggleIconTemplate**: `TemplateRef` +- **type**: `string` +- **valueKey**: `string` +- **width**: `string` +- **collapsed**: `any` +- **data**: `any` +- **displayKey**: `any` +- **groupKey**: `any` +- **itemHeight**: `any` +- **itemsMaxHeight**: `any` +- **totalItemCount**: `any` +- **valid**: `any` +- **value**: `any` +- **virtualizationState**: `any` +- **close**(): void +- **deselectAllItems**(ignoreFilter?: boolean, event?: Event): void +- **deselectItems**(items: Array, event?: Event): void +- **open**(): void +- **selectAllItems**(ignoreFilter?: boolean, event?: Event): void +- **selectItems**(newItems: Array, clearCurrentSelection?: boolean, event?: Event): void +- **selectedItems**(): any[] +- **setSelectedItem**(itemID: any, select: boolean, event?: Event): void +- **toggle**(): void +- **triggerCheck**(): void + +### [IgxCsvExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCsvExporterOptions) + +- **constructor**(fileName: string, fileType: CsvFileTypes): IgxCsvExporterOptions +- **fileType**: `any` +- **valueDelimiter**: `any` + +### [IgxCsvExporterService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxCsvExporterService) + +- **onExportEnded**: `EventEmitter` + +### [IgxDataLoadingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDataLoadingTemplateDirective) + +- **constructor**(template: TemplateRef): IgxDataLoadingTemplateDirective +- **template**: `TemplateRef` + +### [IgxDataRecordSorting](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDataRecordSorting) + + +### [IgxDateFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDateFilteringOperand) + +- **constructor**(): IgxDateFilteringOperand +- static **getDateParts**(date: Date, dateFormat?: string): IDateParts + +### [IgxDatePickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDatePickerActionsDirective) + +- **constructor**(template: TemplateRef): IgxDatePickerActionsDirective +- **template**: `TemplateRef` + +### [IgxDatePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDatePickerComponent) + +- **constructor**(_overlayService: IgxOverlayService, element: ElementRef, _cdr: ChangeDetectorRef, _moduleRef: NgModuleRef, _injector: Injector): IgxDatePickerComponent +- **cancelButtonLabel**: `string` +- **disabled**: `boolean` +- **element**: `ElementRef` +- **formatter**: `any` +- **hideOutsideDays**: `boolean` +- **id**: `string` +- **isSpinLoop**: `boolean` +- **label**: `string` +- **labelVisibility**: `boolean` +- **locale**: `any` +- **mask**: `string` +- **mode**: `InteractionMode` +- **monthsViewNumber**: `number` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onDisabledDate**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onSelection**: `EventEmitter` +- **onValidationFailed**: `EventEmitter` +- **outlet**: `IgxOverlayOutletDirective | ElementRef` +- **todayButtonLabel**: `string` +- **valueChange**: `EventEmitter` +- **vertical**: `boolean` +- **weekStart**: `WEEKDAYS | number` +- **context**: `any` +- **disabledDates**: `any` +- **displayData**: `any` +- **dropDownOverlaySettings**: `any` +- **format**: `any` +- **formatOptions**: `any` +- **formatViews**: `any` +- **modalOverlaySettings**: `any` +- **onClose**: `any` +- **onOpen**: `any` +- **specialDates**: `any` +- **template**: `any` +- **value**: `any` +- **_updateValidityOnBlur**(): void +- **deselectDate**(): void +- **mouseDown**(e: any): void +- **ngAfterViewChecked**(): void +- **openDialog**(target?: HTMLElement): void +- **selectDate**(date: Date): void +- **triggerTodaySelection**(): void + +### [IgxDatePickerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDatePickerTemplateDirective) + +- **constructor**(template: TemplateRef): IgxDatePickerTemplateDirective +- **template**: `TemplateRef` + +### [IgxDateSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDateSummaryOperand) + +- **operate**(data: any[], allData: any[], fieldName?: string): IgxSummaryResult[] +- static **earliest**(data: any[]): any +- static **latest**(data: any[]): any + +### [IgxDaysViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDaysViewComponent) + +- **daysNavService**: `IgxDaysViewNavigationService` +- **id**: `string` + +### [IgxDefaultDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDefaultDropStrategy) + +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void + +### [IgxDialogComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDialogComponent) + +- **constructor**(elementRef: ElementRef, navService: IgxNavigationService): IgxDialogComponent +- **id**: `string` +- **leftButtonBackgroundColor**: `string` +- **leftButtonColor**: `string` +- **leftButtonLabel**: `string` +- **leftButtonRipple**: `string` +- **leftButtonType**: `string` +- **message**: `string` +- **onClose**: `EventEmitter` +- **onLeftButtonSelect**: `EventEmitter` +- **onOpen**: `EventEmitter` +- **onRightButtonSelect**: `EventEmitter` +- **rightButtonBackgroundColor**: `string` +- **rightButtonColor**: `string` +- **rightButtonLabel**: `string` +- **rightButtonRipple**: `string` +- **rightButtonType**: `string` +- **title**: `string` +- **toggleRef**: `IgxToggleDirective` +- **closeOnOutsideSelect**: `any` +- **isCollapsed**: `any` +- **isModal**: `any` +- **isOpen**: `any` +- **positionSettings**: `any` +- **role**: `any` +- **state**: `any` +- **titleId**: `any` +- **close**(): void +- **ngAfterContentInit**(): void +- **open**(overlaySettings: OverlaySettings): void +- **toggle**(): void + +### [IgxDisplayDensityModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDisplayDensityModule) + + +### [IgxDividerDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDividerDirective) + +- **id**: `string` +- **middle**: `boolean` +- **role**: `string` +- **type**: `IgxDividerType | string` +- **vertical**: `boolean` +- **inset**: `any` +- **isDashed**: `any` +- **isSolid**: `any` + +### [IgxDividerModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDividerModule) + + +### [IgxDragDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDragDirective) + +- **constructor**(cdr: ChangeDetectorRef, element: ElementRef, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2): IgxDragDirective +- **cdr**: `ChangeDetectorRef` +- **data**: `any` +- **dragChannel**: `number | string | number[] | string[]` +- **dragClick**: `EventEmitter` +- **dragEnd**: `EventEmitter` +- **dragMove**: `EventEmitter` +- **dragStart**: `EventEmitter` +- **dragTolerance**: `number` +- **element**: `ElementRef` +- **ghost**: `boolean` +- **ghostClass**: `string` +- **ghostCreate**: `EventEmitter` +- **ghostDestroy**: `EventEmitter` +- **ghostHost**: `any` +- **ghostTemplate**: `TemplateRef` +- **renderer**: `Renderer2` +- **transitioned**: `EventEmitter` +- **viewContainer**: `ViewContainerRef` +- **zone**: `NgZone` +- **animateOnRelease**: `any` +- **ghostOffsetX**: `any` +- **ghostOffsetY**: `any` +- **hideBaseOnDrag**: `any` +- **location**: `any` +- **originLocation**: `any` +- **visible**: `any` +- **setLocation**(newLocation: IgxDragLocation): void +- **transitionTo**(target: IgxDragLocation | ElementRef, customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void +- **transitionToOrigin**(customAnimArgs?: IDragCustomTransitionArgs, startLocation?: IgxDragLocation): void + +### [IgxDragHandleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDragHandleDirective) + +- **constructor**(element: ElementRef): IgxDragHandleDirective +- **baseClass**: `boolean` +- **element**: `ElementRef` + +### [IgxDragLocation](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDragLocation) + +- **constructor**(_pageX: any, _pageY: any): IgxDragLocation +- **pageX**: `number` +- **pageY**: `number` + +### [IgxDropDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDirective) + +- **constructor**(element: ElementRef, _renderer: Renderer2, _zone: NgZone): IgxDropDirective +- **data**: `any` +- **dropChannel**: `number | string | number[] | string[]` +- **dropped**: `EventEmitter` +- **element**: `ElementRef` +- **enter**: `EventEmitter` +- **leave**: `EventEmitter` +- **over**: `EventEmitter` +- **dropStrategy**: `any` + +### [IgxDropDownBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownBaseDirective) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef, _displayDensityOptions: IDisplayDensityOptions): IgxDropDownBaseDirective +- **collapsed**: `boolean` +- **height**: `string` +- **id**: `string` +- **maxHeight**: `any` +- **onSelection**: `EventEmitter` +- **width**: `string` +- **element**: `any` +- **headers**: `any` +- **items**: `any` +- **navigateItem**(newIndex: number): void +- **onItemActionKey**(key: DropDownActionKey, event?: Event): void + +### [IgxDropDownComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownComponent) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, _displayDensityOptions: IDisplayDensityOptions): IgxDropDownComponent +- **allowItemsFocus**: `boolean` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onOpening**: `EventEmitter` +- **collapsed**: `any` +- **id**: `any` +- **listId**: `any` +- **selectedItem**: `any` +- **clearSelection**(): void +- **close**(): void +- **navigateItem**(index: number): void +- **ngAfterViewInit**(): void +- **onItemActionKey**(key: DropDownActionKey, event?: Event): void +- **open**(overlaySettings?: OverlaySettings): void +- **setSelectedItem**(index: number): void +- **toggle**(overlaySettings?: OverlaySettings): void + +### [IgxDropDownGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownGroupComponent) + +- **disabled**: `boolean` +- **label**: `string` +- **labelledBy**: `any` + +### [IgxDropDownItemBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownItemBaseDirective) + +- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxDropDownItemBaseDirective +- **id**: `string` +- **isHeader**: `boolean` +- **role**: `string` +- **value**: `any` +- **disabled**: `any` +- **focused**: `any` +- **index**: `any` +- **selected**: `any` +- **ngDoCheck**(): void + +### [IgxDropDownItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownItemComponent) + +- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxDropDownItemComponent +- **focused**: `any` +- **selected**: `any` +- **clicked**(event: any): void + +### [IgxDropDownItemNavigationDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxDropDownItemNavigationDirective) + +- **constructor**(dropdown: IgxDropDownBaseDirective): IgxDropDownItemNavigationDirective +- **dropdown**: `IgxDropDownBaseDirective` +- **target**: `any` +- **handleKeyDown**(event: KeyboardEvent): void +- **onArrowDownKeyDown**(): void +- **onArrowUpKeyDown**(): void +- **onEndKeyDown**(): void +- **onHomeKeyDown**(): void + +### [IgxEmptyListTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxEmptyListTemplateDirective) + +- **constructor**(template: TemplateRef): IgxEmptyListTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelExporterOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelExporterOptions) + +- **constructor**(fileName: string): IgxExcelExporterOptions +- **exportAsTable**: `boolean` +- **ignorePinning**: `boolean` +- **columnWidth**: `any` +- **rowHeight**: `any` + +### [IgxExcelExporterService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelExporterService) + +- **onExportEnded**: `EventEmitter` + +### [IgxExcelStyleHidingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelStyleHidingTemplateDirective) + +- **constructor**(template: TemplateRef): IgxExcelStyleHidingTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelStyleLoadingValuesTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelStyleLoadingValuesTemplateDirective) + +- **constructor**(template: TemplateRef): IgxExcelStyleLoadingValuesTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelStyleMovingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelStyleMovingTemplateDirective) + +- **constructor**(template: TemplateRef): IgxExcelStyleMovingTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelStylePinningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelStylePinningTemplateDirective) + +- **constructor**(template: TemplateRef): IgxExcelStylePinningTemplateDirective +- **template**: `TemplateRef` + +### [IgxExcelStyleSortingTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExcelStyleSortingTemplateDirective) + +- **constructor**(template: TemplateRef): IgxExcelStyleSortingTemplateDirective +- **template**: `TemplateRef` + +### [IgxExpansionPanelBodyComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExpansionPanelBodyComponent) + +- **constructor**(panel: IgxExpansionPanelBase, element: ElementRef, cdr: ChangeDetectorRef): IgxExpansionPanelBodyComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **panel**: `IgxExpansionPanelBase` +- **role**: `string` +- **label**: `any` +- **labelledBy**: `any` + +### [IgxExpansionPanelComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExpansionPanelComponent) + +- **constructor**(cdr: ChangeDetectorRef, builder: AnimationBuilder): IgxExpansionPanelComponent +- **id**: `string` +- **onCollapsed**: `EventEmitter` +- **onExpanded**: `EventEmitter` +- **collapsed**: `any` +- **close**(evt?: Event): void +- **collapse**(evt?: Event): void +- **expand**(evt?: Event): void +- **open**(evt?: Event): void +- **toggle**(evt?: Event): void + +### [IgxExpansionPanelHeaderComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExpansionPanelHeaderComponent) + +- **constructor**(panel: IgxExpansionPanelBase, cdr: ChangeDetectorRef, elementRef: ElementRef): IgxExpansionPanelHeaderComponent +- **cdr**: `ChangeDetectorRef` +- **disabled**: `boolean` +- **elementRef**: `ElementRef` +- **iconPosition**: `ICON_POSITION` +- **id**: `string` +- **lv**: `string` +- **onInteraction**: `EventEmitter` +- **panel**: `IgxExpansionPanelBase` +- **role**: `string` + +### [IgxExporterOptionsBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxExporterOptionsBase) + +- **constructor**(fileName: string, _fileExtension: string): IgxExporterOptionsBase +- **ignoreColumnsOrder**: `boolean` +- **ignoreColumnsVisibility**: `boolean` +- **ignoreFiltering**: `boolean` +- **ignoreSorting**: `boolean` +- **fileName**: `any` + +### [IgxFilterCellTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFilterCellTemplateDirective) + +- **constructor**(template: TemplateRef): IgxFilterCellTemplateDirective +- **template**: `TemplateRef` + +### [IgxFilterDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFilterDirective) + +- **constructor**(element: ElementRef, renderer: Renderer2): IgxFilterDirective +- **filterOptions**: `IgxFilterOptions` +- **filtered**: `EventEmitter` +- **filtering**: `EventEmitter` +- **ngOnChanges**(changes: SimpleChanges): void + +### [IgxFilterOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFilterOptions) + +- **inputValue**: `string` +- **items**: `any[]` +- **key**: `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/9.0.x/classes/IgxFilterPipe) + +- **transform**(items: any[], options: IgxFilterOptions): any[] + +### [IgxFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFilteringOperand) + +- **constructor**(): IgxFilteringOperand +- **operations**: `IFilteringOperation[]` +- **append**(operation: IFilteringOperation): void +- **condition**(name: string): IFilteringOperation +- **conditionList**(): string[] +- static **instance**(): IgxFilteringOperand + +### [IgxFlexDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFlexDirective) + +- **basis**: `string` +- **flex**: `string` +- **grow**: `number` +- **order**: `number` +- **shrink**: `number` + +### [IgxFocusDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxFocusDirective) + +- **constructor**(element: ElementRef, comp?: any[]): IgxFocusDirective +- **focused**: `any` +- **nativeElement**: `any` +- **trigger**(): void + +### [IgxForOfContext](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxForOfContext) + +- **constructor**($implicit: T, index: number, count: number): IgxForOfContext +- **$implicit**: `T` +- **count**: `number` +- **index**: `number` +- **even**: `any` +- **first**: `any` +- **last**: `any` +- **odd**: `any` + +### [IgxForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxForOfDirective) + +- **constructor**(_viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers, resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService): IgxForOfDirective +- **cdr**: `ChangeDetectorRef` +- **igxForContainerSize**: `any` +- **igxForItemSize**: `any` +- **igxForOf**: `any[]` +- **igxForScrollContainer**: `any` +- **igxForScrollOrientation**: `string` +- **igxForSizePropName**: `any` +- **onBeforeViewDestroyed**: `EventEmitter>` +- **onChunkLoad**: `EventEmitter` +- **onChunkPreload**: `EventEmitter` +- **onContentSizeChange**: `EventEmitter` +- **onDataChanged**: `EventEmitter` +- **totalItemCount**: `number` +- **displayContainer**: `any` +- **igxForTotalItemCount**: `any` +- **igxForTrackBy**: `any` +- **scrollPosition**: `any` +- **virtualHelper**: `any` +- **addScrollTop**(addTop: number): boolean +- **getItemCountInView**(): number +- **getScroll**(): any +- **getScrollForIndex**(index: number, bottom?: boolean): number +- **getSizeAt**(index: number): number +- **isScrollable**(): boolean +- **ngAfterViewInit**(): void +- **scrollNext**(): void +- **scrollNextPage**(): void +- **scrollPrev**(): void +- **scrollPrevPage**(): void +- **scrollTo**(index: any): void +- **verticalScrollHandler**(event: any): void + +### [IgxForOfScrollSyncService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxForOfScrollSyncService) + +- **getScrollMaster**(dir: string): VirtualHelperBaseDirective +- **setScrollMaster**(dir: string, scroll: VirtualHelperBaseDirective): void + +### [IgxForOfSyncService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxForOfSyncService) + + +### [IgxGetViewDateCalendar](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGetViewDateCalendar) + +- **constructor**(): IgxGetViewDateCalendar +- **transform**(index: number, viewDate: Date, wholeDate: boolean): number | Date + +### [IgxGridAPIService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridAPIService) + +- **arrange_sorting_expressions**(): void +- **clear_groupby**(name?: string | Array): void +- **get_groupBy_record_id**(gRow: IGroupByRecord): string +- **groupBy**(expression: IGroupingExpression): 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_toggle_group**(groupRow: IGroupByRecord): void + +### [IgxGridBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridBaseDirective) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, _transactions: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxGridBaseDirective +- **_destroyed**: `boolean` +- **advancedFilteringExpressionsTreeChange**: `EventEmitter` +- **autoGenerate**: `boolean` +- **cdr**: `ChangeDetectorRef` +- **colResizingService**: `IgxColumnResizingService` +- **columnHidingTitle**: `string` +- **columnPinningTitle**: `string` +- **crudService**: `IgxGridCRUDService` +- **data**: `any[]` +- **document**: `any` +- **emptyFilteredGridTemplate**: `TemplateRef` +- **emptyGridDefaultTemplate**: `TemplateRef` +- **emptyGridTemplate**: `TemplateRef` +- **evenRowCSS**: `string` +- **filteredData**: `any[]` +- **filteringExpressionsTreeChange**: `EventEmitter` +- **filteringService**: `IgxFilteringService` +- **headerCollapseIndicatorTemplate**: `TemplateRef` +- **headerExpandIndicatorTemplate**: `TemplateRef` +- **loadingGridTemplate**: `TemplateRef` +- **navigation**: `IgxGridNavigationService` +- **oddRowCSS**: `string` +- **onCellClick**: `EventEmitter` +- **onCellEdit**: `EventEmitter` +- **onCellEditCancel**: `EventEmitter` +- **onCellEditEnter**: `EventEmitter` +- **onColumnInit**: `EventEmitter` +- **onColumnMoving**: `EventEmitter` +- **onColumnMovingEnd**: `EventEmitter` +- **onColumnMovingStart**: `EventEmitter` +- **onColumnPinning**: `EventEmitter` +- **onColumnResized**: `EventEmitter` +- **onColumnVisibilityChanged**: `EventEmitter` +- **onContextMenu**: `EventEmitter` +- **onDataPreLoad**: `EventEmitter` +- **onDoubleClick**: `EventEmitter` +- **onFilteringDone**: `EventEmitter` +- **onGridCopy**: `EventEmitter` +- **onGridKeydown**: `EventEmitter` +- **onPagingDone**: `EventEmitter` +- **onRangeSelection**: `EventEmitter` +- **onRowAdded**: `EventEmitter` +- **onRowDeleted**: `EventEmitter` +- **onRowDragEnd**: `EventEmitter` +- **onRowDragStart**: `EventEmitter` +- **onRowEdit**: `EventEmitter` +- **onRowEditCancel**: `EventEmitter` +- **onRowEditEnter**: `EventEmitter` +- **onRowSelectionChange**: `EventEmitter` +- **onRowToggle**: `EventEmitter` +- **onSelection**: `EventEmitter` +- **onSortingDone**: `EventEmitter` +- **onToolbarExporting**: `EventEmitter` +- **pageChange**: `EventEmitter` +- **paginationTemplate**: `TemplateRef` +- **perPageChange**: `EventEmitter` +- **primaryKey**: `any` +- **rowCollapsedIndicatorTemplate**: `TemplateRef` +- **rowExpandedIndicatorTemplate**: `TemplateRef` +- **selectionService**: `IgxGridSelectionService` +- **shouldGenerate**: `boolean` +- **sortingExpressionsChange**: `EventEmitter` +- **summaryService**: `IgxGridSummaryService` +- **toolbar**: `IgxGridToolbarComponent` +- **uniqueColumnValuesStrategy**: `any` +- **advancedFilteringExpressionsTree**: `any` +- **allowAdvancedFiltering**: `any` +- **allowFiltering**: `any` +- **bannerClass**: `any` +- **cellSelection**: `any` +- **columnHiding**: `any` +- **columnPinning**: `any` +- **columnWidth**: `any` +- **columns**: `any` +- **dataRowList**: `any` +- **dataView**: `any` +- **defaultHeaderGroupMinWidth**: `any` +- **defaultRowHeight**: `any` +- **dragIndicatorIconTemplate**: `any` +- **emptyFilteredGridMessage**: `any` +- **emptyGridMessage**: `any` +- **expansionStates**: `any` +- **exportCsv**: `any` +- **exportCsvText**: `any` +- **exportExcel**: `any` +- **exportExcelText**: `any` +- **exportText**: `any` +- **filterCellList**: `any` +- **filterMode**: `any` +- **filterStrategy**: `any` +- **filteredSortedData**: `any` +- **filteringExpressionsTree**: `any` +- **filteringLogic**: `any` +- **hasColumnGroups**: `any` +- **hasColumnLayouts**: `any` +- **hasEditableColumns**: `any` +- **hasFilterableColumns**: `any` +- **hasMovableColumns**: `any` +- **hasSortableColumns**: `any` +- **hasSummarizedColumns**: `any` +- **headerCellList**: `any` +- **headerGroupsList**: `any` +- **headerWidth**: `any` +- **height**: `any` +- **hiddenColumnsCount**: `any` +- **hiddenColumnsText**: `any` +- **hideRowSelectors**: `any` +- **isFirstPage**: `any` +- **isLastPage**: `any` +- **isLoading**: `any` +- **locale**: `any` +- **nativeElement**: `any` +- **page**: `any` +- **paging**: `any` +- **perPage**: `any` +- **pinnedColumns**: `any` +- **pinnedColumnsText**: `any` +- **pinnedWidth**: `any` +- **resourceStrings**: `any` +- **rowDraggable**: `any` +- **rowEditable**: `any` +- **rowHeight**: `any` +- **rowList**: `any` +- **rowSelectable**: `any` +- **rowSelection**: `any` +- **scrollWidth**: `any` +- **selectedCells**: `any` +- **showToolbar**: `any` +- **sortStrategy**: `any` +- **sortingExpressions**: `any` +- **summaryCalculationMode**: `any` +- **summaryPosition**: `any` +- **toolbarCustomContentTemplate**: `any` +- **toolbarTitle**: `any` +- **totalPages**: `any` +- **totalRecords**: `any` +- **totalWidth**: `any` +- **transactions**: `any` +- **unpinnedColumns**: `any` +- **unpinnedWidth**: `any` +- **visibleColumns**: `any` +- **width**: `any` +- **_setupListeners**(): void +- **_setupServices**(): void +- **addRow**(data: any): void +- **clearFilter**(name?: string): void +- **clearSearch**(): void +- **clearSort**(name?: string): void +- **closeAdvancedFilteringDialog**(applyChanges: boolean): void +- **collapseAll**(): void +- **collapseRow**(rowID: any): void +- **deleteRow**(rowSelector: any): void +- **deselectAllRows**(onlyFilterData: boolean): void +- **deselectRows**(rowIDs: any[]): void +- **disableSummaries**(rest: any[]): void +- **enableSummaries**(rest: any[]): void +- **endEdit**(commit: boolean, event?: Event): void +- **expandAll**(): void +- **expandRow**(rowID: any): void +- **filter**(name: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void +- **filterGlobal**(value: any, condition: any, ignoreCase?: any): void +- **findNext**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number +- **findPrev**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number +- **getCellByColumn**(rowIndex: number, columnField: string): IgxGridCellComponent +- **getCellByKey**(rowSelector: any, columnField: string): IgxGridCellComponent +- **getColumnByName**(name: string): IgxColumnComponent +- **getHeaderGroupWidth**(column: IgxColumnComponent): string +- **getNextCell**(currRowIndex: number, curVisibleColIndex: number, callback: any): ICellPosition +- **getPinnedWidth**(takeHidden: boolean): number +- **getPreviousCell**(currRowIndex: number, curVisibleColIndex: number, callback: any): ICellPosition +- **getRowByIndex**(index: number): IgxRowDirective +- **getRowByKey**(keyValue: any): IgxRowDirective +- **getSelectedData**(formatters: boolean, headers: boolean): any[] +- **markForCheck**(): void +- **moveColumn**(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition): void +- **navigateTo**(rowIndex: number, visibleColIndex: number, cb: Function): void +- **nextPage**(): void +- **openAdvancedFilteringDialog**(): void +- **paginate**(val: number): void +- **pinColumn**(columnName: string | IgxColumnComponent, index?: any): boolean +- **previousPage**(): void +- **reflow**(): void +- **refreshSearch**(updateActiveInfo?: boolean, endEdit: boolean): number +- **selectAllRows**(onlyFilterData: boolean): void +- **selectRows**(rowIDs: any[], clearCurrentSelection?: boolean): void +- **selectedRows**(): any[] +- **sort**(expression: ISortingExpression | Array): void +- **toggleColumnVisibility**(args: IColumnVisibilityChangedEventArgs): void +- **toggleRow**(rowID: any): void +- **unpinColumn**(columnName: string | IgxColumnComponent, index?: any): boolean +- **updateCell**(value: any, rowSelector: any, column: string): void +- **updateRow**(value: any, rowSelector: any): void + +### [IgxGridBodyDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridBodyDirective) + + +### [IgxGridCRUDService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridCRUDService) + +- **cell**: `IgxCell | null` +- **grid**: `any` +- **row**: `IgxRow | null` +- **inEditMode**: `any` +- **primaryKey**: `any` +- **rowEditing**: `any` +- **begin**(cell: any): void +- **beginRowEdit**(): void +- **createCell**(cell: any): IgxCell +- **createRow**(cell: IgxCell): IgxRow +- **end**(): void +- **endRowEdit**(): void +- **isInEditMode**(rowIndex: number, columnIndex: number): boolean +- **sameCell**(cell: IgxCell): boolean +- **sameRow**(rowID: any): boolean + +### [IgxGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridCellComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, element: ElementRef, zone: NgZone, touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxGridCellComponent +- **activeHighlightClass**: `string` +- **cdr**: `ChangeDetectorRef` +- **cellTemplate**: `TemplateRef` +- **column**: `ColumnType` +- **editMode**: `boolean` +- **formatter**: `any` +- **gridAPI**: `GridBaseAPIService` +- **highlightClass**: `string` +- **role**: `string` +- **row**: `RowType` +- **rowData**: `any` +- **tabindex**: `number` +- **value**: `any` +- **width**: `string` +- **cellID**: `any` +- **colEnd**: `any` +- **colStart**: `any` +- **columnIndex**: `any` +- **context**: `any` +- **describedby**: `any` +- **dirty**: `any` +- **editValue**: `any` +- **editable**: `any` +- **grid**: `any` +- **gridColumnSpan**: `any` +- **gridID**: `any` +- **gridRowSpan**: `any` +- **inEditMode**: `any` +- **nativeElement**: `any` +- **readonly**: `any` +- **rowEnd**: `any` +- **rowIndex**: `any` +- **rowStart**: `any` +- **selected**: `any` +- **template**: `any` +- **visibleColumnIndex**: `any` +- **clearHighlight**(): void +- **highlightText**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number +- **isCellSelected**(): boolean +- **setEditMode**(value: boolean): void +- **update**(val: any): void + +### [IgxGridColumnModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridColumnModule) + + +### [IgxGridColumnResizerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridColumnResizerComponent) + +- **constructor**(colResizingService: IgxColumnResizingService): IgxGridColumnResizerComponent +- **colResizingService**: `IgxColumnResizingService` +- **resizer**: `IgxColumnResizerDirective` + +### [IgxGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, _transactions: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxGridComponent +- **dropAreaTemplate**: `TemplateRef` +- **groupsExpanded**: `boolean` +- **groupsRecords**: `IGroupByRecord[]` +- **onGroupingDone**: `EventEmitter` +- **data**: `any` +- **dropAreaMessage**: `any` +- **dropAreaVisible**: `any` +- **filteredData**: `any` +- **groupAreaTemplate**: `any` +- **groupRowTemplate**: `any` +- **groupingExpansionState**: `any` +- **groupingExpressions**: `any` +- **groupsRowList**: `any` +- **hasGroupableColumns**: `any` +- **hideGroupedColumns**: `any` +- **id**: `any` +- **totalItemCount**: `any` +- **clearGrouping**(name?: string | Array): void +- **fullyExpandGroup**(groupRow: IGroupByRecord): void +- **getSelectedData**(formatters: boolean, headers: boolean): any[] +- **groupBy**(expression: IGroupingExpression | Array): void +- **isExpandedGroup**(group: IGroupByRecord): boolean +- **onFocusIn**(): void +- **toggleAllGroupRows**(): void +- **toggleGroup**(groupRow: IGroupByRecord): void + +### [IgxGridDragSelectDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridDragSelectDirective) + +- **constructor**(ref: ElementRef, zone: NgZone): IgxGridDragSelectDirective +- **_activeDrag**: `boolean` +- **onDragScroll**: `EventEmitter` +- **onDragStop**: `EventEmitter` +- **activeDrag**: `any` +- **clientRect**: `any` +- **nativeElement**: `any` +- **_measureDimensions**(x: number, y: number): DragScrollDirection +- **ngOnDestroy**(): void +- **ngOnInit**(): void +- **startDragSelection**(ev: PointerEvent): void +- **stopDragSelection**(): void + +### [IgxGridExcelStyleFilteringComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridExcelStyleFilteringComponent) + +- **constructor**(cdr: ChangeDetectorRef, element: ElementRef): IgxGridExcelStyleFilteringComponent +- **column**: `any` + +### [IgxGridExpandableCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridExpandableCellComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, element: ElementRef, zone: NgZone, touchManager: HammerGesturesManager, document: any, platformUtil: PlatformUtil): IgxGridExpandableCellComponent +- **document**: `any` +- **indentationDiv**: `ElementRef` +- **indicator**: `ElementRef` + +### [IgxGridFilteringModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridFilteringModule) + + +### [IgxGridFooterComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridFooterComponent) + + +### [IgxGridForOfDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridForOfDirective) + +- **constructor**(_viewContainer: ViewContainerRef, _template: TemplateRef>, _differs: IterableDiffers, resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService, syncService: IgxForOfSyncService): IgxGridForOfDirective +- **igxGridForOf**: `any` +- **ngDoCheck**(): void +- **ngOnChanges**(changes: SimpleChanges): void +- **ngOnInit**(): void +- **onHScroll**(scrollAmount: any): void +- **onScroll**(event: any): void + +### [IgxGridGroupByRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridGroupByRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, gridSelection: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef): IgxGridGroupByRowComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **gridAPI**: `GridBaseAPIService` +- **gridID**: `string` +- **groupContent**: `ElementRef` +- **groupRow**: `IGroupByRecord` +- **index**: `number` +- **dataRowIndex**: `any` +- **expanded**: `any` +- **focused**: `any` +- **grid**: `any` +- **iconTemplate**: `any` +- **nativeElement**: `any` +- **styleClasses**: `any` +- **toggle**(): void + +### [IgxGridHeadersModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridHeadersModule) + + +### [IgxGridPipesModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridPipesModule) + + +### [IgxGridResizingModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridResizingModule) + + +### [IgxGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, crudService: IgxGridCRUDService, selectionService: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef): IgxGridRowComponent +- **cdr**: `ChangeDetectorRef` +- **crudService**: `IgxGridCRUDService` +- **element**: `ElementRef` +- **gridAPI**: `GridBaseAPIService` +- **selectionService**: `IgxGridSelectionService` +- **cells**: `any` +- **expanded**: `any` +- **hasColumnLayouts**: `any` +- **getContext**(col: any, row: any): any + +### [IgxGridSelectionModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridSelectionModule) + + +### [IgxGridSelectionService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridSelectionService) + +- **constructor**(zone: NgZone): IgxGridSelectionService +- **_ranges**: `Set` +- **_selectionRange**: `Range` +- **activeElement**: `ISelectionNode | null` +- **dragMode**: `boolean` +- **grid**: `any` +- **keyboardState**: `ISelectionKeyboardState` +- **pointerState**: `ISelectionPointerState` +- **rowSelection**: `Set` +- **selection**: `Map>` +- **temp**: `Map>` +- **allData**: `any` +- **filteredSelectedRowIds**: `any` +- **primaryButton**: `any` +- **ranges**: `any` +- **_moveSelectionChrome**(node: Node): void +- **add**(node: ISelectionNode, addToRange: boolean): void +- **addKeyboardRange**(): void +- **addRangeMeta**(node: ISelectionNode, state?: SelectionState): void +- **areAllRowSelected**(): boolean +- **clear**(clearAcriveEl: boolean): void +- **clearAllSelectedRows**(): void +- **clearHeaderCBState**(): void +- **clearRowSelection**(event?: any): void +- **clearTextSelection**(): void +- **deselectRow**(rowID: any, event?: any): void +- **deselectRowsWithNoEvent**(rowIDs: any[]): void +- **dragSelect**(node: ISelectionNode, state: SelectionState): void +- **emitRowSelectionEvent**(newSelection: any, added: any, removed: any, event?: any): boolean +- **generateRange**(node: ISelectionNode, state?: SelectionState): GridSelectionRange +- **getRowDataById**(rowID: any): Object +- **getRowIDs**(data: any): Array +- **getSelectedRows**(): Array +- **hasSomeRowSelected**(): boolean +- **initKeyboardState**(): void +- **initPointerState**(): void +- **isActiveLayout**(current: IMultiRowLayoutNode, target: IMultiRowLayoutNode): boolean +- **isActiveNode**(node: ISelectionNode): boolean +- **isInMap**(node: ISelectionNode): boolean +- **isRowSelected**(rowID: any): boolean +- **keyboardStateOnFocus**(node: ISelectionNode, emitter: EventEmitter, dom: any): void +- **keyboardStateOnKeydown**(node: ISelectionNode, shift: boolean, shiftTab: boolean): void +- **mergeMap**(target: Map>, source: Map>): void +- **pointerDown**(node: ISelectionNode, shift: boolean, ctrl: boolean): void +- **pointerDownShiftKey**(node: ISelectionNode): void +- **pointerEnter**(node: ISelectionNode, event: PointerEvent): boolean +- **pointerUp**(node: ISelectionNode, emitter: EventEmitter): boolean +- **remove**(node: ISelectionNode): void +- **removeRangeMeta**(node: ISelectionNode, state?: SelectionState): void +- **restoreTextSelection**(): void +- **selectAllRows**(event?: any): void +- **selectMultipleRows**(rowID: any, rowData: any, event?: any): void +- **selectRange**(node: ISelectionNode, state: SelectionState, collection: Map>): void +- **selectRowById**(rowID: any, clearPrevSelection?: any, event?: any): void +- **selectRowsWithNoEvent**(rowIDs: any[], clearPrevSelection?: any): void +- **selected**(node: ISelectionNode): boolean + +### [IgxGridSharedModules](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridSharedModules) + + +### [IgxGridStateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridStateDirective) + +- **options**: `any` +- **getState**(serialize: boolean, feature?: string | string[]): IGridState | string +- **setState**(state: IGridState | string): void + +### [IgxGridSummaryModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridSummaryModule) + + +### [IgxGridToolbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridToolbarComponent) + +- **constructor**(gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, excelExporter: IgxExcelExporterService, csvExporter: IgxCsvExporterService, _displayDensityOptions: IDisplayDensityOptions): IgxGridToolbarComponent +- **cdr**: `ChangeDetectorRef` +- **columnHidingButton**: `IgxButtonDirective` +- **columnHidingDropdown**: `IgxDropDownComponent` +- **columnHidingUI**: `IgxColumnHidingComponent` +- **columnPinningButton**: `IgxButtonDirective` +- **columnPinningDropdown**: `IgxDropDownComponent` +- **columnPinningUI**: `IgxColumnPinningComponent` +- **csvExporter**: `IgxCsvExporterService` +- **excelExporter**: `IgxExcelExporterService` +- **exportButton**: `IgxButtonDirective` +- **exportDropdown**: `IgxDropDownComponent` +- **gridAPI**: `GridBaseAPIService` +- **context**: `any` +- **defaultDropDownsMaxHeight**: `any` +- **filterColumnsPrompt**: `any` +- **grid**: `any` +- **hostClass**: `any` +- **pinnedColumnsCount**: `any` +- **shouldShowExportButton**: `any` +- **shouldShowExportCsvButton**: `any` +- **shouldShowExportExcelButton**: `any` +- **exportClicked**(): void +- **exportToCsvClicked**(): void +- **exportToExcelClicked**(): void +- **getExportCsvText**(): string +- **getExportExcelText**(): string +- **getExportText**(): string +- **getTitle**(): string +- **toggleColumnHidingUI**(): void +- **toggleColumnPinningUI**(): void + +### [IgxGridToolbarCustomContentDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridToolbarCustomContentDirective) + +- **constructor**(template: TemplateRef): IgxGridToolbarCustomContentDirective +- **template**: `TemplateRef` + +### [IgxGridToolbarModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGridToolbarModule) + + +### [IgxGrouping](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxGrouping) + +- **groupBy**(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult: IGroupByResult): IGroupByResult + +### [IgxHierarchicalGridAPIService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalGridAPIService) + +- **allow_expansion_state_change**(rowID: any, expanded: any): boolean +- **getChildGrid**(path: Array): any +- **getChildGridByID**(rowIslandKey: any, rowID: any): IgxHierarchicalGridComponent +- **getChildGrids**(inDepth?: boolean): any[] +- **getChildGridsForRowIsland**(rowIslandKey: any): IgxHierarchicalGridComponent[] +- **getChildRowIsland**(key: string): IgxRowIslandComponent +- **getParentRowId**(childGrid: IgxHierarchicalGridComponent): any +- **get_rec_by_id**(rowID: any): any +- **get_row_expansion_state**(record: any): boolean +- **registerChildGrid**(parentRowID: string | object, rowIslandKey: string, grid: IgxHierarchicalGridComponent): void +- **registerChildRowIsland**(rowIsland: IgxRowIslandComponent): void +- **unsetChildRowIsland**(rowIsland: IgxRowIslandComponent): void + +### [IgxHierarchicalGridBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalGridBaseDirective) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, transactionFactory: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxHierarchicalGridBaseDirective +- **colResizingService**: `IgxColumnResizingService` +- **document**: `any` +- **expandChildren**: `boolean` +- **hasChildrenKey**: `string` +- **rootGrid**: `any` +- **selectionService**: `IgxGridSelectionService` +- **showExpandAll**: `boolean` +- **summaryService**: `IgxGridSummaryService` + +### [IgxHierarchicalGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalGridCellComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, helement: ElementRef, zone: NgZone, touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxHierarchicalGridCellComponent +- **cdr**: `ChangeDetectorRef` +- **gridAPI**: `GridBaseAPIService` +- **_clearAllHighlights**(): void +- **ngOnInit**(): void + +### [IgxHierarchicalGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalGridComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, transactionFactory: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxHierarchicalGridComponent +- **data**: `any` +- **expandChildren**: `any` +- **filteredData**: `any` +- **foreignKey**: `any` +- **id**: `any` +- **outletDirective**: `any` +- **getDefaultExpandState**(record: any): boolean +- **ngDoCheck**(): void +- **ngOnDestroy**(): void +- **onContainerScroll**(): void + +### [IgxHierarchicalGridNavigationService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalGridNavigationService) + +- **grid**: `IgxHierarchicalGridComponent` +- **getCellElementByVisibleIndex**(rowIndex: any, visibleColumnIndex: any, isSummary: boolean): any +- **getColumnUnpinnedIndex**(visibleColumnIndex: number, grid?: IgxHierarchicalGridComponent): number +- **getFocusableGrid**(): IgxHierarchicalGridComponent +- **goToFirstCell**(): void +- **goToLastCell**(): void +- **navigateBottom**(visibleColumnIndex: any): void +- **navigateDown**(rowElement: any, selectedNode: ISelectionNode): void +- **navigateNextFilterCell**(column: IgxColumnComponent, eventArgs: any): void +- **navigatePrevFilterCell**(column: IgxColumnComponent, eventArgs: any): void +- **navigateTop**(visibleColumnIndex: any): void +- **navigateUp**(rowElement: any, selectedNode: ISelectionNode): void +- **onKeydownEnd**(rowIndex: any, isSummary: boolean): void +- **performShiftTabKey**(currentRowEl: any, selectedNode: ISelectionNode): void +- **performTab**(currentRowEl: any, selectedNode: ISelectionNode): void + +### [IgxHierarchicalRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, crudService: IgxGridCRUDService, selectionService: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef): IgxHierarchicalRowComponent +- **cells**: `QueryList` +- **expander**: `ElementRef` +- **expanded**: `any` +- **hasChildren**: `any` +- **viewIndex**: `any` +- **toggle**(): void + +### [IgxHierarchicalTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHierarchicalTransactionService) + +- **commit**(data: any[], primaryKey?: any, childDataKey?: any, id?: any): void +- **getAggregatedChanges**(mergeChanges: boolean): T[] + +### [IgxHintDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxHintDirective) + +- **constructor**(_element: ElementRef): IgxHintDirective +- **isPositionEnd**: `boolean` +- **isPositionStart**: `boolean` +- **position**: `any` + +### [IgxIconComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxIconComponent) + +- **constructor**(_el: ElementRef, iconService: IgxIconService, ref: ChangeDetectorRef): IgxIconComponent +- **active**: `boolean` +- **ariaHidden**: `boolean` +- **el**: `ElementRef` +- **font**: `string` +- **iconColor**: `string` +- **iconName**: `string` +- **id**: `string` +- **getActive**: `any` +- **getFontSet**: `any` +- **getIconColor**: `any` +- **getIconName**: `any` +- **getInactive**: `any` +- **getSvgKey**: `any` +- **template**: `any` + +### [IgxIconService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxIconService) + +- **constructor**(_sanitizer: DomSanitizer, _document: any): IgxIconService +- **iconLoaded**: `Observable` +- **defaultFontSet**: `any` +- **addSvgIcon**(iconName: string, url: string, fontSet: string): void +- **addSvgIconFromText**(iconName: string, iconText: string, fontSet: string): void +- **fontSetClassName**(alias: string): string +- **getSvgIconKey**(iconName: string, fontSet: string): string +- **isSvgIconCached**(iconName: string, fontSet: string): boolean +- **registerFontSetAlias**(alias: string, className: string): this + +### [IgxInputDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxInputDirective) + +- **constructor**(inputGroup: IgxInputGroupBase, ngModel: NgModel, formControl: FormControlName, element: ElementRef, cdr: ChangeDetectorRef): IgxInputDirective +- **inputGroup**: `IgxInputGroupBase` +- **isInput**: `boolean` +- **isTextArea**: `boolean` +- **disabled**: `any` +- **focused**: `any` +- **hasPlaceholder**: `any` +- **isValid**: `any` +- **nativeElement**: `any` +- **placeholder**: `any` +- **required**: `any` +- **valid**: `any` +- **value**: `any` +- **focus**(): void + +### [IgxInputGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxInputGroupComponent) + +- **constructor**(_element: ElementRef, _displayDensityOptions: IDisplayDensityOptions): IgxInputGroupComponent +- **defaultClass**: `boolean` +- **disabled**: `boolean` +- **element**: `ElementRef` +- **id**: `string` +- **filled**: `any` +- **hasBorder**: `any` +- **hasHints**: `any` +- **isNotMaterial**: `any` +- **isTypeBootstrap**: `any` +- **isTypeBorder**: `any` +- **isTypeBox**: `any` +- **isTypeFluent**: `any` +- **isTypeFluentSearch**: `any` +- **isTypeLine**: `any` +- **isTypeSearch**: `any` +- **supressInputAutofocus**: `any` +- **type**: `any` + +### [IgxInsertDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxInsertDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxInsertDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void + +### [IgxLabelDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxLabelDirective) + +- **defaultClass**: `boolean` + +### [IgxLayoutDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxLayoutDirective) + +- **dir**: `string` +- **itemAlign**: `string` +- **justify**: `string` +- **reverse**: `boolean` +- **wrap**: `string` + +### [IgxLeftButtonStyleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxLeftButtonStyleDirective) + +- **constructor**(tabs: IgxTabsBase): IgxLeftButtonStyleDirective +- **tabs**: `IgxTabsBase` +- **hiddenCSS**: `any` +- **notDisplayedCSS**: `any` +- **visibleCSS**: `any` + +### [IgxLinearProgressBarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxLinearProgressBarComponent) + +- **constructor**(): IgxLinearProgressBarComponent +- **cssClass**: `string` +- **id**: `string` +- **indeterminate**: `boolean` +- **role**: `string` +- **striped**: `boolean` +- **text**: `string` +- **textAlign**: `IgxTextAlign` +- **textTop**: `boolean` +- **textVisibility**: `boolean` +- **type**: `string` +- **valueMin**: `number` +- **value**: `any` +- **ngAfterContentInit**(): void + +### [IgxListActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListActionDirective) + + +### [IgxListComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListComponent) + +- **constructor**(element: ElementRef, _displayDensityOptions: IDisplayDensityOptions): IgxListComponent +- **allowLeftPanning**: `boolean` +- **allowRightPanning**: `boolean` +- **children**: `QueryList` +- **dataLoadingTemplate**: `IgxDataLoadingTemplateDirective` +- **element**: `ElementRef` +- **emptyListTemplate**: `IgxEmptyListTemplateDirective` +- **id**: `string` +- **isLoading**: `boolean` +- **listItemLeftPanningTemplate**: `IgxListItemLeftPanningTemplateDirective` +- **listItemRightPanningTemplate**: `IgxListItemRightPanningTemplateDirective` +- **onItemClicked**: `EventEmitter` +- **onLeftPan**: `EventEmitter` +- **onPanStateChange**: `EventEmitter` +- **onRightPan**: `EventEmitter` +- **panEndTriggeringThreshold**: `number` +- **context**: `any` +- **headers**: `any` +- **isListEmpty**: `any` +- **items**: `any` +- **role**: `any` +- **template**: `any` + +### [IgxListItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListItemComponent) + +- **constructor**(list: IgxListBaseDirective, elementRef: ElementRef, _renderer: Renderer2): IgxListItemComponent +- **ariaLabel**: `string` +- **hidden**: `boolean` +- **isHeader**: `boolean` +- **leftPanningTemplateElement**: `any` +- **list**: `IgxListBaseDirective` +- **rightPanningTemplateElement**: `any` +- **touchAction**: `string` +- **contentElement**: `any` +- **context**: `any` +- **display**: `any` +- **element**: `any` +- **headerStyle**: `any` +- **index**: `any` +- **innerStyle**: `any` +- **maxLeft**: `any` +- **maxRight**: `any` +- **panState**: `any` +- **role**: `any` +- **width**: `any` + +### [IgxListItemLeftPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListItemLeftPanningTemplateDirective) + +- **constructor**(template: TemplateRef): IgxListItemLeftPanningTemplateDirective +- **template**: `TemplateRef` + +### [IgxListItemRightPanningTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListItemRightPanningTemplateDirective) + +- **constructor**(template: TemplateRef): IgxListItemRightPanningTemplateDirective +- **template**: `TemplateRef` + +### [IgxListLineDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListLineDirective) + + +### [IgxListLineSubTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListLineSubTitleDirective) + +- **cssClass**: `string` + +### [IgxListLineTitleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListLineTitleDirective) + +- **cssClass**: `string` + +### [IgxListThumbnailDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxListThumbnailDirective) + + +### [IgxMaskDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxMaskDirective) + +- **constructor**(elementRef: ElementRef): IgxMaskDirective +- **displayValuePipe**: `PipeTransform` +- **focusedValuePipe**: `PipeTransform` +- **includeLiterals**: `boolean` +- **mask**: `string` +- **onValueChange**: `EventEmitter` +- **promptChar**: `string` +- **placeholder**: `any` + +### [IgxMonthPickerBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxMonthPickerBaseDirective) + +- **activeView**: `any` + +### [IgxMonthPickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxMonthPickerComponent) + +- **id**: `string` +- **selectDate**(value: Date): Date + +### [IgxMonthViewSlotsCalendar](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxMonthViewSlotsCalendar) + +- **transform**(monthViews: number): any[] + +### [IgxMonthsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxMonthsViewComponent) + +- **constructor**(el: ElementRef): IgxMonthsViewComponent +- **date**: `Date` +- **el**: `ElementRef` +- **formatView**: `boolean` +- **id**: `string` +- **onSelection**: `EventEmitter` +- **locale**: `any` +- **monthFormat**: `any` + +### [IgxNavDrawerItemDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavDrawerItemDirective) + + +### [IgxNavDrawerMiniTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavDrawerMiniTemplateDirective) + +- **constructor**(template: TemplateRef): IgxNavDrawerMiniTemplateDirective +- **template**: `TemplateRef` + +### [IgxNavDrawerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavDrawerTemplateDirective) + +- **constructor**(template: TemplateRef): IgxNavDrawerTemplateDirective +- **template**: `TemplateRef` + +### [IgxNavbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavbarComponent) + +- **actionButtonIcon**: `string` +- **id**: `string` +- **onAction**: `EventEmitter` +- **title**: `string` +- **titleId**: `string` +- **isActionButtonVisible**: `any` + +### [IgxNavigationCloseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavigationCloseDirective) + +- **constructor**(nav: IgxNavigationService): IgxNavigationCloseDirective +- **state**: `IgxNavigationService` +- **closeNavigationDrawer**(): void + +### [IgxNavigationDrawerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavigationDrawerComponent) + +- **constructor**(elementRef: ElementRef, _state: IgxNavigationService, renderer: Renderer2, _touchManager: HammerGesturesManager, platformUtil: PlatformUtil): IgxNavigationDrawerComponent +- **closed**: `EventEmitter` +- **closing**: `EventEmitter` +- **enableGestures**: `boolean` +- **id**: `string` +- **miniWidth**: `string` +- **opened**: `EventEmitter` +- **opening**: `EventEmitter` +- **pin**: `boolean` +- **pinChange**: `EventEmitter` +- **pinThreshold**: `number` +- **position**: `string` +- **width**: `string` +- **isOpen**: `any` +- **close**(): void +- **open**(): void +- **toggle**(): void + +### [IgxNavigationService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNavigationService) + +- **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/9.0.x/classes/IgxNavigationToggleDirective) + +- **constructor**(nav: IgxNavigationService): IgxNavigationToggleDirective +- **state**: `IgxNavigationService` +- **toggleNavigationDrawer**(): void + +### [IgxNumberFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNumberFilteringOperand) + +- **constructor**(): IgxNumberFilteringOperand + +### [IgxNumberSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxNumberSummaryOperand) + +- **operate**(data: any[], allData: any[], fieldName?: string): IgxSummaryResult[] +- static **average**(data: any[]): number +- static **max**(data: any[]): number +- static **min**(data: any[]): number +- static **sum**(data: any[]): number + +### [IgxOverlayOutletDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxOverlayOutletDirective) + +- **constructor**(element: ElementRef): IgxOverlayOutletDirective +- **element**: `ElementRef` + +### [IgxOverlayService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxOverlayService) + +- **constructor**(_factoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector, builder: AnimationBuilder, document: any, _zone: NgZone): IgxOverlayService +- **onAnimation**: `EventEmitter` +- **onAppended**: `EventEmitter` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onOpening**: `EventEmitter` +- **attach**(element: ElementRef, settings?: OverlaySettings): string +- **attach**(component: Type, settings?: OverlaySettings, moduleRef?: Pick, any | any>): string +- **hide**(id: string): void +- **hideAll**(): void +- **reposition**(id: string): void +- **setOffset**(id: string, deltaX: number, deltaY: number): void +- **show**(id: string, settings?: OverlaySettings): string +- **show**(component: ElementRef | Type, settings?: OverlaySettings): string + +### [IgxPaginatorComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxPaginatorComponent) + +- **constructor**(_displayDensityOptions: IDisplayDensityOptions): IgxPaginatorComponent +- **dropdownEnabled**: `boolean` +- **dropdownHidden**: `boolean` +- **pageChange**: `EventEmitter` +- **pagerEnabled**: `boolean` +- **pagerHidden**: `boolean` +- **perPageChange**: `EventEmitter` +- **selectLabel**: `any` +- **totalPages**: `number` +- **classComfortable**: `any` +- **classCompact**: `any` +- **classCosy**: `any` +- **isFirstPage**: `any` +- **isLastPage**: `any` +- **page**: `any` +- **perPage**: `any` +- **selectOptions**: `any` +- **totalRecords**: `any` +- **nextPage**(): void +- **paginate**(val: number): void +- **previousPage**(): void + +### [IgxPaginatorModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxPaginatorModule) + + +### [IgxPrependDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxPrependDropStrategy) + +- **constructor**(_renderer: Renderer2): IgxPrependDropStrategy +- **dropAction**(drag: IgxDragDirective, drop: IgxDropDirective, atIndex: number): void + +### [IgxProcessBarTextTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxProcessBarTextTemplateDirective) + +- **constructor**(template: TemplateRef): IgxProcessBarTextTemplateDirective +- **template**: `TemplateRef` + +### [IgxProgressBarGradientDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxProgressBarGradientDirective) + +- **constructor**(template: TemplateRef): IgxProgressBarGradientDirective +- **template**: `TemplateRef` + +### [IgxRadioComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRadioComponent) + +- **constructor**(): IgxRadioComponent +- **ariaLabel**: `string | null` +- **ariaLabelledBy**: `string` +- **change**: `EventEmitter` +- **checked**: `boolean` +- **cssClass**: `string` +- **disableRipple**: `boolean` +- **disabled**: `boolean` +- **focused**: `boolean` +- **id**: `string` +- **labelId**: `string` +- **labelPosition**: `RadioLabelPosition | string` +- **name**: `string` +- **nativeLabel**: `any` +- **nativeRadio**: `ElementRef` +- **placeholderLabel**: `any` +- **required**: `boolean` +- **tabindex**: `number` +- **value**: `any` +- **select**(): void +- **writeValue**(value: any): void + +### [IgxRadioGroupDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRadioGroupDirective) + +- **change**: `EventEmitter` +- **radioButtons**: `QueryList` +- **disabled**: `any` +- **labelPosition**: `any` +- **name**: `any` +- **required**: `any` +- **selected**: `any` +- **value**: `any` +- **ngAfterContentInit**(): void +- **writeValue**(value: any): void + +### [IgxRightButtonStyleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRightButtonStyleDirective) + +- **constructor**(tabs: IgxTabsBase): IgxRightButtonStyleDirective +- **tabs**: `IgxTabsBase` +- **hiddenCSS**: `any` +- **notDisplayedCSS**: `any` +- **visibleCSS**: `any` + +### [IgxRippleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRippleDirective) + +- **constructor**(builder: AnimationBuilder, elementRef: ElementRef, renderer: Renderer2, zone: NgZone): IgxRippleDirective +- **rippleColor**: `string` +- **rippleDisabled**: `boolean` +- **rippleDuration**: `number` +- **rippleTarget**: `string` +- **centered**: `any` + +### [IgxRow](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRow) + +- **constructor**(id: any, index: number, data: any): IgxRow +- **data**: `any` +- **id**: `any` +- **index**: `number` +- **newData**: `any` +- **state**: `any` +- **transactionState**: `any` +- **createEditEventArgs**(): IGridEditEventArgs + +### [IgxRowDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRowDirective) + +- **constructor**(gridAPI: GridBaseAPIService, crudService: IgxGridCRUDService, selectionService: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef): IgxRowDirective +- **cdr**: `ChangeDetectorRef` +- **cells**: `QueryList` +- **crudService**: `IgxGridCRUDService` +- **element**: `ElementRef` +- **gridAPI**: `GridBaseAPIService` +- **index**: `number` +- **selectionService**: `IgxGridSelectionService` +- **dataRowIndex**: `any` +- **grid**: `any` +- **inEditMode**: `any` +- **isSelected**: `any` +- **nativeElement**: `any` +- **rowData**: `any` +- **rowID**: `any` +- **delete**(): void +- **update**(value: any): void + +### [IgxRowDragModule](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRowDragModule) + + +### [IgxRowIslandAPIService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxRowIslandAPIService) + +- **change**: `Subject` +- **rowIsland**: `IgxRowIslandComponent` +- **get**(id: string): IgxRowIslandComponent +- **getChildGridByID**(rowID: any): IgxHierarchicalGridComponent +- **getChildGrids**(inDepth?: boolean): any[] +- **getChildRowIsland**(rowIslandKey: string): IgxRowIslandComponent +- **register**(rowIsland: IgxRowIslandComponent): void +- **registerChildGrid**(parentRowID: string | object, 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/9.0.x/classes/IgxRowIslandComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, transactionFactory: any, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxHierarchicalGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, rowIslandAPI: IgxRowIslandAPIService): IgxRowIslandComponent +- **colResizingService**: `IgxColumnResizingService` +- **data**: `any[]` +- **document**: `any` +- **filteredData**: `any[]` +- **key**: `string` +- **onGridCreated**: `EventEmitter` +- **rowIslandAPI**: `IgxRowIslandAPIService` +- **selectionService**: `IgxGridSelectionService` +- **summaryService**: `IgxGridSummaryService` +- **expandChildren**: `any` + +### [IgxSelectComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSelectComponent) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, _displayDensityOptions: IDisplayDensityOptions, _injector: Injector): IgxSelectComponent +- **disabled**: `boolean` +- **footerTemplate**: `TemplateRef` +- **headerTemplate**: `TemplateRef` +- **overlaySettings**: `OverlaySettings` +- **placeholder**: `any` +- **toggleIconTemplate**: `TemplateRef` +- **type**: `string` +- **value**: `any` +- **open**(overlaySettings?: OverlaySettings): void + +### [IgxSelectGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSelectGroupComponent) + + +### [IgxSelectItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSelectItemComponent) + +- **constructor**(dropDown: IDropDownBase, elementRef: ElementRef, group: IgxDropDownGroupComponent, selection?: IgxSelectionAPIService): IgxSelectItemComponent +- **selected**: `any` +- **text**: `any` +- **ngDoCheck**(): void + +### [IgxSlideComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSlideComponent) + +- **constructor**(elementRef: ElementRef): IgxSlideComponent +- **cssClass**: `string` +- **direction**: `Direction` +- **index**: `number` +- **previous**: `boolean` +- **active**: `any` +- **ariaLive**: `any` +- **ariaSelected**: `any` +- **nativeElement**: `any` +- **tabIndex**: `any` + +### [IgxSliderComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSliderComponent) + +- **constructor**(renderer: Renderer2, _el: ElementRef, _cdr: ChangeDetectorRef, _ngZone: NgZone): IgxSliderComponent +- **id**: `string` +- **onValueChange**: `EventEmitter` +- **onValueChanged**: `EventEmitter` +- **primaryTickLabels**: `boolean` +- **secondaryTickLabels**: `boolean` +- **showTicks**: `boolean` +- **thumbLabelVisibilityDuration**: `number` +- **tickLabelsOrientation**: `TickLabelsOrientation` +- **ticksOrientation**: `TicksOrientation` +- **context**: `any` +- **continuous**: `any` +- **disabled**: `any` +- **isRange**: `any` +- **labels**: `any` +- **labelsViewEnabled**: `any` +- **lowerBound**: `any` +- **lowerLabel**: `any` +- **lowerValue**: `any` +- **maxValue**: `any` +- **minValue**: `any` +- **primaryTicks**: `any` +- **secondaryTicks**: `any` +- **step**: `any` +- **type**: `any` +- **upperBound**: `any` +- **upperLabel**: `any` +- **upperValue**: `any` +- **value**: `any` +- **ngAfterContentInit**(): void +- **ngOnChanges**(changes: any): void +- **setValue**(value: number | IRangeSliderValue): void + +### [IgxSnackbarComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSnackbarComponent) + +- **constructor**(zone: NgZone): IgxSnackbarComponent +- **actionText**: `string` +- **animationDone**: `EventEmitter` +- **animationStarted**: `EventEmitter` +- **autoHide**: `boolean` +- **displayTime**: `number` +- **id**: `string` +- **isVisible**: `boolean` +- **message**: `string` +- **onAction**: `EventEmitter` +- **hide**(): void +- **show**(): void + +### [IgxSorting](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSorting) + +- **sort**(data: any[], expressions: ISortingExpression[]): any[] + +### [IgxStringFilteringOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxStringFilteringOperand) + +- **constructor**(): IgxStringFilteringOperand +- static **applyIgnoreCase**(a: string, ignoreCase: boolean): string + +### [IgxSummaryCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSummaryCellComponent) + +- **constructor**(element: ElementRef): IgxSummaryCellComponent +- **column**: `IgxColumnComponent` +- **density**: `any` +- **firstCellIndentation**: `number` +- **focused**: `boolean` +- **hasSummary**: `boolean` +- **rowIndex**: `number` +- **summaryResults**: `IgxSummaryResult[]` +- **tabindex**: `number` +- **columnDatatype**: `any` +- **describeby**: `any` +- **itemHeight**: `any` +- **nativeElement**: `any` +- **visibleColumnIndex**: `any` +- **width**: `any` +- **dispatchEvent**(event: KeyboardEvent): void +- **onBlur**(): void +- **onFocus**(): void +- **translateSummary**(summary: IgxSummaryResult): string + +### [IgxSummaryDataPipe](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSummaryDataPipe) + +- **constructor**(gridAPI: GridBaseAPIService): IgxSummaryDataPipe +- **transform**(id: string, trigger: number): Map + +### [IgxSummaryOperand](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSummaryOperand) + +- **operate**(data: any[], allData: any[], fieldName?: string): IgxSummaryResult[] +- static **count**(data: any[]): number + +### [IgxSummaryRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSummaryRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, element: ElementRef, cdr: ChangeDetectorRef): IgxSummaryRowComponent +- **cdr**: `ChangeDetectorRef` +- **element**: `ElementRef` +- **firstCellIndentation**: `number` +- **gridAPI**: `GridBaseAPIService` +- **gridID**: `any` +- **index**: `number` +- **summaries**: `Map` +- **summaryCells**: `QueryList` +- **dataRowIndex**: `any` +- **grid**: `any` +- **minHeight**: `any` +- **nativeElement**: `any` +- **getColumnSummaries**(columnName: any): IgxSummaryResult[] +- **ngDoCheck**(): void + +### [IgxSwitchComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSwitchComponent) + +- **ariaLabel**: `string | null` +- **ariaLabelledBy**: `string` +- **change**: `EventEmitter` +- **checked**: `boolean` +- **cssClass**: `string` +- **disableRipple**: `boolean` +- **disabled**: `boolean` +- **focused**: `boolean` +- **id**: `string` +- **labelId**: `string` +- **labelPosition**: `SwitchLabelPosition | string` +- **name**: `string` +- **nativeCheckbox**: `ElementRef` +- **nativeLabel**: `any` +- **placeholderLabel**: `any` +- **required**: `boolean` +- **tabindex**: `number` +- **value**: `any` +- **toggle**(): void + +### [IgxSwitchRequiredDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxSwitchRequiredDirective) + + +### [IgxTabComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabComponent) + +- **constructor**(_tabBar: IgxBottomNavComponent, _element: ElementRef): IgxTabComponent +- **_selected**: `boolean` +- **relatedPanel**: `IgxTabPanelComponent` +- **role**: `string` +- **changesCount**: `any` +- **context**: `any` +- **cssClass**: `any` +- **cssClassDisabled**: `any` +- **cssClassSelected**: `any` +- **disabled**: `any` +- **icon**: `any` +- **index**: `any` +- **isSelected**: `any` +- **label**: `any` +- **template**: `any` +- **elementRef**(): ElementRef +- **select**(): void + +### [IgxTabItemComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabItemComponent) + +- **constructor**(_tabs: IgxTabsBase, _element: ElementRef, _ngZone: NgZone): IgxTabItemComponent +- **relatedGroup**: `IgxTabsGroupComponent` +- **disabled**: `any` +- **icon**: `any` +- **isSelected**: `any` +- **label**: `any` +- **provideCssClass**: `any` +- **provideCssClassDisabled**: `any` +- **provideCssClassSelected**: `any` +- **ngAfterViewInit**(): void +- **ngOnDestroy**(): void + +### [IgxTabItemTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabItemTemplateDirective) + +- **constructor**(template: TemplateRef): IgxTabItemTemplateDirective +- **template**: `TemplateRef` + +### [IgxTabPanelComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabPanelComponent) + +- **constructor**(_tabBar: IgxBottomNavComponent, _element: ElementRef): IgxTabPanelComponent +- **disabled**: `boolean` +- **icon**: `string` +- **label**: `string` +- **role**: `string` +- **changesCount**: `any` +- **customTabTemplate**: `any` +- **index**: `any` +- **isSelected**: `any` +- **itemStyle**: `any` +- **nativeElement**: `any` +- **relatedTab**: `any` +- **styleClass**: `any` +- **select**(): void + +### [IgxTabTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabTemplateDirective) + +- **constructor**(template: TemplateRef): IgxTabTemplateDirective +- **template**: `TemplateRef` + +### [IgxTabsComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabsComponent) + +- **constructor**(_element: ElementRef, _ngZone: NgZone, platformUtil: PlatformUtil): IgxTabsComponent +- **contentTabs**: `QueryList` +- **groups**: `QueryList` +- **id**: `string` +- **onTabItemDeselected**: `EventEmitter` +- **onTabItemSelected**: `EventEmitter` +- **type**: `string | IgxTabsType` +- **viewTabs**: `QueryList` +- **selectedIndex**: `any` +- **selectedTabItem**: `any` +- **tabs**: `any` +- **hideIndicator**(): void + +### [IgxTabsGroupComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTabsGroupComponent) + +- **constructor**(_tabs: IgxTabsBase, _element: ElementRef): IgxTabsGroupComponent +- **disabled**: `boolean` +- **icon**: `string` +- **label**: `string` +- **index**: `any` +- **isSelected**: `any` +- **nativeElement**: `any` +- **relatedTab**: `any` +- **select**(): void + +### [IgxTextHighlightDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTextHighlightDirective) + +- **constructor**(element: ElementRef, renderer: Renderer2): IgxTextHighlightDirective +- **activeCssClass**: `string` +- **column**: `any` +- **cssClass**: `string` +- **groupName**: `string` +- **page**: `number` +- **renderer**: `Renderer2` +- **row**: `any` +- static **highlightGroupsMap**: `Map` +- **value**: `any` +- **activateIfNecessary**(): void +- **clearHighlight**(): void +- **highlight**(text: string, caseSensitive?: boolean, exactMatch?: boolean): number +- **observe**(): void +- static **clearActiveHighlight**(groupName: any): void +- static **setActiveHighlight**(groupName: string, highlight: IActiveHighlightInfo): void + +### [IgxTextSelectionDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTextSelectionDirective) + +- **constructor**(element: ElementRef): IgxTextSelectionDirective +- **nativeElement**: `any` +- **selected**: `any` +- **trigger**(): void + +### [IgxThumbFromTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxThumbFromTemplateDirective) + + +### [IgxThumbLabelComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxThumbLabelComponent) + +- **constructor**(_elementRef: ElementRef): IgxThumbLabelComponent +- **context**: `any` +- **continuous**: `boolean` +- **deactiveState**: `boolean` +- **templateRef**: `TemplateRef` +- **type**: `SliderHandle` +- **value**: `number` +- **active**: `any` +- **nativeElement**: `any` +- **thumbFromActiveClass**: `any` +- **thumbFromClass**: `any` +- **thumbToActiveClass**: `any` +- **thumbToClass**: `any` + +### [IgxThumbToTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxThumbToTemplateDirective) + + +### [IgxTickLabelTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTickLabelTemplateDirective) + + +### [IgxTickLabelsPipe](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTickLabelsPipe) + +- **transform**(labels: Array, secondaryTicks: number): any[] + +### [IgxTimePickerActionsDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTimePickerActionsDirective) + +- **constructor**(template: TemplateRef): IgxTimePickerActionsDirective +- **template**: `TemplateRef` + +### [IgxTimePickerComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTimePickerComponent) + +- **constructor**(_injector: Injector, _cdr: ChangeDetectorRef): IgxTimePickerComponent +- **disabled**: `boolean` +- **id**: `string` +- **isSpinLoop**: `boolean` +- **maxValue**: `string` +- **minValue**: `string` +- **mode**: `InteractionMode` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onValidationFailed**: `EventEmitter` +- **onValueChanged**: `EventEmitter` +- **outlet**: `IgxOverlayOutletDirective | ElementRef` +- **promptChar**: `string` +- **vertical**: `boolean` +- **cancelButtonLabel**: `any` +- **context**: `any` +- **displayTime**: `any` +- **format**: `any` +- **itemsDelta**: `any` +- **okButtonLabel**: `any` +- **onClose**: `any` +- **onOpen**: `any` +- **overlaySettings**: `any` +- **resourceStrings**: `any` +- **template**: `any` +- **value**: `any` +- **ampmInView**(): string[] +- **cancelButtonClick**(): void +- **close**(): void +- **hoursInView**(): string[] +- **minutesInView**(): string[] +- **mouseDown**(event: MouseEvent): void +- **ngAfterViewChecked**(): void +- **okButtonClick**(): boolean +- **openDialog**(target?: HTMLElement): void +- **scrollAmPmIntoView**(item: string): void +- **scrollHourIntoView**(item: string): void +- **scrollMinuteIntoView**(item: string): void +- **scrollSecondsIntoView**(item: string): void +- **secondsInView**(): string[] + +### [IgxTimePickerTemplateDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTimePickerTemplateDirective) + +- **constructor**(template: TemplateRef): IgxTimePickerTemplateDirective +- **template**: `TemplateRef` + +### [IgxToastComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxToastComponent) + +- **constructor**(elementRef: ElementRef, navService: IgxNavigationService): IgxToastComponent +- **autoHide**: `boolean` +- **displayTime**: `number` +- **id**: `string` +- **message**: `string` +- **onHidden**: `EventEmitter` +- **onHiding**: `EventEmitter` +- **onShowing**: `EventEmitter` +- **onShown**: `EventEmitter` +- **position**: `IgxToastPosition` +- **role**: `string` +- **element**: `any` +- **isVisible**: `any` +- **hide**(): void +- **mapPositionToClassName**(): any +- **show**(): void +- **toggle**(): void + +### [IgxToggleActionDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxToggleActionDirective) + +- **constructor**(element: ElementRef, navigationService: IgxNavigationService): IgxToggleActionDirective +- **outlet**: `IgxOverlayOutletDirective | ElementRef` +- **overlaySettings**: `OverlaySettings` + +### [IgxToggleDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxToggleDirective) + +- **id**: `string` +- **onAppended**: `EventEmitter` +- **onClosed**: `EventEmitter` +- **onClosing**: `EventEmitter` +- **onOpened**: `EventEmitter` +- **onOpening**: `EventEmitter` +- **close**(): void +- **open**(overlaySettings?: OverlaySettings): void +- **reposition**(): void +- **setOffset**(deltaX: number, deltaY: number): void +- **toggle**(overlaySettings?: OverlaySettings): void + +### [IgxTooltipDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTooltipDirective) + +- **context**: `any` +- **id**: `string` +- **role**: `any` + +### [IgxTooltipTargetDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTooltipTargetDirective) + +- **constructor**(_element: ElementRef, _navigationService: IgxNavigationService): IgxTooltipTargetDirective +- **hideDelay**: `number` +- **onTooltipHide**: `EventEmitter` +- **onTooltipShow**: `EventEmitter` +- **showDelay**: `number` +- **tooltipDisabled**: `boolean` +- **nativeElement**: `any` +- **tooltipHidden**: `any` +- **hideTooltip**(): void +- **showTooltip**(): void + +### [IgxTransactionService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTransactionService) + +- **onStateUpdate**: `EventEmitter` +- **canRedo**: `any` +- **canUndo**: `any` +- **enabled**: `any` +- **add**(transaction: T, recordRef?: any): void +- **clear**(id?: any): void +- **commit**(data: any[], id?: any): void +- **endPending**(commit: boolean): void +- **getAggregatedChanges**(mergeChanges: boolean): T[] +- **getAggregatedValue**(id: any, mergeChanges: boolean): any +- **getState**(id: any, pending: boolean): S +- **getTransactionLog**(id?: any): T[] +- **redo**(): void +- **undo**(): void + +### [IgxTreeGridAPIService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTreeGridAPIService) + +- **allow_expansion_state_change**(rowID: any, expanded: any): boolean +- **deleteRowById**(rowID: any): void +- **deleteRowFromData**(rowID: any, index: number): void +- **expand_path_to_record**(record: ITreeGridRecord): void +- **get_all_data**(transactions?: boolean): any[] +- **get_rec_by_id**(rowID: any): ITreeGridRecord +- **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 + +### [IgxTreeGridCellComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTreeGridCellComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, gridAPI: GridBaseAPIService, cdr: ChangeDetectorRef, element: ElementRef, zone: NgZone, touchManager: HammerGesturesManager, document: any, platformUtil: PlatformUtil): IgxTreeGridCellComponent +- **document**: `any` + +### [IgxTreeGridComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTreeGridComponent) + +- **constructor**(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, _transactions: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxTreeGridComponent +- **cascadeOnDelete**: `boolean` +- **childDataKey**: `any` +- **foreignKey**: `any` +- **hasChildrenKey**: `any` +- **loadChildrenOnDemand**: `any` +- **processedRecords**: `Map` +- **processedRootRecords**: `ITreeGridRecord[]` +- **records**: `Map` +- **rootRecords**: `ITreeGridRecord[]` +- **data**: `any` +- **expansionDepth**: `any` +- **filteredData**: `any` +- **id**: `any` +- **rowLoadingIndicatorTemplate**: `any` +- **transactions**: `any` +- **addRow**(data: any, parentRowID?: any): void +- **collapseAll**(): void +- **expandAll**(): void +- **getDefaultExpandState**(record: ITreeGridRecord): boolean +- **getSelectedData**(formatters: boolean, headers: boolean): any[] +- **ngDoCheck**(): void + +### [IgxTreeGridNavigationService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTreeGridNavigationService) + + +### [IgxTreeGridRowComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxTreeGridRowComponent) + +- **constructor**(gridAPI: GridBaseAPIService, crudService: IgxGridCRUDService, selectionService: IgxGridSelectionService, element: ElementRef, cdr: ChangeDetectorRef): IgxTreeGridRowComponent +- **cells**: `QueryList` +- **expanded**: `any` +- **treeRow**: `any` + +### [IgxYearsViewComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/IgxYearsViewComponent) + +- **constructor**(el: ElementRef): IgxYearsViewComponent +- **date**: `Date` +- **el**: `ElementRef` +- **formatView**: `boolean` +- **id**: `string` +- **onSelection**: `EventEmitter` +- **locale**: `any` +- **yearFormat**: `any` + +### [NoOpScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/NoOpScrollStrategy) + +- **constructor**(scrollContainer?: HTMLElement): NoOpScrollStrategy +- **attach**(): void +- **detach**(): void +- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): void + +### [NoopFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/NoopFilteringStrategy) + +- **filter**(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree): any[] +- static **instance**(): NoopFilteringStrategy + +### [NoopSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/NoopSortingStrategy) + +- **sort**(data: any[], expressions: ISortingExpression[]): any[] +- static **instance**(): NoopSortingStrategy + +### [Point](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/Point) + +- **constructor**(x: number, y: number): Point +- **x**: `number` +- **y**: `number` + +### [ScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/ScrollStrategy) + +- **constructor**(scrollContainer?: HTMLElement): ScrollStrategy +- **attach**(): void +- **detach**(): void +- **initialize**(document: Document, overlayService: IgxOverlayService, id: string): any + +### [TimeDisplayFormatPipe](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/TimeDisplayFormatPipe) + +- **constructor**(timePicker: IgxTimePickerBase): TimeDisplayFormatPipe +- **transform**(value: any): string + +### [TimeInputFormatPipe](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/TimeInputFormatPipe) + +- **constructor**(timePicker: IgxTimePickerBase): TimeInputFormatPipe +- **transform**(value: any): string + +### [TimePickerHammerConfig](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/TimePickerHammerConfig) + + +### [VirtualHelperBaseDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/VirtualHelperBaseDirective) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef): VirtualHelperBaseDirective +- **_size**: `number` +- **cdr**: `ChangeDetectorRef` +- **destroyed**: `any` +- **elementRef**: `ElementRef` +- **scrollAmount**: `number` +- **nativeElement**: `any` +- **size**: `any` +- **ngAfterViewInit**(): void +- **ngOnDestroy**(): void +- **onScroll**(event: any): void + +### [VirtualHelperComponent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/classes/VirtualHelperComponent) + +- **constructor**(elementRef: ElementRef, cdr: ChangeDetectorRef): VirtualHelperComponent +- **_vcr**: `any` +- **cdr**: `ChangeDetectorRef` +- **cssClasses**: `string` +- **elementRef**: `ElementRef` +- **itemsLength**: `number` +- **scrollTop**: `any` + +## Interfaces + +### [AnimationSettings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/AnimationSettings) + +- **closeAnimation**: `AnimationReferenceMetadata` +- **openAnimation**: `AnimationReferenceMetadata` + +### [AutocompleteItemSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/AutocompleteItemSelectionEventArgs) + +- **value**: `string` + +### [AutocompleteOverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/AutocompleteOverlaySettings) + +- **outlet?**: `IgxOverlayOutletDirective | ElementRef` +- **positionStrategy?**: `IPositionStrategy` +- **scrollStrategy?**: `IScrollStrategy` + +### [BannerCancelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/BannerCancelEventArgs) + + +### [BannerEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/BannerEventArgs) + +- **banner**: `IgxBannerComponent` +- **event?**: `Event` + +### [CancelableBrowserEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/CancelableBrowserEventArgs) + +- **event?**: `Event` + +### [CancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/CancelableEventArgs) + +- **cancel**: `boolean` + +### [CarouselAnimationSettings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/CarouselAnimationSettings) + +- **enterAnimation**: `AnimationReferenceMetadata` +- **leaveAnimation**: `AnimationReferenceMetadata` + +### [DateRangeDescriptor](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/DateRangeDescriptor) + +- **dateRange?**: `Date[]` +- **type**: `DateRangeType` + +### [GridSelectionRange](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/GridSelectionRange) + +- **columnEnd**: `string | number` +- **columnStart**: `string | number` +- **rowEnd**: `number` +- **rowStart**: `number` + +### [GridType](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/GridType) + +- **advancedFilteringExpressionsTree**: `IFilteringExpressionsTree` +- **advancedFilteringExpressionsTreeChange**: `EventEmitter` +- **allowFiltering**: `boolean` +- **calcHeight**: `number` +- **columnList**: `any` +- **columns**: `any` +- **dataRowList**: `any` +- **dataView**: `any[]` +- **displayDensity**: `DisplayDensity | string` +- **filterMode**: `FilterMode` +- **filteringService**: `any` +- **firstEditableColumnIndex**: `number` +- **hasDetails**: `boolean` +- **headerContainer**: `any` +- **id**: `string` +- **lastEditableColumnIndex**: `number` +- **locale**: `string` +- **nativeElement**: `HTMLElement` +- **navigation**: `any` +- **outletDirective**: `any` +- **parentVirtDir**: `any` +- **pinnedColumns**: `any` +- **primaryKey**: `any` +- **resourceStrings**: `IGridResourceStrings` +- **rootSummariesEnabled**: `boolean` +- **rowDraggable**: `boolean` +- **rowEditTabs**: `any` +- **rowEditable**: `boolean` +- **rowInEditMode**: `any` +- **rowList**: `any` +- **selectionService**: `any` +- **sortingExpressions**: `ISortingExpression[]` +- **sortingExpressionsChange**: `EventEmitter` +- **summariesRowList**: `any` +- **tbody**: `any` +- **unpinnedColumns**: `any` +- **verticalScrollContainer**: `any` +- **clearSort**: `any` +- **endEdit**: `any` +- **getColumnByName**: `any` +- **isColumnGrouped**: `any` +- **isDetailRecord**: `any` +- **isGroupByRecord**: `any` +- **sort**: `any` + +### [HierarchicalStateRecord](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/HierarchicalStateRecord) + +- **rowID**: `any` + +### [IActiveHighlightInfo](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IActiveHighlightInfo) + +- **column?**: `any` +- **columnIndex?**: `number` +- **index**: `number` +- **page?**: `number` +- **row?**: `any` +- **rowIndex?**: `number` + +### [IAnimationParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IAnimationParams) + +- **delay**: `string` +- **direction?**: `string` +- **duration**: `string` +- **easing**: `any` +- **endAngle?**: `number` +- **endDistance?**: `string` +- **endHeight?**: `string` +- **endOpacity?**: `number` +- **fromPosition?**: `string` +- **fromScale?**: `number` +- **midScale?**: `number` +- **rotateX?**: `number` +- **rotateY?**: `number` +- **rotateZ?**: `number` +- **startAngle?**: `number` +- **startDistance?**: `string` +- **startHeight?**: `string` +- **startOpacity?**: `number` +- **toPosition?**: `string` +- **toScale?**: `number` +- **xPos?**: `string` +- **yPos?**: `string` + +### [IBaseChipEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IBaseChipEventArgs) + +- **originalEvent**: `IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent` +- **owner**: `IgxChipComponent` + +### [IBaseChipsAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IBaseChipsAreaEventArgs) + +- **originalEvent**: `IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent` +- **owner**: `IgxChipsAreaComponent` + +### [IBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IBaseEventArgs) + +- **owner?**: `any` + +### [IButtonGroupEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IButtonGroupEventArgs) + +- **button**: `IgxButtonDirective` +- **index**: `number` + +### [ICachedViewLoadedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ICachedViewLoadedEventArgs) + +- **oldContext**: `any` + +### [ICalendarDate](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ICalendarDate) + +- **date**: `Date` +- **isCurrentMonth**: `boolean` +- **isNextMonth**: `boolean` +- **isPrevMonth**: `boolean` + +### [ICarouselResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ICarouselResourceStrings) + +- **igx_carousel_of?**: `string` + +### [ICellPosition](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ICellPosition) + +- **rowIndex**: `number` +- **visibleColumnIndex**: `number` + +### [IChangeCheckboxEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChangeCheckboxEventArgs) + +- **checkbox**: `IgxCheckboxComponent` +- **checked**: `boolean` + +### [IChangeProgressEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChangeProgressEventArgs) + +- **currentValue**: `number` +- **previousValue**: `number` + +### [IChangeRadioEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChangeRadioEventArgs) + +- **radio**: `IgxRadioComponent` +- **value**: `any` + +### [IChangeSwitchEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChangeSwitchEventArgs) + +- **checked**: `boolean` +- **switch**: `IgxSwitchComponent` + +### [IChipClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipClickEventArgs) + +- **cancel**: `boolean` + +### [IChipEnterDragAreaEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipEnterDragAreaEventArgs) + +- **dragChip**: `IgxChipComponent` + +### [IChipKeyDownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipKeyDownEventArgs) + +- **cancel**: `boolean` +- **originalEvent**: `KeyboardEvent` + +### [IChipSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipSelectEventArgs) + +- **cancel**: `boolean` +- **selected**: `boolean` + +### [IChipsAreaReorderEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipsAreaReorderEventArgs) + +- **chipsArray**: `IgxChipComponent[]` + +### [IChipsAreaSelectEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IChipsAreaSelectEventArgs) + +- **newSelection**: `IgxChipComponent[]` + +### [IColumnExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnExportingEventArgs) + +- **cancel**: `boolean` +- **columnIndex**: `number` +- **field**: `string` +- **header**: `string` +- **skipFormatter**: `boolean` + +### [IColumnMovingEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnMovingEndEventArgs) + +- **source**: `IgxColumnComponent` +- **target**: `IgxColumnComponent` + +### [IColumnMovingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnMovingEventArgs) + +- **cancel**: `boolean` +- **source**: `IgxColumnComponent` + +### [IColumnMovingStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnMovingStartEventArgs) + +- **source**: `IgxColumnComponent` + +### [IColumnResizeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnResizeEventArgs) + +- **column**: `IgxColumnComponent` +- **newWidth**: `string` +- **prevWidth**: `string` + +### [IColumnState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnState) + +- **dataType**: `DataType` +- **editable**: `boolean` +- **field**: `string` +- **filterable**: `boolean` +- **filteringIgnoreCase**: `boolean` +- **groupable**: `boolean` +- **hasSummary**: `boolean` +- **header**: `string` +- **headerClasses**: `string` +- **headerGroupClasses**: `string` +- **hidden**: `boolean` +- **maxWidth**: `string` +- **movable**: `boolean` +- **pinned**: `boolean` +- **resizable**: `boolean` +- **searchable**: `boolean` +- **sortable**: `boolean` +- **sortingIgnoreCase**: `boolean` +- **width**: `any` + +### [IColumnVisibilityChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IColumnVisibilityChangedEventArgs) + +- **column**: `any` +- **newValue**: `boolean` + +### [IComboItemAdditionEvent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IComboItemAdditionEvent) + +- **addedItem**: `any` +- **newCollection**: `any[]` +- **oldCollection**: `any[]` + +### [IComboSelectionChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IComboSelectionChangeEventArgs) + +- **added**: `any[]` +- **displayText**: `string` +- **event?**: `Event` +- **newSelection**: `any[]` +- **oldSelection**: `any[]` +- **removed**: `any[]` + +### [ICsvExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ICsvExportEndedEventArgs) + +- **csvData**: `string` + +### [IDateParts](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDateParts) + +- **day**: `number` +- **hours**: `number` +- **milliseconds**: `number` +- **minutes**: `number` +- **month**: `number` +- **seconds**: `number` +- **year**: `number` + +### [IDatePickerDisabledDateEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDatePickerDisabledDateEventArgs) + +- **currentValue**: `Date` +- **datePicker**: `IgxDatePickerComponent` + +### [IDatePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDatePickerValidationFailedEventArgs) + +- **datePicker**: `IgxDatePickerComponent` +- **prevValue**: `Date` + +### [IDensityChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDensityChangedEventArgs) + +- **newDensity**: `DisplayDensity` +- **oldDensity**: `DisplayDensity` + +### [IDialogEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDialogEventArgs) + +- **dialog**: `IgxDialogComponent` +- **event**: `Event` + +### [IDisplayDensityOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDisplayDensityOptions) + +- **displayDensity**: `DisplayDensity` + +### [IDragBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDragBaseEventArgs) + +- **originalEvent**: `PointerEvent | MouseEvent | TouchEvent` +- **owner**: `IgxDragDirective` +- **pageX**: `number` +- **pageY**: `number` +- **startX**: `number` +- **startY**: `number` + +### [IDragCustomTransitionArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDragCustomTransitionArgs) + +- **delay?**: `number` +- **duration?**: `number` +- **timingFunction?**: `string` + +### [IDragGhostBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDragGhostBaseEventArgs) + +- **cancel**: `boolean` +- **ghostElement**: `any` +- **owner**: `IgxDragDirective` + +### [IDragMoveEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDragMoveEventArgs) + +- **nextPageX**: `number` +- **nextPageY**: `number` + +### [IDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDragStartEventArgs) + +- **cancel**: `boolean` + +### [IDropBaseEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDropBaseEventArgs) + +- **drag**: `IgxDragDirective` +- **dragData**: `any` +- **offsetX**: `number` +- **offsetY**: `number` +- **originalEvent**: `any` +- **owner**: `IgxDropDirective` +- **pageX**: `number` +- **pageY**: `number` +- **startX**: `number` +- **startY**: `number` + +### [IDropDownNavigationDirective](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDropDownNavigationDirective) + +- **target**: `any` +- **handleKeyDown**: `any` +- **onArrowDownKeyDown**: `any` +- **onArrowUpKeyDown**: `any` +- **onEndKeyDown**: `any` +- **onHomeKeyDown**: `any` + +### [IDropDroppedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDropDroppedEventArgs) + +- **cancel**: `boolean` + +### [IDropStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IDropStrategy) + +- **dropAction**: `any` + +### [IExcelExportEndedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IExcelExportEndedEventArgs) + +- **xlsx**: `JSZip` + +### [IExpansionPanelEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IExpansionPanelEventArgs) + +- **event**: `Event` +- **panel**: `IgxExpansionPanelBase` + +### [IFilteringExpression](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFilteringExpression) + +- **condition**: `IFilteringOperation` +- **fieldName**: `string` +- **ignoreCase?**: `boolean` +- **searchVal?**: `any` + +### [IFilteringExpressionsTree](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFilteringExpressionsTree) + +- **fieldName?**: `string` +- **filteringOperands**: `IFilteringExpressionsTree | IFilteringExpression[]` +- **operator**: `FilteringLogic` +- **type?**: `FilteringExpressionsTreeType` +- **find**: `any` +- **findIndex**: `any` + +### [IFilteringOperation](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFilteringOperation) + +- **hidden?**: `boolean` +- **iconName**: `string` +- **isUnary**: `boolean` +- **logic**: `any` +- **name**: `string` + +### [IFilteringState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFilteringState) + +- **advancedExpressionsTree?**: `IFilteringExpressionsTree` +- **expressionsTree**: `IFilteringExpressionsTree` +- **strategy?**: `IFilteringStrategy` + +### [IFilteringStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFilteringStrategy) + +- **filter**: `any` + +### [IForOfDataChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IForOfDataChangingEventArgs) + +- **containerSize**: `number` + +### [IForOfState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IForOfState) + +- **chunkSize?**: `number` +- **startIndex?**: `number` + +### [IFormatOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFormatOptions) + +- **day?**: `string` +- **month?**: `string` +- **weekday?**: `string` +- **year?**: `string` + +### [IFormatViews](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFormatViews) + +- **day?**: `boolean` +- **month?**: `boolean` +- **year?**: `boolean` + +### [IFormattedParts](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFormattedParts) + +- **combined**: `string` +- **literal?**: `string` +- **value**: `string` + +### [IFormattingOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFormattingOptions) + +- **day?**: `string` +- **month?**: `string` +- **weekday?**: `string` +- **year?**: `string` + +### [IFormattingViews](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IFormattingViews) + +- **day?**: `boolean` +- **month?**: `boolean` +- **year?**: `boolean` + +### [IGridCellEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridCellEventArgs) + +- **cell**: `IgxGridCellComponent` +- **event**: `Event` + +### [IGridClipboardEvent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridClipboardEvent) + +- **cancel**: `boolean` +- **data**: `any[]` + +### [IGridCreatedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridCreatedEventArgs) + +- **grid**: `IgxHierarchicalGridComponent` +- **owner**: `IgxRowIslandComponent` +- **parentID**: `any` + +### [IGridDataBindable](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridDataBindable) + +- **data**: `any[]` +- **filteredData**: `any[]` + +### [IGridEditEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridEditEventArgs) + +- **cellID?**: `any` +- **event?**: `Event` +- **newValue?**: `any` +- **oldValue**: `any` +- **rowID**: `any` + +### [IGridKeydownEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridKeydownEventArgs) + +- **cancel**: `boolean` +- **event**: `Event` +- **target**: `Object` +- **targetType**: `GridKeydownTargetType` + +### [IGridResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridResourceStrings) + +- **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_emptyFilteredGrid_message?**: `string` +- **igx_grid_emptyGrid_message?**: `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_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_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_number_filter?**: `string` +- **igx_grid_excel_pin?**: `string` +- **igx_grid_excel_search_placeholder?**: `string` +- **igx_grid_excel_select_all?**: `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_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_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_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_message?**: `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` + +### [IGridSortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridSortingStrategy) + +- **sort**: `any` + +### [IGridState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridState) + +- **advancedFiltering?**: `IFilteringExpressionsTree` +- **cellSelection?**: `GridSelectionRange[]` +- **columns?**: `IColumnState[]` +- **filtering?**: `IFilteringExpressionsTree` +- **groupBy?**: `IGroupingState` +- **paging?**: `IPagingState` +- **rowSelection?**: `any[]` +- **sorting?**: `ISortingExpression[]` + +### [IGridStateOptions](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridStateOptions) + +- **advancedFiltering?**: `boolean` +- **cellSelection?**: `boolean` +- **columns?**: `boolean` +- **filtering?**: `boolean` +- **groupBy?**: `boolean` +- **paging?**: `boolean` +- **rowSelection?**: `boolean` +- **sorting?**: `boolean` + +### [IGridToolbarExportEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGridToolbarExportEventArgs) + +- **cancel**: `boolean` +- **exporter**: `IgxBaseExporter` +- **grid**: `IgxGridBaseDirective` +- **options**: `IgxExporterOptionsBase` + +### [IGroupByExpandState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupByExpandState) + +- **expanded**: `boolean` +- **hierarchy**: `Array` + +### [IGroupByKey](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupByKey) + +- **fieldName**: `string` +- **value**: `any` + +### [IGroupByRecord](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupByRecord) + +- **expression**: `ISortingExpression` +- **groupParent**: `IGroupByRecord` +- **groups?**: `IGroupByRecord[]` +- **height**: `number` +- **level**: `number` +- **records**: `GroupedRecords` +- **value**: `any` + +### [IGroupByResult](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupByResult) + +- **data**: `any[]` +- **metadata**: `IGroupByRecord[]` + +### [IGroupingDoneEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupingDoneEventArgs) + +- **expressions**: `Array | ISortingExpression` +- **groupedColumns**: `Array | IgxColumnComponent` +- **ungroupedColumns**: `Array | IgxColumnComponent` + +### [IGroupingExpression](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupingExpression) + +- **groupingComparer?**: `any` + +### [IGroupingState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IGroupingState) + +- **defaultExpanded**: `boolean` +- **expansion**: `IGroupByExpandState[]` +- **expressions**: `IGroupingExpression[]` + +### [IListChild](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IListChild) + +- **index**: `number` + +### [IListItemClickEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IListItemClickEventArgs) + +- **direction**: `IgxListPanState` +- **event**: `Event` +- **item**: `IgxListItemComponent` + +### [IListItemPanningEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IListItemPanningEventArgs) + +- **direction**: `IgxListPanState` +- **item**: `IgxListItemComponent` +- **keepItem**: `boolean` + +### [IMaskEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IMaskEventArgs) + +- **formattedValue**: `string` +- **rawValue**: `string` + +### [IMultiRowLayoutNode](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IMultiRowLayoutNode) + +- **colEnd**: `number` +- **colStart**: `number` +- **columnVisibleIndex**: `number` +- **rowEnd**: `number` +- **rowStart**: `number` + +### [IPageEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPageEventArgs) + +- **current**: `number` +- **previous**: `number` + +### [IPaginatorResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPaginatorResourceStrings) + +- **igx_paginator_label?**: `string` + +### [IPagingState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPagingState) + +- **index**: `number` +- **metadata?**: `any` +- **recordsPerPage**: `number` + +### [IPanStateChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPanStateChangeEventArgs) + +- **item**: `IgxListItemComponent` +- **newState**: `IgxListPanState` +- **oldState**: `IgxListPanState` + +### [IPathSegment](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPathSegment) + +- **rowID**: `any` +- **rowIslandKey**: `string` + +### [IPinColumnEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPinColumnEventArgs) + +- **column**: `IgxColumnComponent` +- **insertAtIndex**: `number` +- **isPinned**: `boolean` + +### [IPositionStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IPositionStrategy) + +- **settings**: `PositionSettings` +- **clone**: `any` +- **position**: `any` + +### [IRangeSliderValue](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRangeSliderValue) + +- **lower**: `number` +- **upper**: `number` + +### [IResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IResourceStrings) + + +### [IRowDataEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowDataEventArgs) + +- **data**: `any` + +### [IRowDragEndEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowDragEndEventArgs) + +- **animation**: `boolean` +- **dragData**: `IgxRowDirective` +- **dragDirective**: `IgxDragDirective` + +### [IRowDragStartEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowDragStartEventArgs) + +- **dragData**: `IgxRowDirective` +- **dragDirective**: `IgxDragDirective` + +### [IRowExportingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowExportingEventArgs) + +- **cancel**: `boolean` +- **rowData**: `any` +- **rowIndex**: `number` + +### [IRowSelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowSelectionEventArgs) + +- **added**: `any[]` +- **event?**: `Event` +- **newSelection**: `any[]` +- **oldSelection**: `any[]` +- **removed**: `any[]` + +### [IRowToggleEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IRowToggleEventArgs) + +- **cancel**: `boolean` +- **event?**: `Event` +- **expanded**: `boolean` +- **rowID**: `any` + +### [IScrollStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IScrollStrategy) + +- **attach**: `any` +- **detach**: `any` +- **initialize**: `any` + +### [ISearchInfo](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISearchInfo) + +- **activeMatchIndex**: `number` +- **caseSensitive**: `boolean` +- **content**: `string` +- **exactMatch**: `boolean` +- **matchCount**: `number` +- **matchInfoCache**: `any[]` +- **searchText**: `string` +- **searchedText**: `string` + +### [ISelectTabEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISelectTabEventArgs) + +- **panel**: `IgxTabPanelComponent` +- **tab**: `IgxTabComponent` + +### [ISelectionEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISelectionEventArgs) + +- **newSelection**: `IgxDropDownItemBaseDirective` +- **oldSelection**: `IgxDropDownItemBaseDirective` + +### [ISelectionKeyboardState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISelectionKeyboardState) + +- **active**: `boolean` +- **node**: `null | ISelectionNode` +- **range**: `GridSelectionRange` +- **shift**: `boolean` + +### [ISelectionNode](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISelectionNode) + +- **column**: `number` +- **isSummaryRow?**: `boolean` +- **layout?**: `IMultiRowLayoutNode` +- **row**: `number` + +### [ISelectionPointerState](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISelectionPointerState) + +- **ctrl**: `boolean` +- **primaryButton**: `boolean` + +### [ISlideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISlideEventArgs) + +- **carousel**: `IgxCarouselComponent` +- **slide**: `IgxSlideComponent` + +### [ISliderValueChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISliderValueChangeEventArgs) + +- **oldValue**: `number | IRangeSliderValue` +- **value**: `number | IRangeSliderValue` + +### [ISortingExpression](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISortingExpression) + +- **dir**: `SortingDirection` +- **fieldName**: `string` +- **ignoreCase?**: `boolean` +- **strategy?**: `ISortingStrategy` + +### [ISortingStrategy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISortingStrategy) + +- **sort**: `any` + +### [IStartNavigationCell](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IStartNavigationCell) + +- **colStart**: `number` +- **direction**: `NavigationDirection` +- **rowStart**: `number` + +### [ISummaryExpression](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISummaryExpression) + +- **customSummary?**: `any` +- **fieldName**: `string` + +### [ISummaryRecord](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ISummaryRecord) + +- **cellIndentation?**: `number` +- **max?**: `number` +- **summaries**: `Map` + +### [ITimePickerResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ITimePickerResourceStrings) + +- **igx_time_picker_cancel?**: `string` +- **igx_time_picker_ok?**: `string` + +### [IToggleView](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IToggleView) + +- **element**: `any` +- **close**: `any` +- **open**: `any` +- **toggle**: `any` + +### [ITooltipHideEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ITooltipHideEventArgs) + +- **cancel**: `boolean` +- **target**: `IgxTooltipTargetDirective` +- **tooltip**: `IgxTooltipDirective` + +### [ITooltipShowEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ITooltipShowEventArgs) + +- **cancel**: `boolean` +- **target**: `IgxTooltipTargetDirective` +- **tooltip**: `IgxTooltipDirective` + +### [ITreeGridRecord](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/ITreeGridRecord) + +- **children?**: `ITreeGridRecord[]` +- **data**: `any` +- **expanded?**: `boolean` +- **isFilteredOutParent?**: `boolean` +- **level?**: `number` +- **parent?**: `ITreeGridRecord` +- **rowID**: `any` + +### [IValueChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IValueChangedEventArgs) + +- **newValue**: `any` +- **oldValue**: `any` + +### [IViewChangeEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IViewChangeEventArgs) + +- **context**: `any` +- **owner**: `IgxTemplateOutletDirective` +- **view**: `EmbeddedViewRef` + +### [IViewChangingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IViewChangingEventArgs) + +- **key**: `string` +- **monthAction**: `string` +- **nextDate**: `Date` + +### [IgxDragCustomEventDetails](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxDragCustomEventDetails) + +- **originalEvent**: `any` +- **owner**: `IgxDragDirective` +- **pageX**: `number` +- **pageY**: `number` +- **startX**: `number` +- **startY**: `number` + +### [IgxExpansionPanelBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxExpansionPanelBase) + +- **animationSettings**: `any` +- **collapsed**: `boolean` +- **cssClass**: `string` +- **id**: `string` +- **onCollapsed**: `EventEmitter` +- **onExpanded**: `EventEmitter` +- **collapse**: `any` +- **expand**: `any` +- **toggle**: `any` + +### [IgxIconLoadedEvent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxIconLoadedEvent) + +- **fontSet**: `string` +- **name**: `string` +- **value**: `string` + +### [IgxSummaryResult](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxSummaryResult) + +- **key**: `string` +- **label**: `string` +- **summaryResult**: `any` + +### [IgxTimePickerValidationFailedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxTimePickerValidationFailedEventArgs) + +- **currentValue**: `Date` +- **setThroughUI**: `boolean` +- **timePicker**: `IgxTimePickerComponent` + +### [IgxTimePickerValueChangedEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/IgxTimePickerValueChangedEventArgs) + +- **newValue**: `Date` +- **oldValue**: `Date` + +### [MRLColumnSizeInfo](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/MRLColumnSizeInfo) + +- **colEnd**: `number` +- **colSpan**: `number` +- **ref**: `IgxColumnComponent` +- **width**: `number` +- **widthSetByUser**: `boolean` + +### [MRLResizeColumnInfo](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/MRLResizeColumnInfo) + +- **spanUsed**: `number` +- **target**: `IgxColumnComponent` + +### [OverlayAnimationEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/OverlayAnimationEventArgs) + +- **animationPlayer**: `AnimationPlayer` +- **animationType**: `any | any` +- **id**: `string` + +### [OverlayCancelableEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/OverlayCancelableEventArgs) + + +### [OverlayClosingEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/OverlayClosingEventArgs) + + +### [OverlayEventArgs](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/OverlayEventArgs) + +- **componentRef?**: `ComponentRef` +- **id**: `string` + +### [OverlaySettings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/OverlaySettings) + +- **closeOnOutsideClick?**: `boolean` +- **modal?**: `boolean` +- **outlet?**: `IgxOverlayOutletDirective | ElementRef` +- **positionStrategy?**: `IPositionStrategy` +- **scrollStrategy?**: `IScrollStrategy` + +### [PositionSettings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/PositionSettings) + +- **closeAnimation?**: `AnimationReferenceMetadata` +- **horizontalDirection?**: `HorizontalAlignment` +- **horizontalStartPoint?**: `HorizontalAlignment` +- **minSize?**: `Size` +- **openAnimation?**: `AnimationReferenceMetadata` +- **target?**: `Point | HTMLElement` +- **verticalDirection?**: `VerticalAlignment` +- **verticalStartPoint?**: `VerticalAlignment` + +### [RowType](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/RowType) + +- **added**: `boolean` +- **checkboxElement**: `IgxCheckboxComponent` +- **deleted**: `boolean` +- **expanded?**: `boolean` +- **focused**: `boolean` +- **gridID**: `string` +- **index**: `number` +- **nativeElement**: `HTMLElement` +- **rowData**: `any` +- **rowID**: `any` +- **rowSelectable**: `boolean` +- **selected**: `boolean` +- **treeRow?**: `any` + +### [Size](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/Size) + +- **height**: `number` +- **width**: `number` + +### [State](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/State) + +- **recordRef**: `any` +- **type**: `TransactionType` +- **value**: `any` + +### [Transaction](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/Transaction) + +- **id**: `any` +- **newValue**: `any` +- **type**: `TransactionType` + +### [TransactionService](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/interfaces/TransactionService) + +- **canRedo**: `boolean` +- **canUndo**: `boolean` +- **enabled**: `boolean` +- **onStateUpdate?**: `EventEmitter` +- **add**: `any` +- **clear**: `any` +- **commit**: `any` +- **endPending**: `any` +- **getAggregatedChanges**: `any` +- **getAggregatedValue**: `any` +- **getState**: `any` +- **getTransactionLog**: `any` +- **redo**: `any` +- **startPending**: `any` +- **undo**: `any` + +## Type Aliases + +### [CarouselResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/CarouselResourceStringsEN) +`object` + +### [GridResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/GridResourceStringsEN) +`object` + +### [IGX_CHECKBOX_REQUIRED_VALIDATOR](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/IGX_CHECKBOX_REQUIRED_VALIDATOR) +`object` + +### [IGX_SWITCH_REQUIRED_VALIDATOR](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/IGX_SWITCH_REQUIRED_VALIDATOR) +`object` + +### [IgxHierarchicalTransactionServiceFactory](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/IgxHierarchicalTransactionServiceFactory) +`object` + +### [PaginatorResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/PaginatorResourceStringsEN) +`object` + +### [TimePickerResourceStringsEN](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/TimePickerResourceStringsEN) +`object` + +### [baseInParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/baseInParams) +`object` + +### [baseOutParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/baseOutParams) +`object` + +### [baseParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/baseParams) +`object` + +### [blinkParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/blinkParams) +`object` + +### [filteringStateDefaults](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/filteringStateDefaults) +`object` + +### [heartbeatParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/heartbeatParams) +`object` + +### [pulsateParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/pulsateParams) +`object` + +### [swingOutParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/swingOutParams) +`object` + +### [swingParams](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/types/swingParams) +`object` + +## Functions + +### [WatchColumnChanges](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/WatchColumnChanges) +`WatchColumnChanges(): PropertyDecorator` + +### [changei18n](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/changei18n) +`changei18n(resourceStrings: IResourceStrings): void` + +### [clear](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/clear) +`clear(el: any): boolean` + +### [first](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/first) +`first(arr: any): any` + +### [getCurrentResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/getCurrentResourceStrings) +`getCurrentResourceStrings(): IResourceStrings` + +### [getHierarchy](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/getHierarchy) +`getHierarchy(gRow: IGroupByRecord): Array` + +### [getTypeNameForDebugging](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/getTypeNameForDebugging) +`getTypeNameForDebugging(type: any): string` + +### [hierarchicalTransactionServiceFactory](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/hierarchicalTransactionServiceFactory) +`hierarchicalTransactionServiceFactory(): IgxTransactionService` + +### [isChromium](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/isChromium) +`isChromium(): boolean` + +### [isDateInRanges](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/isDateInRanges) +`isDateInRanges(date: Date, ranges: DateRangeDescriptor[]): boolean` + +### [isHierarchyMatch](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/isHierarchyMatch) +`isHierarchyMatch(h1: Array, h2: Array): boolean` + +### [isLeap](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/isLeap) +`isLeap(year: number): boolean` + +### [last](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/last) +`last(arr: any): any` + +### [monthRange](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/monthRange) +`monthRange(year: number, month: number): number[]` + +### [noop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/noop) +`noop(): void` + +### [notifyChanges](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/notifyChanges) +`notifyChanges(repaint: boolean): (Anonymous function)` + +### [range](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/range) +`range(start: number, stop: any, step: number): any[]` + +### [toPercent](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/toPercent) +`toPercent(value: number, max: number): number` + +### [updateResourceStrings](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/updateResourceStrings) +`updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings): void` + +### [valueInRange](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/valueInRange) +`valueInRange(value: number, max: number, min: number): number` + +### [weekDay](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/functions/weekDay) +`weekDay(year: number, month: number, day: number): number` + +## Variables + +### [ADVANCED_FILTERING](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ADVANCED_FILTERING) +`any` + +### [ARROW](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ARROW) +`any` + +### [CELL_SELECTION](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/CELL_SELECTION) +`any` + +### [CHIP_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/CHIP_ID) +`number` + +### [COLUMNS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/COLUMNS) +`any` + +### [DIALOG_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/DIALOG_ID) +`number` + +### [DisplayDensityToken](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/DisplayDensityToken) +`InjectionToken` + +### [EVENT_SUFFIX](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/EVENT_SUFFIX) +`any` + +### [FEBRUARY](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/FEBRUARY) +`1` + +### [FILTERING](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/FILTERING) +`any` + +### [FILTERING_ICONS_FONT_SET](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/FILTERING_ICONS_FONT_SET) +`any` + +### [FILTER_ROW_HEIGHT](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/FILTER_ROW_HEIGHT) +`50` + +### [GROUPBY](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/GROUPBY) +`any` + +### [IGX_COMBO_COMPONENT](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/IGX_COMBO_COMPONENT) +`InjectionToken` + +### [IGX_DROPDOWN_BASE](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/IGX_DROPDOWN_BASE) +`InjectionToken` + +### [ITEMS_COUNT](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ITEMS_COUNT) +`7` + +### [IgxGridTransaction](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/IgxGridTransaction) +`InjectionToken` + +### [MDAYS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/MDAYS) +`number[]` + +### [MINIMUM_COLUMN_WIDTH](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/MINIMUM_COLUMN_WIDTH) +`136` + +### [MIN_ROW_EDITING_COUNT_THRESHOLD](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/MIN_ROW_EDITING_COUNT_THRESHOLD) +`2` + +### [MIN_VALUE](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/MIN_VALUE) +`0` + +### [NAVIGATION_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NAVIGATION_KEYS) +`Set` + +### [NEXT_CIRCULAR_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NEXT_CIRCULAR_ID) +`number` + +### [NEXT_GRADIENT_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NEXT_GRADIENT_ID) +`number` + +### [NEXT_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NEXT_ID) +`number` + +### [NEXT_LINEAR_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NEXT_LINEAR_ID) +`number` + +### [NEXT_TABS_ID](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/NEXT_TABS_ID) +`number` + +### [ONE_PERCENT](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ONE_PERCENT) +`0.01` + +### [PAGING](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/PAGING) +`any` + +### [ROW_COLLAPSE_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ROW_COLLAPSE_KEYS) +`Set` + +### [ROW_EXPAND_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ROW_EXPAND_KEYS) +`Set` + +### [ROW_SELECTION](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ROW_SELECTION) +`any` + +### [SORTING](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/SORTING) +`any` + +### [SUPPORTED_KEYS](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/SUPPORTED_KEYS) +`Set` + +### [Z_INDEX](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/Z_INDEX) +`9999` + +### [base](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/base) +`AnimationMetadata[]` + +### [baseRecipe](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/baseRecipe) +`AnimationMetadata[]` + +### [blink](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/blink) +`AnimationReferenceMetadata` + +### [blinkBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/blinkBase) +`AnimationMetadata[]` + +### [cellActiveClass](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/cellActiveClass) +`any` + +### [cellSelectedClass](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/cellSelectedClass) +`any` + +### [context](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/context) +`any` + +### [fadeIn](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/fadeIn) +`AnimationReferenceMetadata` + +### [fadeOut](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/fadeOut) +`AnimationReferenceMetadata` + +### [flipBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipBottom) +`AnimationReferenceMetadata` + +### [flipHorBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipHorBck) +`AnimationReferenceMetadata` + +### [flipHorFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipHorFwd) +`AnimationReferenceMetadata` + +### [flipLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipLeft) +`AnimationReferenceMetadata` + +### [flipRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipRight) +`AnimationReferenceMetadata` + +### [flipTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipTop) +`AnimationReferenceMetadata` + +### [flipVerBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipVerBck) +`AnimationReferenceMetadata` + +### [flipVerFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/flipVerFwd) +`AnimationReferenceMetadata` + +### [ghostBackgroundClass](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/ghostBackgroundClass) +`any` + +### [gridCellClass](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/gridCellClass) +`any` + +### [growVerIn](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/growVerIn) +`AnimationReferenceMetadata` + +### [growVerOut](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/growVerOut) +`AnimationReferenceMetadata` + +### [heartbeat](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/heartbeat) +`AnimationReferenceMetadata` + +### [heartbeatBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/heartbeatBase) +`AnimationMetadata[]` + +### [nativeValidationAttributes](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/nativeValidationAttributes) +`string[]` + +### [nextId](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/nextId) +`number` + +### [pulsateBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/pulsateBase) +`AnimationMetadata[]` + +### [pulsateBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/pulsateBck) +`AnimationReferenceMetadata` + +### [pulsateFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/pulsateFwd) +`AnimationReferenceMetadata` + +### [require](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/require) +`any` + +### [rotateInBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInBl) +`AnimationReferenceMetadata` + +### [rotateInBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInBottom) +`AnimationReferenceMetadata` + +### [rotateInBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInBr) +`AnimationReferenceMetadata` + +### [rotateInCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInCenter) +`AnimationReferenceMetadata` + +### [rotateInDiagonal1](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInDiagonal1) +`AnimationReferenceMetadata` + +### [rotateInDiagonal2](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInDiagonal2) +`AnimationReferenceMetadata` + +### [rotateInHor](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInHor) +`AnimationReferenceMetadata` + +### [rotateInLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInLeft) +`AnimationReferenceMetadata` + +### [rotateInRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInRight) +`AnimationReferenceMetadata` + +### [rotateInTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInTl) +`AnimationReferenceMetadata` + +### [rotateInTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInTop) +`AnimationReferenceMetadata` + +### [rotateInTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInTr) +`AnimationReferenceMetadata` + +### [rotateInVer](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateInVer) +`AnimationReferenceMetadata` + +### [rotateOutBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutBl) +`AnimationReferenceMetadata` + +### [rotateOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutBottom) +`AnimationReferenceMetadata` + +### [rotateOutBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutBr) +`AnimationReferenceMetadata` + +### [rotateOutCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutCenter) +`AnimationReferenceMetadata` + +### [rotateOutDiagonal1](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutDiagonal1) +`AnimationReferenceMetadata` + +### [rotateOutDiagonal2](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutDiagonal2) +`AnimationReferenceMetadata` + +### [rotateOutHor](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutHor) +`AnimationReferenceMetadata` + +### [rotateOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutLeft) +`AnimationReferenceMetadata` + +### [rotateOutRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutRight) +`AnimationReferenceMetadata` + +### [rotateOutTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutTl) +`AnimationReferenceMetadata` + +### [rotateOutTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutTop) +`AnimationReferenceMetadata` + +### [rotateOutTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutTr) +`AnimationReferenceMetadata` + +### [rotateOutVer](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rotateOutVer) +`AnimationReferenceMetadata` + +### [rowSelectedClass](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/rowSelectedClass) +`any` + +### [scaleInBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInBl) +`AnimationReferenceMetadata` + +### [scaleInBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInBottom) +`AnimationReferenceMetadata` + +### [scaleInBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInBr) +`AnimationReferenceMetadata` + +### [scaleInCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInCenter) +`AnimationReferenceMetadata` + +### [scaleInHorCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInHorCenter) +`AnimationReferenceMetadata` + +### [scaleInHorLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInHorLeft) +`AnimationReferenceMetadata` + +### [scaleInHorRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInHorRight) +`AnimationReferenceMetadata` + +### [scaleInLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInLeft) +`AnimationReferenceMetadata` + +### [scaleInRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInRight) +`AnimationReferenceMetadata` + +### [scaleInTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInTl) +`AnimationReferenceMetadata` + +### [scaleInTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInTop) +`AnimationReferenceMetadata` + +### [scaleInTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInTr) +`AnimationReferenceMetadata` + +### [scaleInVerBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInVerBottom) +`AnimationReferenceMetadata` + +### [scaleInVerCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInVerCenter) +`AnimationReferenceMetadata` + +### [scaleInVerTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleInVerTop) +`AnimationReferenceMetadata` + +### [scaleOutBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutBl) +`AnimationReferenceMetadata` + +### [scaleOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutBottom) +`AnimationReferenceMetadata` + +### [scaleOutBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutBr) +`AnimationReferenceMetadata` + +### [scaleOutCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutCenter) +`AnimationReferenceMetadata` + +### [scaleOutHorCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutHorCenter) +`AnimationReferenceMetadata` + +### [scaleOutHorLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutHorLeft) +`AnimationReferenceMetadata` + +### [scaleOutHorRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutHorRight) +`AnimationReferenceMetadata` + +### [scaleOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutLeft) +`AnimationReferenceMetadata` + +### [scaleOutRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutRight) +`AnimationReferenceMetadata` + +### [scaleOutTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutTl) +`AnimationReferenceMetadata` + +### [scaleOutTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutTop) +`AnimationReferenceMetadata` + +### [scaleOutTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutTr) +`AnimationReferenceMetadata` + +### [scaleOutVerBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutVerBottom) +`AnimationReferenceMetadata` + +### [scaleOutVerCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutVerCenter) +`AnimationReferenceMetadata` + +### [scaleOutVerTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/scaleOutVerTop) +`AnimationReferenceMetadata` + +### [shakeBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeBl) +`AnimationReferenceMetadata` + +### [shakeBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeBottom) +`AnimationReferenceMetadata` + +### [shakeBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeBr) +`AnimationReferenceMetadata` + +### [shakeCenter](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeCenter) +`AnimationReferenceMetadata` + +### [shakeHor](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeHor) +`AnimationReferenceMetadata` + +### [shakeLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeLeft) +`AnimationReferenceMetadata` + +### [shakeRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeRight) +`AnimationReferenceMetadata` + +### [shakeTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeTl) +`AnimationReferenceMetadata` + +### [shakeTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeTop) +`AnimationReferenceMetadata` + +### [shakeTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeTr) +`AnimationReferenceMetadata` + +### [shakeVer](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/shakeVer) +`AnimationReferenceMetadata` + +### [slideInBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInBl) +`AnimationReferenceMetadata` + +### [slideInBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInBottom) +`AnimationReferenceMetadata` + +### [slideInBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInBr) +`AnimationReferenceMetadata` + +### [slideInLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInLeft) +`AnimationReferenceMetadata` + +### [slideInRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInRight) +`AnimationReferenceMetadata` + +### [slideInTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInTl) +`AnimationReferenceMetadata` + +### [slideInTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInTop) +`AnimationReferenceMetadata` + +### [slideInTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideInTr) +`AnimationReferenceMetadata` + +### [slideOutBl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutBl) +`AnimationReferenceMetadata` + +### [slideOutBottom](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutBottom) +`AnimationReferenceMetadata` + +### [slideOutBr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutBr) +`AnimationReferenceMetadata` + +### [slideOutLeft](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutLeft) +`AnimationReferenceMetadata` + +### [slideOutRight](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutRight) +`AnimationReferenceMetadata` + +### [slideOutTl](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutTl) +`AnimationReferenceMetadata` + +### [slideOutTop](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutTop) +`AnimationReferenceMetadata` + +### [slideOutTr](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/slideOutTr) +`AnimationReferenceMetadata` + +### [swingBase](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingBase) +`AnimationMetadata[]` + +### [swingInBottomBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInBottomBck) +`AnimationReferenceMetadata` + +### [swingInBottomFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInBottomFwd) +`AnimationReferenceMetadata` + +### [swingInLeftBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInLeftBck) +`AnimationReferenceMetadata` + +### [swingInLeftFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInLeftFwd) +`AnimationReferenceMetadata` + +### [swingInRightBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInRightBck) +`AnimationReferenceMetadata` + +### [swingInRightFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInRightFwd) +`AnimationReferenceMetadata` + +### [swingInTopBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInTopBck) +`AnimationReferenceMetadata` + +### [swingInTopFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingInTopFwd) +`AnimationReferenceMetadata` + +### [swingOutBottomBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutBottomBck) +`AnimationReferenceMetadata` + +### [swingOutBottomFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutBottomFwd) +`AnimationReferenceMetadata` + +### [swingOutLeftBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutLeftBck) +`AnimationReferenceMetadata` + +### [swingOutLefttFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutLefttFwd) +`AnimationReferenceMetadata` + +### [swingOutRightBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutRightBck) +`AnimationReferenceMetadata` + +### [swingOutRightFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutRightFwd) +`AnimationReferenceMetadata` + +### [swingOutTopBck](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutTopBck) +`AnimationReferenceMetadata` + +### [swingOutTopFwd](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/swingOutTopFwd) +`AnimationReferenceMetadata` + +### [warningShown](https://www.infragistics.com/api/angular/igniteui-angular/9.0.x/variables/warningShown) +`boolean` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/17.5.0/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/17.5.0/llms-full.txt new file mode 100644 index 000000000..00eb035f9 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/17.5.0/llms-full.txt @@ -0,0 +1,97 @@ +# Ignite UI for React v17.5.0 — Full API Reference + +> Complete API reference for the Ignite UI for React package (17.5.0). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions. + +Platform: React +Package: igniteui-react +Version: 17.5.0 + +## Classes + +### [IgrDataGrid](https://www.infragistics.com/api/react/igniteui-react/17.5.0/classes/IgrDataGrid) +Legacy data grid component. + +- **rows**: `any[]` — The row data for the grid. + +### [IgrPieChart](https://www.infragistics.com/api/react/igniteui-react/17.5.0/classes/IgrPieChart) +A pie chart component. + + +### [IgrTreeView](https://www.infragistics.com/api/react/igniteui-react/17.5.0/classes/IgrTreeView) +A tree view component for hierarchical data. + + +## Interfaces + +### [DataGridProps](https://www.infragistics.com/api/react/igniteui-react/17.5.0/interfaces/DataGridProps) +Properties for the DataGrid component. + +- **autoGenerateColumns**: `boolean` + +### [PieChartProps](https://www.infragistics.com/api/react/igniteui-react/17.5.0/interfaces/PieChartProps) +Properties for the PieChart component. + + +### [TreeViewProps](https://www.infragistics.com/api/react/igniteui-react/17.5.0/interfaces/TreeViewProps) +Properties for the TreeView component. + + +## Enumerations + +### [DataGridMode](https://www.infragistics.com/api/react/igniteui-react/17.5.0/enums/DataGridMode) +Data grid display modes. + +- **Standard** = "standard" +- **Compact** = "compact" + +### [ChartLegendPosition](https://www.infragistics.com/api/react/igniteui-react/17.5.0/enums/ChartLegendPosition) +Chart legend position options. + +- **Top** = "top" + +### [TreeNodeState](https://www.infragistics.com/api/react/igniteui-react/17.5.0/enums/TreeNodeState) +Tree node state values. + +- **Expanded** = 1 + +## Type Aliases + +### [GridSettings](https://www.infragistics.com/api/react/igniteui-react/17.5.0/types/GridSettings) +`DataGridProps` +Type alias for grid settings. + +### [ChartConfiguration](https://www.infragistics.com/api/react/igniteui-react/17.5.0/types/ChartConfiguration) +`PieChartProps` +Type alias for chart configuration. + +### [TreeOptions](https://www.infragistics.com/api/react/igniteui-react/17.5.0/types/TreeOptions) +`TreeViewProps` +Type alias for tree options. + +## Functions + +### [initDataGrid](https://www.infragistics.com/api/react/igniteui-react/17.5.0/functions/initDataGrid) +`initDataGrid(): IgrDataGrid` +Initializes a data grid. + +### [createPieChart](https://www.infragistics.com/api/react/igniteui-react/17.5.0/functions/createPieChart) +`createPieChart(): IgrPieChart` +Creates a pie chart. + +### [buildTreeView](https://www.infragistics.com/api/react/igniteui-react/17.5.0/functions/buildTreeView) +`buildTreeView(): IgrTreeView` +Builds a tree view component. + +## Variables + +### [DEFAULT_GRID_MODE](https://www.infragistics.com/api/react/igniteui-react/17.5.0/variables/DEFAULT_GRID_MODE) +`DataGridMode` +Default grid mode constant. + +### [DEFAULT_LEGEND_POSITION](https://www.infragistics.com/api/react/igniteui-react/17.5.0/variables/DEFAULT_LEGEND_POSITION) +`ChartLegendPosition` +Default legend position constant. + +### [LIBRARY_VERSION](https://www.infragistics.com/api/react/igniteui-react/17.5.0/variables/LIBRARY_VERSION) +`string` +Library version string. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/18.0.0/llms-full.txt b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/18.0.0/llms-full.txt new file mode 100644 index 000000000..92e74488a --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs/react-api/igniteui-react/18.0.0/llms-full.txt @@ -0,0 +1,97 @@ +# Ignite UI for React v18.0.0 — Full API Reference + +> Complete API reference for the Ignite UI for React package (18.0.0). This file lists all public classes, interfaces, enumerations, type aliases, functions, and variables with their signatures, parameters, and descriptions. + +Platform: React +Package: igniteui-react +Version: 18.0.0 + +## Classes + +### [IgrGrid](https://www.infragistics.com/api/react/igniteui-react/18.0.0/classes/IgrGrid) +A powerful grid component for React. + +- **data**: `any[]` — The data source for the grid. + +### [IgrChart](https://www.infragistics.com/api/react/igniteui-react/18.0.0/classes/IgrChart) +A chart component for data visualization. + + +### [IgrList](https://www.infragistics.com/api/react/igniteui-react/18.0.0/classes/IgrList) +A list component for displaying items. + + +## Interfaces + +### [GridProps](https://www.infragistics.com/api/react/igniteui-react/18.0.0/interfaces/GridProps) +Properties for the Grid component. + +- **columns**: `any[]` + +### [ChartProps](https://www.infragistics.com/api/react/igniteui-react/18.0.0/interfaces/ChartProps) +Properties for the Chart component. + + +### [ListProps](https://www.infragistics.com/api/react/igniteui-react/18.0.0/interfaces/ListProps) +Properties for the List component. + + +## Enumerations + +### [GridTheme](https://www.infragistics.com/api/react/igniteui-react/18.0.0/enums/GridTheme) +Available grid themes. + +- **Light** = "light" +- **Dark** = "dark" + +### [ChartType](https://www.infragistics.com/api/react/igniteui-react/18.0.0/enums/ChartType) +Available chart types. + +- **Line** = "line" + +### [ListOrientation](https://www.infragistics.com/api/react/igniteui-react/18.0.0/enums/ListOrientation) +List orientation options. + +- **Vertical** = "vertical" + +## Type Aliases + +### [GridConfig](https://www.infragistics.com/api/react/igniteui-react/18.0.0/types/GridConfig) +`GridProps` +Type alias for grid configuration. + +### [ChartOptions](https://www.infragistics.com/api/react/igniteui-react/18.0.0/types/ChartOptions) +`ChartProps` +Type alias for chart options. + +### [ListSettings](https://www.infragistics.com/api/react/igniteui-react/18.0.0/types/ListSettings) +`ListProps` +Type alias for list settings. + +## Functions + +### [createGrid](https://www.infragistics.com/api/react/igniteui-react/18.0.0/functions/createGrid) +`createGrid(): IgrGrid` +Creates a grid component instance. + +### [renderChart](https://www.infragistics.com/api/react/igniteui-react/18.0.0/functions/renderChart) +`renderChart(): IgrChart` +Renders a chart component. + +### [initializeList](https://www.infragistics.com/api/react/igniteui-react/18.0.0/functions/initializeList) +`initializeList(): IgrList` +Initializes a list component. + +## Variables + +### [DEFAULT_THEME](https://www.infragistics.com/api/react/igniteui-react/18.0.0/variables/DEFAULT_THEME) +`GridTheme` +Default theme constant. + +### [DEFAULT_CHART_TYPE](https://www.infragistics.com/api/react/igniteui-react/18.0.0/variables/DEFAULT_CHART_TYPE) +`ChartType` +Default chart type constant. + +### [LIBRARY_VERSION](https://www.infragistics.com/api/react/igniteui-react/18.0.0/variables/LIBRARY_VERSION) +`string` +Library version string. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md index 4042e3b11..e46733089 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md @@ -21,7 +21,7 @@ The following is a basic Angular Accordion example of a FAQ section. It operates In it, you can see how to define an `igx-accrodion` and its [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -31,6 +31,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-1', styleUrls: ['./accordion-sample-1.component.scss'], templateUrl: './accordion-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionSample1Component { @@ -325,7 +326,7 @@ With the Angular [Accordion component](mcp:get_api_reference?platform=angular&co The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the [IgxExpansionPanel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -341,6 +342,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-3', styleUrls: ['./accordion-sample-3.component.scss'], templateUrl: './accordion-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent, IgxCheckboxComponent, FormsModule, IgxSliderComponent, IgxRadioComponent, IgxIconComponent, IgxTimePickerComponent, IgxLabelDirective] }) export class AccordionSample3Component { @@ -515,7 +517,7 @@ In the following Angular accordion example, we are going to create a complex FAQ You can see the result below. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxSwitchComponent } from 'igniteui-angular/switch'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; @@ -525,6 +527,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-sample-2', styleUrls: ['./accordion-sample-2.component.scss'], templateUrl: './accordion-sample-2.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSwitchComponent, FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionSample2Component { @@ -767,7 +770,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxAccordionComponent } from 'igniteui-angular/accordion'; import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel'; import { FormsModule } from '@angular/forms'; @@ -776,6 +779,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-accordion-style', styleUrls: ['./accordion-style.component.scss'], templateUrl: './accordion-style.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent] }) export class AccordionStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md index ed0a07240..70db81e47 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/action-strip.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai ## Angular Action Strip Example ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -25,6 +25,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph', styleUrls: ['./action-strip-paragraph.component.scss'], templateUrl: './action-strip-paragraph.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class ActionStripParagraphComponent { @@ -238,7 +239,7 @@ For scenarios where more than three action items will be shown, it is best to us ``` ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from 'igniteui-angular/action-strip'; import { IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -247,6 +248,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph-menu', styleUrls: ['./action-strip-paragraph-menu.component.scss'], templateUrl: './action-strip-paragraph-menu.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxRippleDirective, IgxIconComponent] }) export class ActionStripParagraphMenuComponent { @@ -394,7 +396,7 @@ This can be utilized via grid action components and we are providing two default > When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxColumnComponent, IgxGridPinningActionsComponent, RowType } from 'igniteui-angular/grids/core'; import { Transaction } from 'igniteui-angular/core'; @@ -409,6 +411,7 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro selector: 'app-grid-row-action-strip', styleUrls: [`grid-action-strip-sample.scss`], templateUrl: 'grid-action-strip-sample.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class GridActionStripSampleComponent { @@ -507,7 +510,7 @@ The last step is to include the newly created component theme in our application ``` ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -516,6 +519,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-action-strip-paragraph-styling', styleUrls: ['./action-strip-paragraph-styling.component.scss'], templateUrl: './action-strip-paragraph-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] }) export class ActionStripStylingComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md index 6a1f1209e..f9975d390 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-ai-assisted-development-overview.md @@ -1,20 +1,99 @@ --- title: AI-Assisted Development with Ignite UI - Ignite UI for Angular -_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli@latest ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-05-03" namespace: Infragistics.Controls mentionedTypes: [] _tocName: Agent Workflow --- + + # AI-Assisted Development with Ignite UI -Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. +Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`igniteui-cli`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` + +The MCP servers and Agent Skills serve different purposes and have different prerequisites: + +| Component | What it provides | Requires Ignite UI installed? | +| -------------------- | -------------------------------------------------------------- | ----------------------------- | +| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No | +| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No | +| Agent Skills | Project-level instruction packages for correct component usage | Yes | + +You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## Configure the AI Toolchain + +Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed. + +```bash +npx igniteui-cli ai-config +``` + +> [!IMPORTANT] +> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. + +If `ai-config` cannot detect the framework from your project files, it prompts you to select one - so the command works even from a project where no Ignite UI package is installed yet. + +After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent. + +### What to Expect + +If Ignite UI is **not** installed in the project: + +> [!NOTE] +> Ignite UI MCP servers configured for your selected clients +> No AI skill files found. Make sure packages are installed (`npm install`) and your Ignite UI packages are up-to-date. + +The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. + +If Ignite UI **is** installed in the project: + +> [!NOTE] +> Ignite UI MCP servers configured for your selected clients +> Agent Skills copied to your selected agents' skills directories + +Both the MCP servers and Skills are configured. + +### Start the Servers + +**VS Code with GitHub Copilot:** + +Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**. + +**Cursor:** + +Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count. + +**Claude Code:** + +Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required. + +**JetBrains AI Assistant:** + +Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it. + +**Claude Desktop:** + +Quit and relaunch Claude Desktop. The servers start automatically on launch. + +### Install Ignite UI and Add Skills Later + +If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command: + +```bash +npm install igniteui-angular +npx igniteui-cli@latest ai-config +``` -The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. +The command detects that Skills are now available and copies them. The MCP configuration files for your selected clients are left unchanged (already up-to-date). ## The AI Toolchain at a Glance @@ -23,8 +102,8 @@ Ignite UI's AI toolchain consists of three independently usable layers. Each lay | Layer | What it provides | Owner | Frameworks | | --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | | Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | -| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components | -| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. @@ -38,17 +117,17 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md). ## CLI MCP Server -The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. -The CLI MCP server starts via `npx` without a global install: +The CLI MCP server runs via `npx` without a global install: ```bash npx -y igniteui-cli mcp ``` -The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. +Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide. -The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. ## Theming MCP Server @@ -75,17 +154,47 @@ The CLI MCP server and Theming MCP server work with any editor or AI client that | Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | | Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | | Claude Code | `.mcp.json` or the Claude Code MCP CLI command | -| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- | Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. -## Set Up the AI Toolchain +### Quick Setup + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. + +**Using Angular Schematics:** + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +This also registers the `@angular/cli` MCP server alongside the Ignite UI servers for your selected clients. + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: + +```bash +ig ai-config +``` + +> [!NOTE] +> The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step. -Setting up the Ignite UI AI toolchain takes three steps: load Agent Skills for your framework, connect the CLI MCP server, and optionally connect the Theming MCP server. All three steps are independent and can be done in any order. +> [!NOTE] +> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. ### Step 1 - Load Agent Skills -Copy the Ignite UI Skill package for your framework into your project's agent discovery path. The Skill package ships with the library in `node_modules/igniteui-{framework}/skills/`. Wire it to your IDE using the persistent setup for your client. +Copy the Ignite UI Skill package for your framework into your project's agent discovery path. + +The Skill package ships with the library in `node_modules/igniteui-{framework}/skills/`. + +Wire it to your IDE using the persistent setup for your client. See [Agent Skills](skills.md) for the complete setup. @@ -125,6 +234,8 @@ For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Cla Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`: +**VS Code (`.vscode/mcp.json`):** + ```json { "servers": { @@ -136,6 +247,19 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside ` } ``` +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + For configuration details and theming workflows, see [Theming MCP](theming-mcp.md). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md index 8419c0c41..ec9e8e2b7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-cli-mcp.md @@ -1,15 +1,18 @@ --- -title: Angular Ignite UI CLI MCP | Infragistics -_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients. +title: Ignite UI CLI MCP | Infragistics +_description: Use the Ignite UI CLI MCP server to scaffold Ignite UI for Angular projects, add components, and answer API questions through your AI assistant. _keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" namespace: Infragistics.Controls mentionedTypes: [] +last_updated: "2026-04-24" _tocName: CLI MCP --- + + # Ignite UI CLI MCP

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

@@ -18,11 +21,9 @@ _tocName: CLI MCP ## Overview -Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. - -The Ignite UI CLI MCP works alongside the Ignite UI Theming MCP. In practice, the CLI MCP handles project and component workflows, while the Theming MCP handles palettes, themes, tokens, and styling workflows. Most teams will want both servers connected. +Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. -The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. +The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. **Example prompts to try once connected:** @@ -70,19 +71,19 @@ npx -y igniteui-cli mcp You can start with Ignite UI CLI MCP in three ways: > **Recommended - CLI first** -> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client. +> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and prompts you to choose which AI clients to configure for MCP and which agents to set up skill files for. After that, you only need to review the generated configuration and open the project in your AI client. > **Empty folder** > Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. > **Existing project** -> Add MCP configuration to a project you already have and continue working in the current codebase. This path is useful when the project already exists and you want the assistant to help with project changes, component work, and documentation questions without regenerating anything. +> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write MCP configuration for your selected AI clients and copy the Agent Skills into your project. The command prompts you to choose which clients and agents to configure. All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: - in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you - in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that -- in the **existing-project** path, you attach MCP to the current codebase and continue from what is already there +- in the **existing-project** path, run `ig ai-config` to write MCP configuration for your selected clients and copy the Agent Skills automatically In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. @@ -90,19 +91,19 @@ If you are creating a project with Ignite UI CLI first, you can run the CLI in e - **Global install** - ```bash - npm install -g igniteui-cli - ``` + ```bash + npm install -g igniteui-cli + ``` - This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly. + This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly. - **Without a global install** - ```bash - npx --package igniteui-cli igniteui new - ``` + ```bash + npx --package igniteui-cli igniteui new + ``` - This runs the CLI through `npx` instead of a global `ig` command. + This runs the CLI through `npx` instead of a global `ig` command. For the **CLI-first** path, you can create the project in guided mode or with a direct command. @@ -127,16 +128,14 @@ ig new my-app --framework=angular --type=igx-ts --template=empty Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +npx ig new my-app --framework=angular --type=igx-ts --template=empty ``` In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. -For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the Ignite UI CLI documentation for Angular. - ### VS Code -GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root: ```json { @@ -248,20 +247,20 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 4. Enter the following configuration: - ```json - { - "mcpServers": { - "igniteui-cli": { - "command": "npx", - "args": ["-y", "igniteui-cli", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } - } - ``` + ```json + { + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` 5. Click **OK** and restart the AI Assistant. @@ -323,11 +322,11 @@ Here is a brief overview of each tool: | Tool | Description | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | -| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | -| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | -| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | -| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | -| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, Blazor and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, Blazor and Web Components. | At a high level, the CLI MCP tools help with: @@ -348,7 +347,7 @@ The following setup scenarios show when to use each starting point. ### CLI-first setup -Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically. +Create the project with Ignite UI CLI first when you want the fastest guided setup. `ig new` prompts you to select which AI clients to configure for MCP and which agents to set up skill files for. Example scenarios: @@ -391,9 +390,9 @@ Reload the workspace, reopen the editor, or restart the AI client. Some clients Verify that the configuration content matches the examples exactly, including key names and argument order. -**The project was created, but the MCP configuration is only available for VS Code** +**The project was created, but MCP is not configured for one of your AI clients** -Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location. +`ig new` prompts you to select which clients to configure. If you skipped a client during project creation, run `ig ai-config` and select the missing clients when prompted. **The assistant is working in the wrong folder or cannot find the project files** diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md new file mode 100644 index 000000000..2fd288888 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-maker-framework.md @@ -0,0 +1,239 @@ +--- +title: MAKER Framework | Ignite UI AI Orchestration +_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +_keywords: Angular, Ignite UI for Angular, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +namespace: Infragistics.Controls +mentionedTypes: [] +_tocName: Maker Framework +--- + + + + + +# MAKER Framework + +The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + + ```json + { + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } + } + ``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md index 517287e46..421dbc653 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-skills.md @@ -4,9 +4,12 @@ _description: Learn how to use Agent Skills to supercharge AI-assisted developme _keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie _license: MIT mentionedTypes: [] +last_updated: "2026-04-24" _tocName: Ignite UI for Angular Skills --- + + # Ignite UI for Angular Agent Skills Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. @@ -18,11 +21,12 @@ Ignite UI for Angular ships with **[Agent Skills](https://agentskills.io/)** - s The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-angular/tree/master/skills) directory of the Ignite UI for Angular repository: -| Skill | Path | Description | -| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | -| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | -| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | -| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Skill | Path | Description | +|:------|:-----|:------------| +| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components | > [!NOTE] > Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. @@ -44,6 +48,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-angular-theming/ SKILL.md + igniteui-angular-generate-from-image-design/ + SKILL.md ``` For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. @@ -52,9 +58,9 @@ For user-level (global) skills available across all projects, use `~/.agents/ski [GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: -| Scope | Location | -| :------- | :------------------------------------------------------------------------------------------- | -| Project | `.github/skills/`, `.claude/skills/` | +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | | Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | > **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. @@ -63,28 +69,28 @@ For user-level (global) skills available across all projects, use `~/.agents/ski [Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: -| Scope | Location | -| :------- | :------------------ | -| Project | `.claude/skills/` | +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | | Personal | `~/.claude/skills/` | ### Cursor [Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: -| Scope | Location | -| :------------ | :----------------------------------- | -| Project | `.agents/skills/`, `.cursor/skills/` | -| User (global) | `~/.cursor/skills/` | +| Scope | Location | +|:------|:---------| +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | ### Gemini CLI and Antigravity [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: -| Scope | Location | -| :-------- | :--------------------------------------- | -| Workspace | `.gemini/skills/`, `.agents/skills/` | -| User | `~/.gemini/skills/`, `~/.agents/skills/` | +| Scope | Location | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | > **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. @@ -92,19 +98,19 @@ For user-level (global) skills available across all projects, use `~/.agents/ski [Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: -| Scope | Location | -| :------ | :----------------- | -| Project | `.junie/skills/` | -| User | `~/.junie/skills/` | +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | ### Windsurf [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: -| Scope | Location | -| :-------- | :------------------------------------------------- | -| Workspace | `.windsurf/skills/`, `.agents/skills/` | -| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | --- @@ -112,9 +118,35 @@ For user-level (global) skills available across all projects, use `~/.agents/ski Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### **Option A - Use the installed npm package** +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files - all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. + +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + +**Using Angular Schematics:** -If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: +```bash +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot +``` + +This also registers the `@angular/cli` MCP server alongside the Ignite UI servers. + +> [!NOTE] +> If you installed Ignite UI for Angular manually and want to copy skills without running `ai-config`, the skill files are also available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: **macOS / Linux / Windows (PowerShell)** @@ -136,6 +168,7 @@ Or copy individual skill directories as needed: cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-generate-from-image-design .agents/skills/ ``` **Windows (Command Prompt)** @@ -144,9 +177,26 @@ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skil robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +robocopy node_modules\igniteui-angular\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E +``` + +### **Option B - Use the `GitHub CLI`** + +The GitHub CLI can be used to download skill files directly from the Ignite UI for Angular repository. Run the following commands in your project root to start the installation process: + +```bash +gh skill install IgniteUI/igniteui-angular ``` -### **Option B - Use the `gemini skills` CLI** +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + +```bash +gh skill update IgniteUI/igniteui-angular +``` + +### **Option C - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -159,6 +209,7 @@ The `gemini skills install` command installs skills directly from a Git reposito gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design ``` **Install to workspace scope:** @@ -167,15 +218,16 @@ gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path sk gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design ``` Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -### **Option C - Use the `npx skills` CLI** +### **Option D - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```shell +```bash npx skills add IgniteUI/igniteui-angular ``` @@ -201,13 +253,8 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
- - - Getting Started with Ignite UI for Angular - Angular Schematics & Ignite UI CLI - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md index 34c1f261d..5ecac0cbe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/ai-theming-mcp.md @@ -1,25 +1,27 @@ --- title: Angular Theming MCP | Infragistics -_description: Angular works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +_description: Use the Ignite UI Theming MCP server to generate Ignite UI for Angular palettes, themes, typography, and design token overrides through your AI assistant. _keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations _license: MIT mentionedTypes: [] _tocName: Theming MCP --- + + # Ignite UI Theming MCP -

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

## Overview -Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. +The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool identifies the project framework and selects the correct import paths and selectors automatically. For Blazor projects, which have no `package.json`, it returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ -Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. @@ -29,7 +31,7 @@ The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, th > _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ -> _"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."_ +> _"My brand guidelines specify exact hex values for every primary shade - create a custom palette with those explicit values."_ > _"Make the calendar component use smaller spacing."_ @@ -37,9 +39,9 @@ The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, th Before configuring the MCP server, make sure you have: -- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. +- **Node.js** (v18 or later) installed. This provides the `npx` command used to launch the server. - A project with an **Ignite UI package** listed as a dependency in `package.json`. -- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. If you do not have Ignite UI Theming installed yet, run: @@ -49,7 +51,7 @@ npm install igniteui-theming ## Setup -The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. +The MCP server is bundled with the `igniteui-theming` npm package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. The canonical launch command is: @@ -62,7 +64,7 @@ npx -y igniteui-theming igniteui-theming-mcp ### How version resolution works -Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly — no network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. +Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly. No network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect. @@ -163,16 +165,16 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 4. Enter the following configuration: - ```json - { - "mcpServers": { - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } - } - ``` + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` 5. Click **OK** and restart the AI Assistant. @@ -187,11 +189,11 @@ For any other MCP-compatible client, use the STDIO transport with this launch co npx -y igniteui-theming igniteui-theming-mcp ``` -## Customizing AI Behavior with Project Rules +## Customize AI Behavior with Project Rules This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. -Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_ — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_. You do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. ### VS Code (`.github/copilot-instructions.md`) @@ -199,13 +201,12 @@ Editors like VS Code and Cursor let you provide project-level instruction files ## Theming Conventions ### Sass Code Style - -- Use `@use` / `@forward` — never `@import`. +- Use `@use` / `@forward` - never `@import`. - Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). - Prefer setting primary design tokens over overriding many dependent tokens. For example, setting `$foreground` on a flat button automatically derives `$hover-background`, `$focus-background`, and `$active-background`. -- Keep component overrides scoped — use the component's default selector +- Keep component overrides scoped - use the component's default selector (e.g., `.igx-button--flat`) unless a narrower scope is needed. ``` @@ -220,13 +221,12 @@ globs: ["**/*.scss", "**/styles/**"] ## Project Theming Rules ### Code conventions - -- `@use` / `@forward` only — no `@import`. +- `@use` / `@forward` only - no `@import`. - Extract shared colors into variables; do not repeat hex literals. -- Prefer primary tokens — let dependent tokens derive automatically. +- Prefer primary tokens - let dependent tokens derive automatically. - One component override per file. Name the file after the component. - Comment every override with the design rationale. -- Never hard-code gray shades for text — use palette grays so dark mode works. +- Never hard-code gray shades for text - use palette grays so dark mode works. - For dark mode, only the palette changes. Component overrides stay the same. ``` @@ -235,7 +235,7 @@ globs: ["**/*.scss", "**/styles/**"] ## Available Tools -The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly. Just describe what you want. To see the current full list of tools and their parameters at any time, ask your AI assistant: @@ -243,21 +243,21 @@ To see the current full list of tools and their parameters at any time, ask your Here is a brief overview of each tool: -| Tool | Description | -| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | -| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | -| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | -| `create_typography` | Sets up a font family and type scale for a given design system. | -| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | -| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | -| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | -| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | -| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | -| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | -| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | -| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | -| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | +| Tool | Description | +|------|-------------| +| `detect_platform` | Identifies the project framework and selects the correct import paths and selectors. For Angular, React, and Web Components projects, reads `package.json`. For Blazor projects, which do not have a `package.json`, returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ | +| `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | +| `create_typography` | Sets up a font family and type scale for a given design system. | +| `create_elevations` | Configures box-shadow elevation levels (0-24) for Material or Indigo design systems. | +| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | +| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | +| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | +| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | +| `get_component_design_tokens` | Returns all available design tokens for a component. Always call this before `create_component_theme`. | +| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | +| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | +| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. @@ -265,7 +265,7 @@ Here is a brief overview of each tool: > [!NOTE] > If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. -## Example Scenarios +## Common Workflows The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -277,7 +277,7 @@ The AI will call `create_theme` and return a ready-to-use `styles.scss` file. Th ```scss /* styles.scss */ -@use "igniteui-angular/theming" as *; +@use 'igniteui-angular/theming' as *; $my-palette: palette( $primary: #2563eb, @@ -287,7 +287,7 @@ $my-palette: palette( ); $my-typography: typography( - $font-family: "Roboto, sans-serif", + $font-family: 'Roboto, sans-serif', ); @include core(); @@ -301,7 +301,7 @@ $my-typography: typography( ### Brand-Exact Color Shades -> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values - create a custom palette."_ The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. @@ -313,7 +313,7 @@ The AI will call `get_component_design_tokens` first to discover valid token nam ### Layout Adjustments -> _"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."_ +> _"The calendar feels bloated - reduce its spacing, and make all components slightly smaller."_ The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. @@ -321,7 +321,9 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. + +You can also tell the AI explicitly: _"Use the Angular platform."_ **Luminance warning on colors** @@ -339,13 +341,14 @@ Ensure `igniteui-angular` and `igniteui-theming` are installed: ng add igniteui-angular ``` -Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass]() for the correct file setup. +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index) for the correct file setup. ## Additional Resources - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI for Angular Skills](./skills.md) - [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) +``` + +Use the `[icon]` input to display an icon inside the badge: - -{{ model.value }} +```html + ``` When both `[icon]` and `[value]` are set, the badge displays both simultaneously: @@ -187,10 +190,16 @@ When both `[icon]` and `[value]` are set, the badge displays both simultaneously ``` -To display only a numeric value without an icon, make sure `[icon]` is not set: +Or you can project content directly: ```html - + {{ model.value }} + + + + bluetooth + Bluetooth + ``` ### Badge Icon @@ -214,7 +223,7 @@ Then, just specify the icon name and family as follows: ``` ```typescript -import { Component, OnInit, inject } from '@angular/core'; +import { Component, OnInit, inject, ChangeDetectionStrategy } from '@angular/core'; import { heartMonitor } from '@igniteui/material-icons-extended'; import { IgxIconService } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -224,6 +233,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; selector: 'app-badge-icon', styleUrls: ['./badge-icon.component.scss'], templateUrl: './badge-icon.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeIconComponent implements OnInit { @@ -243,8 +253,8 @@ export class BadgeIconComponent implements OnInit { ``` ```scss .wrapper { - position: relative; - margin-top: 15px; + position: relative; + margin: 15px 0 0 15px; } igx-badge { @@ -259,7 +269,7 @@ igx-badge { The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @@ -267,6 +277,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; selector: 'app-badge-dot-sample', styleUrls: ['./badge-dot-sample.component.scss'], templateUrl: './badge-dot-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeDotSampleComponent { } @@ -279,21 +290,21 @@ export class BadgeDotSampleComponent { } ``` ```scss .wrapper { - display: flex; - position: relative; - margin-top: 15px; + display: flex; + position: relative; + margin: 15px 0 0 15px; - igx-avatar { - anchor-name: --avatar; - } + igx-avatar { + anchor-name: --avatar; + } - igx-badge { - position: absolute; - position-anchor: --avatar; - bottom: anchor(--avatar top); - left: anchor(right); - transform: translate(-75%, 75%); - } + igx-badge { + position: absolute; + position-anchor: --avatar; + bottom: anchor(--avatar top); + left: anchor(right); + transform: translate(-75%, 75%); + } } ``` @@ -421,7 +432,7 @@ Position the badge in its parent container: If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Member } from '../model/member.model'; import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -432,6 +443,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; selector: 'app-badge-sample-3', styleUrls: ['./badge-sample-3.component.scss'], templateUrl: './badge-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeSample3Component { @@ -541,7 +553,7 @@ To include the new theme we use the `tokens` mixin: ### Demo ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Member } from '../model/member.model'; import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -552,6 +564,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; selector: 'app-badge-styling-sample', styleUrls: ['./badge-styling-sample.component.scss'], templateUrl: './badge-styling-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] }) export class BadgeStylingSampleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md index 4152e99b3..697f6bb02 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md @@ -13,7 +13,7 @@ _tocName: Banner ## Angular Banner Example ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -23,6 +23,7 @@ import { IgxCardComponent } from 'igniteui-angular/card'; selector: 'app-banner-sample-1', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxCardComponent] }) @@ -198,7 +199,7 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [` ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -209,6 +210,7 @@ import { IgxCardComponent } from 'igniteui-angular/card'; selector: 'app-banner-sample-2', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-2.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] }) @@ -283,7 +285,7 @@ export class MyBannerComponent { ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -295,6 +297,7 @@ import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'; selector: 'app-banner-sample-3', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent] }) @@ -404,7 +407,7 @@ Finally, we will add a `toast`, displaying a message about the WiFi state. The r ```typescript -import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -418,6 +421,7 @@ import { Subject } from 'rxjs'; selector: 'app-banner-advanced-sample', styleUrls: ['../banner-samples.scss'], templateUrl: 'banner-advanced-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] }) @@ -527,7 +531,7 @@ The last step is to pass the custom banner theme: ``` ```typescript -import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { IgxBannerActionsDirective, IgxBannerComponent } from 'igniteui-angular/banner'; import { IgxToastComponent } from 'igniteui-angular/toast'; import { VerticalAlignment } from 'igniteui-angular/core'; @@ -543,6 +547,7 @@ import { Subject } from 'rxjs'; styleUrls: ['banner-styling.component.scss', '../banner-samples.scss'], templateUrl: 'banner-styling.component.html', encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxNavbarComponent, IgxIconComponent, IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective, IgxRippleDirective, IgxCardComponent, IgxToastComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md index 449f5cfb1..35f93f089 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/bullet-graph.md @@ -353,7 +353,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`transitionDuration`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=transitionDuration) property. @@ -526,7 +525,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Highlight Value The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value) appear with a lower opacity. A good example is if [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value) is 50 and [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValue) is set to 25. This would represent a performance of 50% regardless of what the value of [`targetValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=targetValue) is set to. To enable this first set [`highlightValueDisplayMode`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValue) to something lower than [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value). @@ -627,7 +625,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. @@ -739,7 +736,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. @@ -845,7 +841,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Labels The labels indicate the measures on the scale. @@ -937,7 +932,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -1026,7 +1020,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -1116,7 +1109,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md index 838cd7fae..4aa67799f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button-group.md @@ -13,7 +13,7 @@ _tocName: Button Group ## Angular Button Group Example ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -22,6 +22,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-button-group-sample-1', styleUrls: ['./button-group-sample-1.component.scss'], templateUrl: './button-group-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) @@ -175,7 +176,7 @@ public alignment = ButtonGroupAlignment.vertical; ``` ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -183,6 +184,7 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi selector: 'app-button-group-sample-2', styleUrls: ['./button-group-sample-2.component.scss'], templateUrl: './button-group-sample-2.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] }) export class ButtonGroupSample2Component { @@ -220,7 +222,7 @@ In order to configure the `igx-buttongroup` selection, you could use its [select The sample below demonstrates the exposed `igx-buttongroup` selection modes: ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxRadioComponent } from 'igniteui-angular/radio'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -231,6 +233,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-button-group-sample', styleUrls: ['./button-group-sample.component.scss'], templateUrl: './button-group-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class ButtonGroupSampleComponent { @@ -289,7 +292,7 @@ igx-buttongroup { ``` ```typescript -import { Component, HostBinding, OnInit } from '@angular/core'; +import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; type Button = { @@ -302,6 +305,7 @@ type Button = { selector: 'app-button-group-sample-5', styleUrls: ['./button-group-sample-5.component.scss'], templateUrl: './button-group-sample-5.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent] }) export class ButtonGroupSample5Component implements OnInit { @@ -407,7 +411,7 @@ public ngOnInit() { ``` ```typescript -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; interface IButton { @@ -444,6 +448,7 @@ class ToggleButton { selector: 'app-button-group-sample-3', styleUrls: ['./button-group-sample-3.component.scss'], templateUrl: './button-group-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent] }) export class ButtonGroupSample3Component implements OnInit { @@ -668,7 +673,7 @@ The last step is to include the component's theme. ### Demo ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ButtonGroupAlignment, IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -676,6 +681,7 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi selector: 'app-button-group-style', styleUrls: ['./button-group-style.component.scss'], templateUrl: './button-group-style.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective] }) export class ButtonGroupStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md index 0376681f8..cf03cc77e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md @@ -19,13 +19,14 @@ We have created the Angular Button example below to show you how different butto
```typescript -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @Component({ selector: 'app-buttons-sample-1', styleUrls: ['./buttons-sample-1.component.scss'], templateUrl: './buttons-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective] }) export class ButtonsSample1Component { } @@ -282,7 +283,7 @@ protected get sizeStyle() { If all went well, you should see something like the following in the browser: ```typescript -import { Component, HostBinding, OnInit } from '@angular/core'; +import { Component, HostBinding, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -291,6 +292,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-buttons-display-density', styleUrls: ['./buttons-display-density.component.scss'], templateUrl: './buttons-display-density.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class ButtonsDisplayDensityComponent implements OnInit { @@ -1200,9 +1202,6 @@ When you modify a primary property, all related dependent properties are updated -Another way to style the button is by using **Sass**, along with our type-specific theme functions: [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-flat-button-theme), [`outlined-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-outlined-button-theme), [`contained-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-contained-button-theme), and [`fab-button-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-fab-button-theme). - -Each of them will target only the buttons of that specific type.

Indigo Theme

@@ -1529,7 +1528,7 @@ To style the button you can use our type-specific theme functions: [`flat-button Each of them will target only the buttons of that specific type. -To get started with styling the button, first import the themes module, which includes all theme functions and component mixins: +To get started, first import the themes module, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -1582,7 +1581,7 @@ For [`flat-button-theme`](https://www.infragistics.com/products/ignite-ui-angula In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonDirective } from 'igniteui-angular/directives'; import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; @@ -1591,6 +1590,7 @@ import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; styleUrls: ['./buttons-style.component.scss'], templateUrl: './buttons-style.component.html', imports: [IgxButtonDirective], + changeDetection: ChangeDetectionStrategy.Eager, providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('bootstrap')}] }) export class ButtonsStyleComponent { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md index ad9e5db0d..e1abbca07 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md @@ -22,13 +22,14 @@ We created the following Angular Calendar example using the Ignite UI for Angula
```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-5.component.scss'], templateUrl: './calendar-sample-5.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample5Component { } @@ -141,13 +142,14 @@ We can easily change the default mode using the [`selection`](mcp:get_api_refere ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-1.component.scss'], templateUrl: './calendar-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample1Component { } @@ -186,13 +188,14 @@ Following the same approach, we can switch to range selection mode: ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-8.component.scss'], templateUrl: './calendar-sample-8.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample8Component { } @@ -265,7 +268,7 @@ If everything went well, we should now have a calendar with customized dates dis ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; @@ -280,6 +283,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-calendar', styleUrls: ['./calendar-sample-2.component.scss'], templateUrl: './calendar-sample-2.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, FormsModule, IgxPrefixDirective, IgxSelectItemComponent, IgxCalendarComponent] }) export class CalendarSample2Component implements OnInit{ @@ -373,7 +377,7 @@ These configurations should have the following result: ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { DateRangeType } from 'igniteui-angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { DatePipe } from '@angular/common'; @@ -382,6 +386,7 @@ import { DatePipe } from '@angular/common'; selector: 'app-calendar', styleUrls: ['./calendar-sample-6.component.scss'], templateUrl: './calendar-sample-6.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, DatePipe] }) export class CalendarSample6Component implements OnInit{ @@ -485,7 +490,7 @@ The following demo illustrates a calendar with a vacation request option: ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { DateRangeType } from 'igniteui-angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -495,6 +500,7 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-calendar', styleUrls: ['./calendar-sample-7.component.scss'], templateUrl: './calendar-sample-7.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] }) export class CalendarSample7Component { @@ -568,13 +574,14 @@ The following demo illustrates a calendar with enabled week numbers: ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-1.component.scss'], templateUrl: './calendar-sample-1.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample1Component { } @@ -642,7 +649,7 @@ public activeViewChanged(event: CalendarView) { Use the demo below to play around (change selection, navigate through months and years) and see the events logged real time: ```typescript -import { Component, ViewChild, DOCUMENT, inject } from '@angular/core'; +import { Component, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core'; import { IViewDateChangeEventArgs, IgxCalendarComponent, IgxCalendarView } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; @@ -650,6 +657,7 @@ import { IgxDialogComponent } from 'igniteui-angular/dialog'; selector: 'app-calendar', styleUrls: ['./calendar-sample-3.component.scss'], templateUrl: './calendar-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarSample3Component { @@ -757,7 +765,7 @@ There are separate views provided by the `IgxCalendarModule` that can be used in ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxDaysViewComponent } from 'igniteui-angular/calendar'; @@ -765,6 +773,7 @@ import { IgxDaysViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-days-view.component.scss'], templateUrl: './calendar-days-view.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxDaysViewComponent] }) export class CalendarDaysViewComponent { } @@ -796,7 +805,7 @@ export class CalendarDaysViewComponent { } ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxMonthsViewComponent } from 'igniteui-angular/calendar'; @@ -804,6 +813,7 @@ import { IgxMonthsViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-months-view.component.scss'], templateUrl: './calendar-months-view.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxMonthsViewComponent] }) export class CalendarMonthsViewComponent { } @@ -835,7 +845,7 @@ export class CalendarMonthsViewComponent { } ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; import { IgxYearsViewComponent } from 'igniteui-angular/calendar'; @@ -843,6 +853,7 @@ import { IgxYearsViewComponent } from 'igniteui-angular/calendar'; selector: 'app-calendar-views', styleUrls: ['./calendar-years-view.component.scss'], templateUrl: './calendar-years-view.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxYearsViewComponent] }) export class CalendarYearsViewComponent { } @@ -936,7 +947,7 @@ Multi-view calendar supports all three types of selection. Use the [`monthsViewN ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -946,6 +957,7 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; selector: 'app-calendar', styleUrls: ['./multiview.component.scss'], templateUrl: './multiview.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxDialogComponent, IgxButtonDirective] }) export class CalendarMultiViewComponent { @@ -1092,7 +1104,7 @@ export class CalendarSample9Component { ``` ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { IgxButtonDirective } from 'igniteui-angular/directives'; @@ -1105,6 +1117,7 @@ type Orientation = (typeof orientations)[number]; selector: 'app-calendar', styleUrls: ['./calendar-sample-9.component.scss'], templateUrl: './calendar-sample-9.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, IgxButtonGroupComponent, IgxButtonDirective] }) @@ -1543,13 +1556,14 @@ The last step is to pass the custom calendar theme: ``` ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; @Component({ selector: 'app-calendar', styleUrls: ['./calendar-styling-sample.component.scss'], templateUrl: './calendar-styling-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent] }) export class CalendarStylingSampleComponent { } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md index 22402c741..8e12ce1be 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md @@ -19,7 +19,7 @@ This lightweight Angular Card component is used for creating all sorts of cards, Below you can see a basic sample of a well-crafted Ignite UI for Angular Card with main card sections like image, title, subtitle, primary card content, container for a button. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Card } from './card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -31,6 +31,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-card', styleUrls: ['./card.component.scss'], templateUrl: './card.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardComponent { @@ -329,7 +330,7 @@ If everything went well, our card should look like this: ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -341,6 +342,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; selector: 'app-card-sample-2', styleUrls: ['./card-sample-2.component.scss'], templateUrl: './card-sample-2.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample2Component { @@ -427,7 +429,7 @@ Below is an example showing how you can create a semi-horizontal card, where we ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; @@ -439,6 +441,7 @@ import { IgxPrefixDirective } from 'igniteui-angular/input-group'; selector: 'app-card-sample-3', styleUrls: ['./card-sample-3.component.scss'], templateUrl: './card-sample-3.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective] }) export class CardSample3Component { @@ -593,7 +596,7 @@ In the sample below, you can see how using the card component with customized CS ```typescript -import { Component, inject, OnInit } from '@angular/core'; +import { Component, inject, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxDividerModule, IgxIconButtonDirective } from 'igniteui-angular/directives'; @@ -605,6 +608,7 @@ import { IgxChipComponent } from 'igniteui-angular/chips'; selector: 'app-card-styling-sample', templateUrl: './card-styling-sample.component.html', styleUrls: ['./card-styling-sample.component.scss'], + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md index 323ff8213..6ce9e9f3a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md @@ -19,7 +19,7 @@ The Angular Carousel component allows you to use animations, slide transitions, The Angular Carousel demo you see below shows slides containing only images. We’ve enabled navigation buttons allowing users to easily move from one slide to another – going back and forth. ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; @@ -27,6 +27,7 @@ import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carous selector: 'app-carousel', styleUrls: ['./carousel.component.scss'], templateUrl: './carousel.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent] }) @@ -328,7 +329,7 @@ This carousel is going to contain slides with forms and images: ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -339,6 +340,7 @@ import { FormsModule } from '@angular/forms'; selector: 'app-carousel', styleUrls: ['./carousel-with-components-sample.component.scss'], templateUrl: './carousel-with-components-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent, FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective] }) @@ -464,7 +466,7 @@ The demo below demonstrates the different types of animations, which the carouse ```typescript -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -478,6 +480,7 @@ import { TitleCasePipe } from '@angular/common'; selector: 'app-carousel', styleUrls: ['./carousel-animations-sample.component.scss'], templateUrl: './carousel-animations-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe] }) export class CarouselAnimationsSampleComponent { @@ -710,7 +713,7 @@ syncing the components by hooking up on carousel's [`slideChanged`](mcp:get_api_ These configurations will have the following result: ```typescript -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { ISlideEventArgs, IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; import { IListItemClickEventArgs, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective } from 'igniteui-angular/list'; import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; @@ -719,6 +722,7 @@ import { NgStyle, NgClass, CurrencyPipe } from '@angular/common'; selector: 'app-carousel', styleUrls: ['./carousel-no-navigation-sample.component.scss'], templateUrl: './carousel-no-navigation-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent, NgStyle, NgClass, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, CurrencyPipe] }) export class CarouselNoNavigationSampleComponent implements OnInit { @@ -1215,13 +1219,14 @@ The last step is to include the component's theme. The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). ```typescript -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; @Component({ selector: 'app-carousel', styleUrls: ['./carousel-styling-sample.component.scss'], templateUrl: './carousel-styling-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCarouselComponent, IgxSlideComponent] }) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md index ece93236b..325bb57ac 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-api.md @@ -17,38 +17,38 @@ The Ignite UI for Angular charts provide simple and easy to use APIs to plot you The Angular [`IgxCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) has the following API members: -| Chart Properties | Axis Properties | Series Properties | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType)
| - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)




| +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#trendLineType)
| - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#markerTypes)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#toolTipType)




| ## Angular Financial Chart API The Angular [`IgxFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html) has the following API members: -| Chart Properties | Axis Properties | Series Properties | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#markerTypes)
- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType)


| +| Chart Properties | Axis Properties | Series Properties | +|------------------|-----------------|-------------------| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#trendLineType) | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#xAxisMode) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html#markerTypes)
- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialchartcomponent.html#zoomSliderType)


| ## Angular Data Chart API The Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) has the following API members: -| Chart Properties | Axis Classes | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle)
- [`subtitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#subtitle)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerOutlines)
- `XamDataChart.Axes`
- [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html)
| - [`IgxAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) is base class for all axis types
- [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md)
- [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) used with [Radial Series](types/radial-chart.md)
- [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)
- [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) used with [Polar Series](types/polar-chart.md)
- [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md)
- [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md)

| +| Chart Properties | Axis Classes | +|------------------|--------------| +| - [`chartTitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#chartTitle)
- [`subtitle`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#subtitle)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled)
- [`brushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#markerOutlines)
- `XamDataChart.Axes`
- [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html)
| - [`IgxAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxaxiscomponent.html) is base class for all axis types
- [`IgxCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryxaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryyaxiscomponent.html) used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md)
- [`IgxCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategoryangleaxiscomponent.html) used with [Radial Series](types/radial-chart.md)
- [`IgxNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericxaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)
- [`IgxNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericyaxiscomponent.html) used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md)
- [`IgxNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericangleaxiscomponent.html) used with [Polar Series](types/polar-chart.md)
- [`IgxNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxnumericradiusaxiscomponent.html) used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md)
- [`IgxTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtimexaxiscomponent.html) used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md)

| The Angular [`IgxDataChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) can use the following type of series that inherit from [`IgxSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html): -| Category Series | Stacked Series | -| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html)
- [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)


| +| Category Series | Stacked Series | +|------------------|----------------| +| - [`IgxAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxareaseriescomponent.html)
- [`IgxBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbarseriescomponent.html)
- [`IgxColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcolumnseriescomponent.html)
- [`IgxLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxlineseriescomponent.html)
- [`IgxPointSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpointseriescomponent.html)
- [`IgxSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineseriescomponent.html)
- [`IgxSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsplineareaseriescomponent.html)
- [`IgxStepLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxsteplineseriescomponent.html)
- [`IgxStepAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstepareaseriescomponent.html)
- [`IgxRangeAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangeareaseriescomponent.html)
- [`IgxRangeColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrangecolumnseriescomponent.html)
- [`IgxWaterfallSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxwaterfallseriescomponent.html)
| - [`IgxStackedAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedareaseriescomponent.html)
- [`IgxStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedbarseriescomponent.html)
- [`IgxStackedColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedcolumnseriescomponent.html)
- [`IgxStackedLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedlineseriescomponent.html)
- [`IgxStackedSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstackedsplineseriescomponent.html)
- [`IgxStacked100AreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100areaseriescomponent.html)
- [`IgxStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100barseriescomponent.html)
- [`IgxStacked100ColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100columnseriescomponent.html)
- [`IgxStacked100LineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100lineseriescomponent.html)
- [`IgxStacked100SplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstacked100splineseriescomponent.html)


| -| Scatter Series | Financial Series | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)

| - [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
- [`IgxWeightedCloseIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxweightedcloseindicatorcomponent.html)
- and [many more](types/stock-chart.md) | +| Scatter Series | Financial Series | +|----------------|------------------| +| - [`IgxBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbubbleseriescomponent.html)
- [`IgxHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxhighdensityscatterseriescomponent.html)
- [`IgxScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterseriescomponent.html)
- [`IgxScatterLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterlineseriescomponent.html)
- [`IgxScatterSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattersplineseriescomponent.html)
- [`IgxScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterareaseriescomponent.html)
- [`IgxScatterContourSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscattercontourseriescomponent.html)
- [`IgxScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolylineseriescomponent.html)
- [`IgxScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxscatterpolygonseriescomponent.html)

| - [`IgxFinancialPriceSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxfinancialpriceseriescomponent.html)
- [`IgxBollingerBandsOverlayComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxbollingerbandsoverlaycomponent.html)
- [`IgxForceIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxforceindexindicatorcomponent.html)
- [`IgxMedianPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmedianpriceindicatorcomponent.html)
- [`IgxMassIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxmassindexindicatorcomponent.html)
- [`IgxRelativeStrengthIndexIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxrelativestrengthindexindicatorcomponent.html)
- [`IgxStandardDeviationIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxstandarddeviationindicatorcomponent.html)
- [`IgxTypicalPriceIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxtypicalpriceindicatorcomponent.html)
- [`IgxWeightedCloseIndicatorComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxweightedcloseindicatorcomponent.html)
- and [many more](types/stock-chart.md) | -| Radial Series | Polar Series | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Radial Series | Polar Series | +|---------------|--------------| | - [`IgxRadialLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradiallineseriescomponent.html)
- [`IgxRadialAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialareaseriescomponent.html)
- [`IgxRadialPieSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html)
- [`IgxRadialColumnSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialcolumnseriescomponent.html)

| - [`IgxPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarscatterseriescomponent.html)
- [`IgxPolarLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarlineseriescomponent.html)
- [`IgxPolarAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarareaseriescomponent.html)
- [`IgxPolarSplineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineseriescomponent.html)
- [`IgxPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpolarsplineareaseriescomponent.html)
| ## Angular Data Legend API @@ -85,22 +85,22 @@ The Angular [`IgxDoughnutChartComponent`](https://www.infragistics.com/products/ The Angular [`IgxDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) has the following API members: - [`chartType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html#chartType) -- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingBehavior) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionBehavior) +- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#highlightingBehavior) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#selectionBehavior) ## Angular Pie Chart API The Angular [`IgxPieChartComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html) has the following API members: -- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemBadgeTemplate) -- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendItemTemplate) -- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#legendLabelMemberPath) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartbasecomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#selectionMode) +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxpiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#selectionMode) ## Angular Sparkline Chart API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md index bdaddfaea..418812aa0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-features.md @@ -148,7 +148,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Annotations @@ -316,7 +315,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Animations @@ -455,7 +453,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Highlighting @@ -629,7 +626,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Markers @@ -762,8 +758,8 @@ export class AppComponent implements AfterViewInit label="Marker Type" shouldOverrideDefaultEditor="true" valueType="EnumValue" - dropDownValues="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" - dropDownNames="Circle, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + dropDownValues="Circle, Checkmark, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" + dropDownNames="Circle, Checkmark, Automatic, Triangle, Pyramid, Square, Diamond, Pentagon, Hexagon, Tetragram, Pentagram, Hexagram, None" primitiveValue="Circle" (changed)="this.editorChangeUpdateMarkerType($event)"> @@ -790,7 +786,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Navigation @@ -981,7 +976,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Overlays @@ -1081,7 +1075,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Performance @@ -1281,7 +1274,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Tooltips @@ -1433,7 +1425,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Trendlines @@ -1546,7 +1537,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md index a1310f7b2..ce955d167 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/charts-chart-overview.md @@ -212,7 +212,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Pie Chart @@ -319,7 +318,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Line Chart @@ -430,7 +428,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Donut Chart @@ -547,7 +544,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Area Chart @@ -658,7 +654,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Sparkline Chart @@ -766,7 +761,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Bubble Chart @@ -983,7 +977,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Financial / Stock Chart @@ -1061,7 +1054,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Column Chart @@ -1173,7 +1165,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Angular Composite Chart @@ -1340,7 +1331,6 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
- - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular. - We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md index 8c3927e95..4022f73a1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chat.md @@ -14,13 +14,14 @@ The Chat component provides a complete solution for building conversational inte Unlike a static message list, the Chat component is interactive and designed for **real-time communication**. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals. ```typescript -import { Component, signal } from '@angular/core'; +import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; import { IgxChatComponent, IgxChatOptions } from 'igniteui-angular/chat'; @Component({ selector: 'app-chat-overview-sample', styleUrls: ['./overview-sample.component.scss'], templateUrl: './overview-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChatComponent] }) export class ChatOverviewSampleComponent { @@ -126,7 +127,7 @@ To get started, install Ignite UI for Angular package as well as the Ignite UI f npm install igniteui-angular igniteui-webcomponents ``` -[`IgxChatComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatcomponent.html) provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. +[`IgxChatComponent`](mcp:get_api_reference?platform=angular&component=IgxChatComponent) provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. @@ -267,7 +268,7 @@ This level of granularity means you can tweak just one part (for example, how at Here: - `let-message` exposes the message object. -- The [`igxChatMessageContext`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchatmessagecontextdirective.html) directive ensures proper typing for message templates. +- The [`igxChatMessageContext`](mcp:get_api_reference?platform=angular&component=IgxChatMessageContextDirective) directive ensures proper typing for message templates. #### Custom Input Area By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button: @@ -383,7 +384,7 @@ You can listen for these events and sync them with your backend: ```typescript import { AsyncPipe } from '@angular/common'; -import { Component, effect, signal, viewChild } from '@angular/core'; +import { Component, effect, signal, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat'; import { MarkdownPipe } from 'igniteui-angular/chat-extras'; @@ -391,6 +392,7 @@ import { MarkdownPipe } from 'igniteui-angular/chat-extras'; selector: 'app-chat-features-sample', styleUrls: ['./features-sample.component.scss'], templateUrl: './features-sample.component.html', + changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe] }) export class ChatFeaturesSampleComponent { @@ -643,187 +645,177 @@ We highly recommend using the standard Web Component styling approaches before r - `` elements – For larger stylesheets, inject them inside the Shadow DOM. - Inline ` @@ -94,6 +95,12 @@ Use the [`Variant`](mcp:get_api_reference?platform=blazor&component=IgbButton&me
+ Contained
@@ -116,7 +123,13 @@ All you have to do to create an `outlined` button is to change the value of the
- Outlined + + Outlined
@code { @@ -137,6 +150,17 @@ Analogically, we can switch to `flat` variant.
+ Flat
@@ -159,6 +183,12 @@ We can create a floating action button by setting the [`Variant`](mcp:get_api_re
+ + Add @@ -212,16 +242,20 @@ The result of implementing the above code should look like the following: @@ -266,6 +300,12 @@ Setting the [`Download`](mcp:get_api_reference?platform=blazor&component=IgbButt
+ Download @@ -307,10 +347,13 @@ igc-button::part(base) { color: #011627; padding: 18px; } + + igc-button { + width: 40%; + margin: auto; + } -
- Contained -
+ Contained
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/card.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/card.md index e33cfef30..a927e7b5a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/card.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/card.md @@ -36,8 +36,8 @@ The Ignite UI for Blazor Card displays text, images, icons, and buttons in a vis -

New York City

-
City in New York
+ New York City + City in New York @@ -239,8 +239,8 @@ If everything went well, our card should look like this:
-
Rozes
-
Under the Grave (2016)
+ Rozes + Under the Grave (2016)

@@ -321,8 +321,8 @@ Below is an example showing how you can create a semi-horizontal card, where we

-
HERE
-
by Mellow D
+ HERE + by Mellow D

Far far away, behind the word mountains, @@ -438,8 +438,8 @@ igc-icon-button::part(base) { -

Jane Doe

-
Professional Photographer
+ Jane Doe + Professional Photographer diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/carousel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/carousel.md index b192b2889..c66ee62b4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/carousel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/carousel.md @@ -414,7 +414,7 @@ igc-card-header {
-

Ignite UI for Angular

+ Ignite UI for Angular

30+ Material-based Angular components to code speedy web apps faster.

@@ -434,7 +434,7 @@ igc-card-header {
-

Ignite UI for Javascript

+ Ignite UI for Javascript

A complete JavaScript UI library empowering you to build data-rich responsive web apps.

@@ -454,7 +454,7 @@ igc-card-header {
-

Ultimate UI for ASP.NET

+ Ultimate UI for ASP.NET

Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.

diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md index 5af4f7a71..c196ee349 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-api.md @@ -41,7 +41,7 @@ The Blazor [`IgbDataChart`](mcp:get_api_reference?platform=blazor&component=IgbD | Category Series | Stacked Series | |------------------|----------------| -| - [`IgbAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbAreaSeries)
- [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries)
- [`IgbColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbColumnSeries)
- [`IgbLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbLineSeries)
- [`IgbPointSeries`](mcp:get_api_reference?platform=blazor&component=IgbPointSeries)
- [`IgbSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbSplineSeries)
- [`IgbSplineAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbSplineAreaSeries)
- [`IgbStepLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStepLineSeries)
- [`IgbStepAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStepAreaSeries)
- [`IgbRangeAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbRangeAreaSeries)
- [`IgbRangeColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbRangeColumnSeries)
- [`IgbWaterfallSeries`](mcp:get_api_reference?platform=blazor&component=IgbWaterfallSeries)
| - [`IgbStackedAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedAreaSeries)
- [`IgbStackedBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedBarSeries)
- [`IgbStackedColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedColumnSeries)
- [`IgbStackedLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedLineSeries)
- [`IgbStackedSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedSplineSeries)
- [`IgbStacked100AreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100AreaSeries)
- [`IgbStacked100BarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100BarSeries)
- [`IgbStacked100ColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100ColumnSeries)
- [`IgbStacked100LineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100LineSeries)
- [`IgbStacked100SplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100SplineSeries)


| +| - [`IgbAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbAreaSeries)
- [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries)
- [`IgbColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbColumnSeries)
- [`IgbLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbLineSeries)
- [`IgbPointSeries`](mcp:get_api_reference?platform=blazor&component=IgbPointSeries)
- [`IgbSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbSplineSeries)
- [`IgbSplineAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbSplineAreaSeries)
- [`IgbStepLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStepLineSeries)
- [`IgbStepAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStepAreaSeries)
- [`IgbRangeAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbRangeAreaSeries)
- [`IgbRangeColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbRangeColumnSeries)
- `RangeBarSeries`
- [`IgbWaterfallSeries`](mcp:get_api_reference?platform=blazor&component=IgbWaterfallSeries)
| - [`IgbStackedAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedAreaSeries)
- [`IgbStackedBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedBarSeries)
- [`IgbStackedColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedColumnSeries)
- [`IgbStackedLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedLineSeries)
- [`IgbStackedSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedSplineSeries)
- [`IgbStacked100AreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100AreaSeries)
- [`IgbStacked100BarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100BarSeries)
- [`IgbStacked100ColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100ColumnSeries)
- [`IgbStacked100LineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100LineSeries)
- [`IgbStacked100SplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100SplineSeries)


| | Scatter Series | Financial Series | |----------------|------------------| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md index f30172b04..103b6a276 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-axis-types.md @@ -207,6 +207,7 @@ public class ContinentsBirthRate The [`IgbCategoryYAxis`](mcp:get_api_reference?platform=blazor&component=IgbCategoryYAxis) works very similarly to the [`IgbCategoryXAxis`](mcp:get_api_reference?platform=blazor&component=IgbCategoryXAxis) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a `Label` in order to plot data with it. The [`IgbCategoryYAxis`](mcp:get_api_reference?platform=blazor&component=IgbCategoryYAxis) is generally used with the [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) to plot the following type of series: - [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries) +- `RangeBarSeries` - [`IgbStackedBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedBarSeries) - [`IgbStacked100BarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100BarSeries) @@ -361,11 +362,12 @@ public class HighestGrossingMovies ### Numeric X-Axis -The [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgbNumericYAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericYAxis). Alternatively, if combined with the [`IgbCategoryXAxis`](mcp:get_api_reference?platform=blazor&component=IgbCategoryXAxis), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries), [`IgbStackedBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedBarSeries), and [`IgbStacked100BarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100BarSeries). +The [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgbNumericYAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericYAxis). Alternatively, if combined with the [`IgbCategoryXAxis`](mcp:get_api_reference?platform=blazor&component=IgbCategoryXAxis), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries), `RangeBarSeries`, [`IgbStackedBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStackedBarSeries), and [`IgbStacked100BarSeries`](mcp:get_api_reference?platform=blazor&component=IgbStacked100BarSeries). The [`IgbNumericXAxis`](mcp:get_api_reference?platform=blazor&component=IgbNumericXAxis) is compatible with the following type of series: - [`IgbBarSeries`](mcp:get_api_reference?platform=blazor&component=IgbBarSeries) +- `RangeBarSeries` - [`IgbBubbleSeries`](mcp:get_api_reference?platform=blazor&component=IgbBubbleSeries) - [`IgbHighDensityScatterSeries`](mcp:get_api_reference?platform=blazor&component=IgbHighDensityScatterSeries) - [`IgbScatterSeries`](mcp:get_api_reference?platform=blazor&component=IgbScatterSeries) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md index 38a06f1e9..ee16cad9f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-features.md @@ -510,8 +510,8 @@ Identify data points quickly, even if the value falls between major gridlines wi Label="Marker Type" ShouldOverrideDefaultEditor="true" ValueType="PropertyEditorValueType.EnumValue" - DropDownValues="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" - DropDownNames="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" + DropDownValues="@(new string[] { "Circle", "Checkmark", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" + DropDownNames="@(new string[] { "Circle", "Checkmark", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" PrimitiveValue="@("Circle")" Changed="EditorChangeUpdateMarkerType"> diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md index afea80241..c59c9c6d3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-markers.md @@ -1,9 +1,9 @@ --- title: Blazor Chart Markers | Data Visualization | Infragistics _description: Infragistics' Blazor Chart Markers -_keywords: Blazor Charts, Markers, Infragistics +_keywords: Blazor Charts, Markers, Marker Size, Infragistics _license: commercial -mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType"] +mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"] namespace: Infragistics.Controls.Charts _tocName: Chart Markers _premium: true @@ -15,7 +15,7 @@ In Ignite UI for Blazor, markers are visual elements that display the values of ## Blazor Chart Marker Example -In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the `MarkerType` property to `Circle` enum value. +In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the [`MarkerType`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries&member=MarkerType) property to `Circle` enum value. The colors of the markers are also managed by setting the [`MarkerBrushes`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerBrushes) and [`MarkerOutlines`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerOutlines) properties in the sample below. The markers and [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=ChartType) is configurable in this sample by using the drop-downs as well. @@ -48,8 +48,8 @@ The colors of the markers are also managed by setting the [`MarkerBrushes`](mcp: Label="Marker Type" ShouldOverrideDefaultEditor="true" ValueType="PropertyEditorValueType.EnumValue" - DropDownValues="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" - DropDownNames="@(new string[] { "Circle", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" + DropDownValues="@(new string[] { "Circle", "Checkmark", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" + DropDownNames="@(new string[] { "Circle", "Checkmark", "Automatic", "Triangle", "Pyramid", "Square", "Diamond", "Pentagon", "Hexagon", "Tetragram", "Pentagram", "Hexagram", "None" })" PrimitiveValue="@("Circle")" Changed="EditorChangeUpdateMarkerType"> @@ -148,9 +148,300 @@ public class CountryRenewableElectricity
+## Blazor Chart Marker Size + +You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used. + +By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing. + +The `MarkerSize` property is available on all series types that derive from [`IgbMarkerSeries`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries), including [`IgbLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbLineSeries), [`IgbSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbSplineSeries), [`IgbAreaSeries`](mcp:get_api_reference?platform=blazor&component=IgbAreaSeries), [`IgbColumnSeries`](mcp:get_api_reference?platform=blazor&component=IgbColumnSeries), [`IgbScatterSeries`](mcp:get_api_reference?platform=blazor&component=IgbScatterSeries), [`IgbScatterLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbScatterLineSeries), [`IgbScatterSplineSeries`](mcp:get_api_reference?platform=blazor&component=IgbScatterSplineSeries), and polar/radial series types. + +The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a [`IgbScatterLineSeries`](mcp:get_api_reference?platform=blazor&component=IgbScatterLineSeries) in the [`IgbDataChart`](mcp:get_api_reference?platform=blazor&component=IgbDataChart) control: + +```razor + + + +``` + +To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup): + +```razor + +``` + +The following sample demonstrates `MarkerSize` on scatter series with an interactive editor: + +```razor +@using IgniteUI.Blazor.Controls +@using System + +
+
+ + + + + + + + + +
+
+ Population Statistics for Selected Continents +
+
+ + + +
+
+ + + + + + + + + + + + + + + +
+
+ +@code { + + private Action BindElements { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + var propertyEditor = this.propertyEditor; + var markerSizeEditor = this.markerSizeEditor; + var markerTypeEditor = this.markerTypeEditor; + var legend = this.legend; + var chart = this.chart; + var xAxis = this.xAxis; + var yAxis = this.yAxis; + var scatterSeries1 = this.scatterSeries1; + var scatterSeries2 = this.scatterSeries2; + + this.BindElements = () => { + propertyEditor.Target = this.chart; + chart.Legend = this.legend; + }; + this.BindElements(); + + } + + private IgbPropertyEditorPanel propertyEditor; + private IgbPropertyEditorPropertyDescription markerSizeEditor; + private IgbPropertyEditorPropertyDescription markerTypeEditor; + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbScatterSeries scatterSeries1; + private IgbScatterSeries scatterSeries2; + + public void EditorChangeUpdateDataChartMarkerSize(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var markerSizeVal = Convert.ToInt32(args.NewValue); + var series = chart.ActualSeries; + for (var i = 0; i < series.Count; i++) + { + var markerSeries = series[i] as IgbMarkerSeries; + if (markerSeries != null) + { + markerSeries.MarkerSize = markerSizeVal; + } + } + } + + public void EditorChangeUpdateDataChartMarkerType(IgbPropertyEditorPropertyDescriptionChangedEventArgs args) + { + var chart = this.chart; + var markerTypeVal = (MarkerType)Enum.Parse(typeof(MarkerType), args.NewValue.ToString()); + var series = chart.ActualSeries; + for (var i = 0; i < series.Count; i++) + { + var markerSeries = series[i] as IgbMarkerSeries; + if (markerSeries != null) + { + markerSeries.MarkerType = markerTypeVal; + } + } + } + + private CountryDemographicEurope _countryDemographicEurope = null; + public CountryDemographicEurope CountryDemographicEurope + { + get + { + if (_countryDemographicEurope == null) + { + _countryDemographicEurope = new CountryDemographicEurope(); + } + return _countryDemographicEurope; + } + } + + private CountryDemographicAfrican _countryDemographicAfrican = null; + public CountryDemographicAfrican CountryDemographicAfrican + { + get + { + if (_countryDemographicAfrican == null) + { + _countryDemographicAfrican = new CountryDemographicAfrican(); + } + return _countryDemographicAfrican; + } + } + +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryDemographicAfricanItem +{ + public double Population { get; set; } + public double BirthRate { get; set; } + public double DeathRate { get; set; } + public string Name { get; set; } +} + +public class CountryDemographicAfrican + : List +{ + public CountryDemographicAfrican() + { + this.Add(new CountryDemographicAfricanItem() { Population = 39728000, BirthRate = 23.9, DeathRate = 4.77, Name = @"Algeria" }); + this.Add(new CountryDemographicAfricanItem() { Population = 27884000, BirthRate = 42.32, DeathRate = 8.68, Name = @"Angola" }); + this.Add(new CountryDemographicAfricanItem() { Population = 10576000, BirthRate = 37.43, DeathRate = 9.32, Name = @"Benin" }); + // ... 51 more items + } +} +``` +```csharp +using System; +using System.Collections.Generic; +public class CountryDemographicEuropeItem +{ + public double Population { get; set; } + public double BirthRate { get; set; } + public double DeathRate { get; set; } + public string Name { get; set; } +} + +public class CountryDemographicEurope + : List +{ + public CountryDemographicEurope() + { + this.Add(new CountryDemographicEuropeItem() { Population = 2891000, BirthRate = 11.88, DeathRate = 7.22, Name = @"Albania" }); + this.Add(new CountryDemographicEuropeItem() { Population = 8679000, BirthRate = 9.8, DeathRate = 9.6, Name = @"Austria" }); + this.Add(new CountryDemographicEuropeItem() { Population = 9439000, BirthRate = 12.5, DeathRate = 12.6, Name = @"Belarus" }); + // ... 42 more items + } +} +``` + +> [!NOTE] +> For [`IgbBubbleSeries`](mcp:get_api_reference?platform=blazor&component=IgbBubbleSeries), the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the [`RadiusScale`](mcp:get_api_reference?platform=blazor&component=IgbBubbleSeries&member=RadiusScale). Bubble sizes remain entirely driven by the data and scale configuration. + +
+ +## Blazor Chart Checkmark Marker Type + +The Ignite UI for Blazor charts include a `Checkmark` option in the [`MarkerType`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries&member=MarkerType) enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart. + +You can apply the `Checkmark` marker type to an individual series by setting its [`MarkerType`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries&member=MarkerType) property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's [`MarkerAutomaticBehavior`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerAutomaticBehavior) property to `MarkerAutomaticBehavior.Checkmark`. + +The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart. + +
+ ## Blazor Chart Marker Templates -In addition to marker properties, you can implement your own marker by setting a function to the `MarkerTemplate` property of a series rendered in the [`IgbCategoryChart`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart) control as it is demonstrated in example below. +In addition to marker properties, you can implement your own marker by setting a function to the [`MarkerTemplate`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries&member=MarkerTemplate) property of a series rendered in the [`IgbCategoryChart`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart) control as it is demonstrated in example below. ```razor @using IgniteUI.Blazor.Controls @@ -210,5 +501,10 @@ The following is a list of API members mentioned in the above sections: - [`MarkerBrushes`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerBrushes) - [`MarkerOutlines`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerOutlines) -- `MarkerType` +- `MarkerSize` +- [`MarkerType`](mcp:get_api_reference?platform=blazor&component=IgbMarkerSeries&member=MarkerType) +- `UseLightweightMarkers` +- [`MarkerAutomaticBehavior`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=MarkerAutomaticBehavior) +- `SeriesViewer.CheckmarkMarkerTemplate` - [`IgbCategoryChart`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart) +- [`IgbDataChart`](mcp:get_api_reference?platform=blazor&component=IgbDataChart) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md index b122cc183..efbb72d3f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chart-performance.md @@ -328,7 +328,7 @@ The following table lists chart types in order from the fastest performance to s | Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#blazor-radial-pie-chart) | | Line Charts | - [Category Line Chart](../types/line-chart.md#blazor-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#blazor-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#blazor-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#blazor-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#blazor-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#blazor-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#blazor-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#blazor-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#blazor-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#blazor-stacked-100-line-chart)
| | Area Charts | - [Category Area Chart](../types/area-chart.md#blazor-area-chart-example)
- [Step Area Chart](../types/step-chart.md#blazor-step-area-chart)
- [Range Area Chart](../types/area-chart.md#blazor-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#blazor-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#blazor-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#blazor-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#blazor-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#blazor-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#blazor-stacked-100-area-chart)
| -| Column Charts | - [Column Chart](../types/column-chart.md#blazor-column-chart-example)
- [Bar Chart](../types/bar-chart.md#blazor-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#blazor-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#blazor-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#blazor-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#blazor-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#blazor-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#blazor-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#blazor-stacked-100-bar-chart) | +| Column Charts | - [Column Chart](../types/column-chart.md#blazor-column-chart-example)
- [Bar Chart](../types/bar-chart.md#blazor-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#blazor-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#blazor-range-column-chart)
- [Range Bar Chart](../types/bar-chart.md#blazor-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.md#blazor-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#blazor-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#blazor-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#blazor-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#blazor-stacked-100-bar-chart) | | Spline Charts | - [Category Spline Chart](../types/spline-chart.md#blazor-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#blazor-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#blazor-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#blazor-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#blazor-stacked-100-spline-chart)
| | Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#blazor-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#blazor-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#blazor-polar-marker-chart)
| | Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md index a3b6082df..bb48dae10 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/chip.md @@ -132,31 +132,23 @@ With the `Prefix` and `Suffix` parts of the [`IgbChip`](mcp:get_api_reference?pl
- - - + Custom Icons - - - + Start Slot End Slot - - - + Disabled Slot - - - +
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md index f5b3ce7c8..cd48a15bd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/circular-progress.md @@ -22,7 +22,6 @@ The Ignite UI for Blazor Circular Progress Indicator component provides a visual @@ -120,12 +119,10 @@ Customizing the progress bar in order to use a color gradient instead of a solid width: 300px; display: flex; align-items: center; - margin-top: 30px; } #circularProgress { margin-right: 50px; - margin-left: 20px; --diameter: 100px; --stroke-thickness: 5px; } @@ -247,7 +244,6 @@ igc-circular-progress::part(track) { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md index 3536ff1a7..e28cf2b8b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md @@ -71,21 +71,22 @@ Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_ 1. Open your Claude Desktop configuration file: - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - Windows: `%APPDATA%\Claude\claude_desktop_config.json` + 2. Add the `maker` entry to the `mcpServers` block: -```json -{ - "mcpServers": { - "maker": { - "command": "npx", - "args": ["-y", "@igniteui/maker-mcp", "--stdio"], - "env": { - "Executor__AIProviderKeys__Anthropic": "" + ```json + { + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } } } - } -} -``` + ``` 3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md index 012ae94d5..91c03e388 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md @@ -94,7 +94,7 @@ The [`IgbRating`](mcp:get_api_reference?platform=blazor&component=IgbRating) com { await this.RegisterIconRef.EnsureReady(); string fullHeart = ""; - string emptyHeart = ""; + string emptyHeart = ""; await this.RegisterIconRef.RegisterIconFromTextAsync("heart-full", fullHeart, "material"); await this.RegisterIconRef.RegisterIconFromTextAsync("heart-empty", emptyHeart, "material"); } @@ -124,24 +124,24 @@ The Ignite UI for Blazor Rating component has a single selection mode that allow
-
😣
-
😣
+ 😣 + 😣 -
😔
-
😔
+ 😔 + 😔 -
😐
-
😐
+ 😐 + 😐 -
🙂
-
🙂
+ 🙂 + 🙂 -
😆
-
😆
+ 😆 + 😆
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md index 502a2e7e2..4547930c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md @@ -117,7 +117,7 @@ Use one of the options below to download and place the skill files into the appr ### **Option A - Use the Ignite UI CLI** -The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files - all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. ```bash ig ai-config --assistants generic --agents claude @@ -134,6 +134,9 @@ ig ai-config --assistants generic vscode --agents claude copilot cursor | `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | | `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | +> [!NOTE] +> For Blazor, `ai-config` detects your project via `.csproj` or `.sln`. The `IgniteUI.Blazor` NuGet package does not need to be installed. If no project file is found, the command prompts you to select a framework. + ### **Option B - Use the `GitHub CLI`** The GitHub CLI can be used to download skill files directly from the Ignite UI for Blazor repository. Run the following commands in your project root to start the installation process: @@ -150,40 +153,6 @@ To update skills later, run the following command: gh skill update IgniteUI/igniteui-blazor ``` -If Ignite UI for Blazor is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: - -**macOS / Linux / Windows (PowerShell)** - -```bash -cp -r node_modules/IgniteUI.Blazor/skills/. .agents/skills/ -``` - -**Windows (Command Prompt)** - -```cmd -robocopy node_modules\IgniteUI.Blazor\skills .agents\skills /E -``` - -Or copy individual skill directories as needed: - -**macOS / Linux / Windows (PowerShell)** - -```bash -cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-components .agents/skills/ -cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-grids .agents/skills/ -cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-theming .agents/skills/ -cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-generate-from-image-design .agents/skills/ -``` - -**Windows (Command Prompt)** - -```cmd -robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-components .agents\skills\igniteui-blazor-components /E -robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-grids .agents\skills\igniteui-blazor-grids /E -robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-theming .agents\skills\igniteui-blazor-theming /E -robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-generate-from-image-design .agents\skills\igniteui-blazor-generate-from-image-design /E -``` - ### **Option C - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -216,7 +185,7 @@ Once installed, the skill files are available in the respective location and wil The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: ```bash -npx skills add IgniteUI/IgniteUI.Blazor +npx skills add IgniteUI/igniteui-blazor ``` The CLI will guide you through a series of prompts to: @@ -227,7 +196,7 @@ The CLI will guide you through a series of prompts to: Once complete, the skills are ready to use - no manual file copying required. -> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/IgniteUI.Blazor](https://github.com/IgniteUI/igniteui-blazor) repository. +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-blazor](https://github.com/IgniteUI/igniteui-blazor) repository. --- diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md index 3e06b3b20..170774bb7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md @@ -3,7 +3,7 @@ title: Blazor Stock/Financial Charts | Ignite UI for Blazor _description: The Ignite UI for Blazor Stock Chart is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Try for FREE. _keywords: Blazor Charts, Stock Chart, Financial Chart, Candlestick Chart, OHLC Chart, Infragistics _license: commercial -mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series", "FinancialChartType"] +mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series"] namespace: Infragistics.Controls.Charts _tocName: Financial / Stock Chart _premium: true @@ -15,7 +15,7 @@ The Ignite UI for Blazor Stock Chart, sometimes referred to as Blazor Financial ## Blazor Stock Chart Example -You can create Stock Chart using the [`IgbFinancialChart`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart) control by binding your data and optionally setting [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=ChartType) property to `Line` value, as shown in the example below. +You can create Stock Chart using the [`IgbFinancialChart`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart) control by binding your data and optionally setting [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ChartType) property to `Line` value, as shown in the example below. ```razor @using IgniteUI.Blazor.Controls @@ -472,7 +472,7 @@ Note that is recommended to use line chart type if plotting multiple data source This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the [`ZoomSliderType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ZoomSliderType) to `none` as demonstrated in the following code: -Note that you should set the [`ZoomSliderType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ZoomSliderType) option to the same value as the [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=ChartType) option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this: +Note that you should set the [`ZoomSliderType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ZoomSliderType) option to the same value as the [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ChartType) option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this: In this example, the stock chart is plotting revenue for United States. @@ -534,9 +534,8 @@ You can find more information about related chart features in these topics: The following table lists API members mentioned in the above sections: -- [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbCategoryChart&member=ChartType) +- [`ChartType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ChartType) - [`CrosshairsSnapToData`](mcp:get_api_reference?platform=blazor&component=IgbDomainChart&member=CrosshairsSnapToData) -- [`DataSource`](mcp:get_api_reference?platform=blazor&component=IgbDomainChart&member=DataSource) - [`IgbFinancialChart`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart) - [`IndicatorTypes`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=IndicatorTypes) - [`ZoomSliderType`](mcp:get_api_reference?platform=blazor&component=IgbFinancialChart&member=ZoomSliderType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md index 62be63444..1342cefa3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md @@ -123,6 +123,11 @@ If the space is not enough to fit all tabs, scroll buttons are displayed.
+ Start diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md index 0f99c19ca..791ca89c6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md @@ -59,7 +59,7 @@ With `prefix` and `suffix` slots we can add different content before and after t
-

Give us a short description of what you liked/disliked

+ Give us a short description of what you liked/disliked
@@ -87,10 +87,6 @@ There are three different resize options of the [`IgbTextarea`](mcp:get_api_refe @using IgniteUI.Blazor.Controls