From a4deef6aa821db471edba9d664479cfdbe9f35bb Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Tue, 26 May 2026 16:24:17 +0300 Subject: [PATCH 1/2] fix(skills): correct references in skills --- .../references/charts.md | 172 +++++++++--------- .../references/data-display.md | 14 +- .../references/directives.md | 25 +-- .../references/feedback.md | 14 +- .../references/form-controls.md | 3 +- .../references/layout-manager.md | 5 +- .../references/layout.md | 2 +- .../references/setup.md | 3 - .../references/data-operations.md | 25 ++- .../references/editing.md | 6 +- .../references/features.md | 45 +++-- .../references/paging-remote.md | 6 +- .../references/sizing.md | 10 + .../references/state.md | 10 +- .../references/structure.md | 2 +- .../references/types.md | 19 +- 16 files changed, 194 insertions(+), 167 deletions(-) diff --git a/skills/igniteui-angular-components/references/charts.md b/skills/igniteui-angular-components/references/charts.md index a73586903eb..fdaa6dfe9e9 100644 --- a/skills/igniteui-angular-components/references/charts.md +++ b/skills/igniteui-angular-components/references/charts.md @@ -27,7 +27,7 @@ This reference gives high-level guidance on when to use each chart type, their k | Component | NgModule to import | Description | |---|---|---| -| `IgxCategoryChartComponent` | `IgxCategoryChartModule` | Simplified API for area, bar, column charts | +| `IgxCategoryChartComponent` | `IgxCategoryChartModule` | Simplified API for area, column, line, spline, waterfall charts | | `IgxFinancialChartComponent` | `IgxFinancialChartModule` | Stock/candlestick charts with OHLC data | | `IgxDataChartComponent` | `IgxDataChartModule` | Advanced: explicit axes, series, >65 chart types | | `IgxPieChartComponent` | `IgxPieChartModule` | Part-to-whole pie and donut charts | @@ -35,7 +35,7 @@ This reference gives high-level guidance on when to use each chart type, their k | `IgxLegendComponent` | `IgxLegendModule` | Shared legend component | ### When to use each: -- **Category Chart** → Use for simple area/bar/column; let framework auto-configure +- **Category Chart** → Use for simple area/column/line/spline/waterfall; let framework auto-configure - **Financial Chart** → Use for stock data with time-series OHLC, indicators, volume - **Data Chart** → Use for advanced scenarios: multiple axes, custom series combinations, stacked/scatter - **Pie Chart** → Use for part-to-whole (segments sum to 100%) @@ -52,32 +52,31 @@ chartComponent.dataSource = [ { month: 'Feb', revenue: 6500 } ]; -// Data Chart uses 'itemsSource' and explicit series configuration -chartComponent.itemsSource = dataArray; +// Data Chart: data is bound on individual series via 'itemsSource', not on the chart itself +seriesComponent.itemsSource = dataArray; ``` ### Chart Type Selection -- **Category Chart**: `chartType` property (Auto, Area, Column, Line, Point, etc.) -- **Financial Chart**: `chartType` property (Auto, Candle, Line, Bar, Column) -- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxBarSeries, etc.) +- **Category Chart**: `chartType` property — type: `CategoryChartType` (Auto, Line, Area, Column, Spline, ...) +- **Financial Chart**: `chartType` property — type: `FinancialChartType` (Auto, Bar, Candle, ...) +- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxColumnSeriesComponent, etc.) - **Pie Chart**: No chartType needed; inherent pie structure ### Required Properties **IgxCategoryChartComponent** (simplest API; auto-detects numeric & string columns): - `dataSource` — Data array (required) -- `chartType` — Chart type (Auto, Area, Column, Line, Point, etc.) +- `chartType` — type: `CategoryChartType` - Component auto-detects: first string column → X-axis labels, numeric columns → Y-axis data **IgxDataChartComponent** (advanced; requires explicit configuration): -- `itemsSource` — Data array (required) -- `valueMemberPath` — Which property contains numeric values (for series) +- Data is bound on individual series via `itemsSource`, not on the chart itself +- `valueMemberPath` — Set on the series, not the chart - Requires explicit axis and series components **IgxFinancialChartComponent** (stock data): -- `dataSource` — Data array with date + OHLC columns -- `chartType` — Chart type (Auto, Candle, Line, Bar, Column) -- `openMemberPath`, `highMemberPath`, `lowMemberPath`, `closeMemberPath` — OHLC field names +- `dataSource` — Data array with date + OHLC columns (chart auto-detects columns) +- `chartType` — type: `FinancialChartType` **IgxPieChartComponent**: - `dataSource` — Data array @@ -100,23 +99,23 @@ chartComponent.itemsSource = dataArray; - Gridlines: `xAxisMajorStroke`, `yAxisMajorStroke`, gridline styling ### Tooltips -- **Default tooltips**: Auto-enabled; style with `toolTipType` (Category, Item, etc.) -- **Custom tooltips**: `tooltipTemplate` directive for custom content -- Properties: `showDefaultTooltip`, `toolTipBrush` (color) +- **Default tooltips**: Auto-enabled; style with `toolTipType`: `ToolTipType` (Default, Item, Category, None) +- **Custom tooltips**: `tooltipTemplate` for custom content ### Markers & Data Points - Control marker visibility and style via `markerTypes`, `markerBrushes`, `markerOutlines` -- Properties: `markerSize`, `markerShape` (Circle, Square, Triangle, etc.) -- Use marker templates for custom marker appearance +- Properties: `markerThickness`, `markerMaxCount`, `markerFillMode`, `markerOutlineMode` +- `markerTypes` accepts `MarkerType` values ### Animations -- Enable with `transitionInMode` (Auto, None, FromZero, FromSeries, etc.) -- Control speed via `transitionDuration` (milliseconds) -- Works on initial load and data updates +- Enable with `transitionInMode` — type: `CategoryTransitionInMode` (Auto, FromZero, SweepFromLeft, ...) +- Control initial load speed via `transitionInDuration` (milliseconds) +- Control data-change animation speed via `transitionDuration` (milliseconds) +- `transitionInSpeedType` — type: `TransitionInSpeedType` ### Highlighting & Selection -- **Highlighting**: Mouse hover effect; set `highlightingMode`, `highlightingBehavior` -- **Selection**: Click to select data points/series; properties vary by chart type +- **Highlighting**: Mouse hover effect; `highlightingMode`: `SeriesHighlightingMode` (None, Brighten, FadeOthers, ...), `highlightingBehavior`: `SeriesHighlightingBehavior` +- **Selection**: Click to select data points/series; `selectionMode`: `SeriesSelectionMode`, `selectionBehavior`: `SeriesSelectionBehavior` ### Zooming & Panning - Mouse wheel to zoom; drag to pan @@ -124,18 +123,18 @@ chartComponent.itemsSource = dataArray; - Keyboard support: Arrow keys, +/- for zoom ### Trendlines -- Visualize data trends with trendline types (Linear, Logarithmic, Exponential, etc.) -- Property: `trendLineType` (Category/Financial charts) +- Property: `trendLineType`: `TrendLineType` (Category/Financial charts) ### Legend - Display with `legend` property (assign `IgxLegendComponent`) - `legendItemTemplate` for custom legend items -- Properties: `showLegend`, `legendOrientation`, `legendPosition` +- Properties: `legendItemVisibility`, `legendHighlightingMode`, `legendItemBadgeShape` +- `legendOrientation` is set on the `IgxLegendComponent` itself, not on the chart ### Annotations -- **Crosshairs**: `crosshairsDisplayMode` (None, Vertical, Horizontal, Both) -- **Final Value Layer**: Show ending values on axis -- **Callout Layer**: Custom callouts at specific values +- **Crosshairs**: `crosshairsDisplayMode`: `CrosshairsDisplayMode` +- **Final Value Layer**: `finalValueAnnotationsVisible` — show ending values on axis +- **Callout Layer**: `calloutsVisible` — custom callouts at specific values - **Range Annotations**: Highlight data ranges --- @@ -146,7 +145,7 @@ chartComponent.itemsSource = dataArray; - **Use**: Trends over time, cumulative part-to-whole - **Data**: X-axis categories, Y-axis numeric values - **Variants**: Area, StepArea, Stacked Area, Stacked 100% Area -- **API**: `chartType`, `valueMemberPath`, `categoryXAxis` +- **API**: `chartType`, `dataSource` (auto-detects numeric columns) - **Best Practices**: - Start Y-axis at 0 for accuracy - Use transparent colors for overlaid series @@ -157,7 +156,7 @@ chartComponent.itemsSource = dataArray; - **Use**: Compare categories, show rankings, time-series changes - **Data**: X-axis numeric, Y-axis categories (reversed from Column) - **Variants**: Grouped Bar, Stacked Bar, Stacked 100% Bar, Polar Bar -- **API**: `IgxBarSeriesComponent`, `valueMemberPath`, `argumentMemberPath` +- **API**: `IgxBarSeriesComponent`, `valueMemberPath`, `valueAxis`, `categoryAxis` - **Best Practices**: - Start numeric axis at 0 - Sort categories by value (ascending/descending) @@ -168,7 +167,7 @@ chartComponent.itemsSource = dataArray; - **Use**: Compare categories, show distribution, time-series changes - **Data**: X-axis categories, Y-axis numeric values - **Variants**: Column, StackedColumn, Stacked100%Column, RangeColumn, WaterfallColumn -- **API**: `chartType`, `valueMemberPath`, `categoryXAxis` +- **API**: `chartType`, `dataSource` (auto-detects numeric columns) - **Best Practices**: - Start Y-axis at 0 - Order time-series left to right @@ -186,20 +185,20 @@ chartComponent.itemsSource = dataArray; - **Volume Pane**: Show trading volume (column, line, or area chart) - **Indicator Pane**: Financial indicators (RSI, MACD, Bollinger Bands, etc.) - **Zoom Pane**: Navigation slider to zoom/pan -- **Chart Types**: `Auto` (default), `Candle`, `Line`, `Bar`, `Column` - **API**: - - `chartType` — Price display type (Auto, Line, Candle, Bar, Column) - - `volumeType` — Volume display (None, Column, Line, Area) - - `indicatorTypes` — Array of indicators (0 or more) - - `zoomSliderType` — Zoom pane display (defaults to match chartType) + - `chartType`: `FinancialChartType` + - `volumeType`: `FinancialChartVolumeType` + - `indicatorTypes`: `FinancialIndicatorType[]` + - `zoomSliderType`: `FinancialChartZoomSliderType` - **Indicators**: RSI, MACD, Bollinger Bands, Force Index, Standard Deviation, and more - **Features**: - Crosshairs with value snapshots - Trendlines and overlays - Time-based filters (users can select 1M, 3M, 6M, YTD, 1Y, ALL) - **Data Binding**: - - `openMemberPath`, `highMemberPath`, `lowMemberPath`, `closeMemberPath`, `volumeMemberPath` - - `dateMemberPath` — Date/time column + - The Financial Chart auto-detects OHLC, Volume, and Date columns from the data source + - Data items should have properties named like `open`, `high`, `low`, `close`, `volume`, `date` (or similar) + - No explicit member path properties are needed on the chart component ### Pie Chart (`IgxPieChartComponent` or `IgxDataPieChartComponent`) - **Use**: Part-to-whole visualization (segments sum to 100%) @@ -209,9 +208,9 @@ chartComponent.itemsSource = dataArray; - `labelMemberPath` — Data property for slice labels - `valueMemberPath` — Data property for numeric values - `legend` — Assign IgxLegendComponent for legend display - - `selectionMode` — Single, Multiple, Manual (default Single) + - `selectionMode`: `SliceSelectionMode` - `othersCategoryThreshold` — Combine small slices into "Others" - - `othersCategoryType` — Threshold as Number or Percent + - `othersCategoryType`: `OthersCategoryType` - `allowSliceExplosion` — Enable click to expand slice - `allowSliceSelection` — Enable click selection highlighting - **Features**: @@ -231,76 +230,70 @@ chartComponent.itemsSource = dataArray; ## Common API Members by Chart Type -### IgxCategoryChartComponent (Area, Bar, Column, Line, etc.) +### IgxCategoryChartComponent (Area, Column, Line, etc.) ```typescript // Required dataSource: any[]; // Data array (auto-detects numeric fields) -chartType: CategoryChartType; // Auto, Area, Column, Line, Point, etc. +chartType: CategoryChartType; // Common optional inputs xAxisTitle: string; // X-axis label yAxisTitle: string; // Y-axis label -xAxisLabelLocation: AxisLabelLocation; // Axis label alignment -yAxisLabelLocation: AxisLabelLocation; +xAxisLabelLocation: XAxisLabelLocation; +yAxisLabelLocation: YAxisLabelLocation; yAxisMinimumValue: number; // Y-axis minimum yAxisMaximumValue: number; // Y-axis maximum brushes: string[]; // Series colors (fill) outlines: string[]; // Series colors (outline) -markerTypes: MarkerType[]; // Marker shapes (Circle, Square, etc.) +markerTypes: MarkerType[]; markerBrushes: string[]; // Marker fill colors markerOutlines: string[]; // Marker outline colors -toolTipType: ToolTipType; // Tooltip display mode -highlightingMode: HighlightingMode; // Hover highlight behavior -highlightingBehavior: HighlightingBehavior; -trendLineType: TrendLineType; // Trendline visualization -transitionInMode: TransitionInMode; // Animation on load -transitionInDuration: number; // Animation duration (milliseconds) +toolTipType: ToolTipType; +highlightingMode: SeriesHighlightingMode; +highlightingBehavior: SeriesHighlightingBehavior; +trendLineType: TrendLineType; +transitionInMode: CategoryTransitionInMode; +transitionInDuration: number; // Initial load animation duration (milliseconds) ``` ### IgxFinancialChartComponent (Stock/Candlestick/OHLC) ```typescript -chartType: FinancialChartType; // Auto, Line, Candle, Bar, Column -itemsSource: any[]; -openMemberPath: string; -highMemberPath: string; -lowMemberPath: string; -closeMemberPath: string; -volumeMemberPath: string; -dateMemberPath: string; -volumeType: VolumeType; // None, Column, Line, Area -indicatorTypes: IndicatorType[]; // RSI, MACD, etc. -zoomSliderType: FinancialChartType; // Should match chartType +chartType: FinancialChartType; +dataSource: any[]; // Data array (auto-detects OHLC and date columns) +volumeType: FinancialChartVolumeType; +indicatorTypes: FinancialIndicatorType[]; +zoomSliderType: FinancialChartZoomSliderType; xAxisTitle: string; yAxisTitle: string; -xAxisMode: AxisMode; // OrdinalTimeX, DateTimeX -yAxisMode: AxisMode; -showDefaultTooltip: boolean; +xAxisMode: FinancialChartXAxisMode; +yAxisMode: FinancialChartYAxisMode; +toolTipType: ToolTipType; isHorizontalZoomEnabled: boolean; isVerticalZoomEnabled: boolean; crosshairsDisplayMode: CrosshairsDisplayMode; trendLineType: TrendLineType; +isToolbarVisible: boolean; +isLegendVisible: boolean; ``` ### IgxPieChartComponent / IgxDataPieChartComponent ```typescript -itemsSource: any[]; +dataSource: any[]; labelMemberPath: string; valueMemberPath: string; legend: IgxLegendComponent; legendLabelMemberPath: string; -legendItemTemplate: TemplateRef; -legendItemBadgeTemplate: TemplateRef; -selectionMode: SelectionMode; // Single, Multiple, Manual -selectionBehavior: SelectionBehavior; +legendItemTemplate: IgDataTemplate; +legendItemBadgeTemplate: IgDataTemplate; +selectionMode: SliceSelectionMode; allowSliceExplosion: boolean; allowSliceSelection: boolean; othersCategoryThreshold: number; -othersCategoryType: OthersCategoryType; // Number, Percent +othersCategoryType: OthersCategoryType; startAngle: number; radiusFactor: number; -showDefaultTooltip: boolean; -toolTipType: ToolTipType; -highlightingMode: HighlightingMode; +innerExtent: number; // 0 for pie, >0 for donut (ring) +sweepDirection: SweepDirection; ``` --- @@ -324,19 +317,28 @@ import { // Enums and types — these ARE plain TS exports and can be imported directly import { + CategoryChartType, + CategoryTransitionInMode, FinancialChartType, + FinancialChartVolumeType, + FinancialChartXAxisMode, + FinancialChartYAxisMode, + FinancialChartZoomSliderType, + FinancialIndicatorType, MarkerType, ToolTipType, - TrendLineTypeCollection, - HighlightingMode, + TrendLineType, + SeriesHighlightingMode, + SeriesHighlightingBehavior, TransitionInSpeedType, - AxisLabelSettings, CrosshairsDisplayMode, - LegendOrientation, - OthersCategoryContext, + SliceSelectionMode, SeriesSelectionMode, + OthersCategoryType, IndicatorDisplayType, - FinancialChartVolumeType, + XAxisLabelLocation, + YAxisLabelLocation, + LegendOrientation, AxisOrientation } from 'igniteui-angular-charts'; ``` @@ -347,7 +349,7 @@ import { import { Component } from '@angular/core'; import { IgxCategoryChartModule, - ChartType + CategoryChartType } from 'igniteui-angular-charts'; @Component({ @@ -414,9 +416,9 @@ import { IgxCategoryChartModule } from 'igniteui-angular-charts'; ### Color Customization - **Series colors**: `brushes` (fill), `outlines` (border) - **Marker colors**: `markerBrushes`, `markerOutlines` -- **Axis styles**: `xAxisMajorStroke`, `yAxisMajorStroke`, `xAxisLabelBrush`, `yAxisLabelBrush` -- **Tooltip**: `toolTipBrush`, `toolTipTextColor` -- **Highlight**: `highlightedSeriesOpacity`, `highlightedItemsOpacity` +- **Axis styles**: `xAxisMajorStroke`, `yAxisMajorStroke`, `xAxisLabelTextColor`, `yAxisLabelTextColor` +- **Tooltip**: Controlled via `toolTipType` and custom tooltip templates +- **Highlight**: `highlightingFadeOpacity` (opacity for faded non-highlighted series) ### CSS & Host Binding - Chart containers inherit CSS flex/grid properties diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md index 8ab836a9b97..754502498be 100644 --- a/skills/igniteui-angular-components/references/data-display.md +++ b/skills/igniteui-angular-components/references/data-display.md @@ -35,9 +35,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; @for (contact of contacts; track contact.id) { - {{ contact.name }} + {{ contact.name }} {{ contact.phone }} - {{ contact.email }} phone } @@ -55,7 +54,7 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree'; ``` ```html - + @for (node of treeData; track node.id) { folder @@ -71,14 +70,14 @@ import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree'; ``` -Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`. +Selection modes: `'None'`, `'BiState'`, `'Cascading'`. ## Card > **Docs:** [Card Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card) ```typescript -import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card'; +import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective } from 'igniteui-angular/card'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxRippleDirective } from 'igniteui-angular/directives'; @@ -91,7 +90,8 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; - + +

{{ article.title }}

{{ author.name }}
 @@ -268,7 +268,7 @@ import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; ``` -Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'danger'`. +Types for linear bar: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`. ## Chat (AI Chat Component) diff --git a/skills/igniteui-angular-components/references/directives.md b/skills/igniteui-angular-components/references/directives.md index 7b242d17c28..518fdf937f8 100644 --- a/skills/igniteui-angular-components/references/directives.md +++ b/skills/igniteui-angular-components/references/directives.md @@ -129,7 +129,7 @@ onDeselected(event: IButtonGroupEventArgs) { | `(selected)` | `IButtonGroupEventArgs` | A button is selected. | | `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. | -`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above). +`IButtonGroupEventArgs`: `{ button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above). **Key inputs on each `
Helpful tooltip text
``` -Inputs on `[igxTooltipTarget]`: `[igxTooltipTargetShowDelay]` (ms), `[igxTooltipTargetHideDelay]` (ms), `[tooltipDisabled]`. +Inputs on `[igxTooltipTarget]`: `[showDelay]` (ms), `[hideDelay]` (ms), `[tooltipDisabled]`. -Programmatic control: +Programmatic control via the target directive: ```typescript -tooltip = viewChild.required('myTooltip'); +tooltipTarget = viewChild.required(IgxTooltipTargetDirective); -showTooltip() { this.tooltip().open(); } -hideTooltip() { this.tooltip().close(); } +show() { this.tooltipTarget().showTooltip(); } +hide() { this.tooltipTarget().hideTooltip(); } ``` ## Drag and Drop @@ -217,15 +217,16 @@ import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEve ```html -
+
drag_indicator {{ item.name }}
-
+
Drop here
+
``` ```typescript @@ -253,7 +254,7 @@ onDrop(event: IDropDroppedEventArgs) { ```html @for (item of items; track item.id) { - + drag_handle {{ item.name }} @@ -261,8 +262,8 @@ onDrop(event: IDropDroppedEventArgs) { ``` -Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`. -Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`. +Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`. +Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`. > **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers. diff --git a/skills/igniteui-angular-components/references/feedback.md b/skills/igniteui-angular-components/references/feedback.md index abdd9046b7c..b6b462f7d2c 100644 --- a/skills/igniteui-angular-components/references/feedback.md +++ b/skills/igniteui-angular-components/references/feedback.md @@ -31,7 +31,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; [isModal]="true" [closeOnEscape]="true" [closeOnOutsideSelect]="false" - title="Confirm Delete" (closed)="onDialogClosed()"> Confirm Delete

Are you sure you want to delete this item? This action cannot be undone.

@@ -60,7 +59,7 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`, > **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar) ```typescript -import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; import { IgxButtonDirective } from 'igniteui-angular/directives'; ``` @@ -69,9 +68,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; #snackbar [displayTime]="3000" [autoHide]="true" + actionText="UNDO" + (clicked)="undo()" (animationDone)="onSnackbarDone()"> Item saved successfully - ``` @@ -114,12 +114,12 @@ import { IgxButtonDirective } from 'igniteui-angular/directives'; ```html - wifi_off + wifi_off You are offline. Some features may not be available. -
- + + -
+ ``` diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md index ae6c2bd1314..e2b32b3436e 100644 --- a/skills/igniteui-angular-components/references/form-controls.md +++ b/skills/igniteui-angular-components/references/form-controls.md @@ -202,8 +202,7 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker'; ```html + [inputFormat]="'HH:mm'"> ``` diff --git a/skills/igniteui-angular-components/references/layout-manager.md b/skills/igniteui-angular-components/references/layout-manager.md index d49d8e36400..4f51423decc 100644 --- a/skills/igniteui-angular-components/references/layout-manager.md +++ b/skills/igniteui-angular-components/references/layout-manager.md @@ -130,12 +130,11 @@ npm install igniteui-dockmanager Because Dock Manager is a Web Component, it requires two one-time setup steps: -**1. Register custom elements — `main.ts`:** +**1. Register custom elements — `app.config.ts`:** ```typescript import { defineCustomElements } from 'igniteui-dockmanager/loader'; -// Must be called before bootstrapApplication defineCustomElements(); ``` @@ -409,7 +408,7 @@ export class DockManagerComponent { ### Key Rules for Dock Manager 1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular` -2. **Call `defineCustomElements()` in `main.ts`** before `bootstrapApplication` — without this the `` element renders as an unknown element +2. **Call `defineCustomElements()` from `igniteui-dockmanager/loader` in `app.config.ts`** — without this the `` element renders as an unknown element 3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses `` 4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout 5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users diff --git a/skills/igniteui-angular-components/references/layout.md b/skills/igniteui-angular-components/references/layout.md index 86819fff7eb..29cd4c13da1 100644 --- a/skills/igniteui-angular-components/references/layout.md +++ b/skills/igniteui-angular-components/references/layout.md @@ -100,7 +100,7 @@ import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper'; ``` -Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[animationType]`. +Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[horizontalAnimationType]` (`'slide'` | `'fade'` | `'none'`), `[verticalAnimationType]` (`'grow'` | `'fade'` | `'none'`), `[animationDuration]`. Events: `(activeStepChanging)`, `(activeStepChanged)`. diff --git a/skills/igniteui-angular-components/references/setup.md b/skills/igniteui-angular-components/references/setup.md index a8c03016ab9..cf0c8df7fff 100644 --- a/skills/igniteui-angular-components/references/setup.md +++ b/skills/igniteui-angular-components/references/setup.md @@ -29,13 +29,11 @@ Both packages share identical entry-point paths. Everywhere below, replace `igni import { ApplicationConfig } from '@angular/core'; import { provideAnimations } from '@angular/platform-browser/animations'; import { provideRouter } from '@angular/router'; -import { provideIgniteIntl } from 'igniteui-angular/core'; export const appConfig: ApplicationConfig = { providers: [ provideAnimations(), // REQUIRED — all overlay and animated components provideRouter(appRoutes), - provideIgniteIntl(), // recommended — localization for date/time pickers, grids, etc. ] }; ``` @@ -44,7 +42,6 @@ export const appConfig: ApplicationConfig = { |---|---|---| | `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service | | `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) | -| `provideIgniteIntl()` | `igniteui-angular/core` | Localization for grids, date/time pickers, and components displaying formatted values | > **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size: > ```typescript diff --git a/skills/igniteui-angular-grids/references/data-operations.md b/skills/igniteui-angular-grids/references/data-operations.md index 7406e99bf22..d103a57f572 100644 --- a/skills/igniteui-angular-grids/references/data-operations.md +++ b/skills/igniteui-angular-grids/references/data-operations.md @@ -178,18 +178,21 @@ this.gridRef().clearSort(); | Event | Cancelable | Payload | |---|---|---| | `(sorting)` | Yes | `ISortingEventArgs` — set `event.cancel = true` to prevent | -| `(sortingDone)` | No | `ISortingEventArgs` — fires after sort is applied | +| `(sortingDone)` | No | `ISortingExpression \| ISortingExpression[]` — fires after sort is applied | ```typescript onSorting(event: ISortingEventArgs) { // Prevent sorting on a specific column - if (event.fieldName === 'id') { + const exprs = Array.isArray(event.sortingExpressions) + ? event.sortingExpressions : [event.sortingExpressions]; + if (exprs.some(e => e?.fieldName === 'id')) { event.cancel = true; } } -onSortingDone(event: ISortingEventArgs) { - console.log('Sorted by:', event.fieldName, event.dir); +onSortingDone(event: ISortingExpression | ISortingExpression[]) { + const expr = Array.isArray(event) ? event[0] : event; + console.log('Sorted by:', expr.fieldName, expr.dir); // Good place to trigger remote data fetch } ``` @@ -204,8 +207,8 @@ import { ISortingStrategy, SortingDirection } from 'igniteui-angular/core'; class PrioritySortStrategy implements ISortingStrategy { private priorityOrder = ['Critical', 'High', 'Medium', 'Low']; - sort(data: any[], fieldName: string, dir: SortingDirection): any[] { - return data.sort((a, b) => { + sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string) => any): any[] { + return [...data].sort((a, b) => { const indexA = this.priorityOrder.indexOf(a[fieldName]); const indexB = this.priorityOrder.indexOf(b[fieldName]); return dir === SortingDirection.Asc ? indexA - indexB : indexB - indexA; @@ -305,8 +308,11 @@ this.gridRef().cdr.detectChanges(); ### Global Filtering & Cross-Column Logic +> **DEPRECATED (v19.0+):** `filterGlobal()` is deprecated. Use `filteringExpressionsTree` to build a tree that applies conditions across all columns instead. + ```typescript // Filter all filterable columns at once with a search term +// ⚠️ Deprecated since v19.0 — prefer filteringExpressionsTree this.gridRef().filterGlobal('search term', IgxStringFilteringOperand.instance().condition('contains'), true); ``` @@ -319,7 +325,8 @@ Control the AND/OR logic between **different column** filters: ``` ```typescript -import { FilteringLogic } from 'igniteui-angular'; +import { FilteringLogic } from 'igniteui-angular/core'; +// import { FilteringLogic } from '@infragistics/igniteui-angular/core'; for licensed package // FilteringLogic.And (default) — row must match ALL column filters // FilteringLogic.Or — row must match ANY column filter @@ -331,11 +338,11 @@ filteringLogic = FilteringLogic.And; | Event | Cancelable | Payload | |---|---|---| | `(filtering)` | Yes | `IFilteringEventArgs` — set `event.cancel = true` to prevent | -| `(filteringDone)` | No | `IFilteringEventArgs` — fires after a **column-level** filter is applied | +| `(filteringDone)` | No | `IFilteringExpressionsTree` — fires after a **column-level** filter is applied | | `(filteringExpressionsTreeChange)` | No | `IFilteringExpressionsTree` — fires after the **grid-level** filter tree changes (use this for remote data) | ```typescript -onFilteringDone(event: IFilteringEventArgs) { +onFilteringDone(event: IFilteringExpressionsTree) { // Trigger remote data fetch with new filter state this.loadFilteredData(); } diff --git a/skills/igniteui-angular-grids/references/editing.md b/skills/igniteui-angular-grids/references/editing.md index c4d6b274a13..6f4692590db 100644 --- a/skills/igniteui-angular-grids/references/editing.md +++ b/skills/igniteui-angular-grids/references/editing.md @@ -171,10 +171,10 @@ When starting a new row programmatically, pre-populate fields using `(cellEditEn ```typescript onCellEditEnter(event: IGridEditEventArgs) { if (event.isAddRow && event.column.field === 'available') { - event.cellEditArgs.newValue = true; // default new cars to available + event.newValue = true; // default new cars to available } if (event.isAddRow && event.column.field === 'year') { - event.cellEditArgs.newValue = new Date().getFullYear(); + event.newValue = new Date().getFullYear(); } } ``` @@ -475,7 +475,7 @@ When grouping is enabled, summaries appear for each group. Control this with: 2. **`[primaryKey]` is required for all editing** — row editing, batch editing, row adding, and row deletion all depend on it (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite) 3. **Always set `[autoGenerate]="false"` when editing** — define columns explicitly and mark each with `[editable]="true"` to control exactly what users can change 4. **Batch editing requires `[primaryKey]`** — call `endEdit(true)` before `transactions.undo()`/`redo()`, commit via `transactions.commit(data)` -5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(paging)` to prevent the action +5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(rowEditEnter)`, `(cellEditEnter)` to prevent the action 6. **Validation** — use template-driven validators on columns (`required`, `min`, `max`, `email`, `pattern`) or reactive validators via `(formGroupCreated)` 7. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent` 8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES` diff --git a/skills/igniteui-angular-grids/references/features.md b/skills/igniteui-angular-grids/references/features.md index dc785782310..250b94d1be9 100644 --- a/skills/igniteui-angular-grids/references/features.md +++ b/skills/igniteui-angular-grids/references/features.md @@ -67,24 +67,35 @@ For advanced programmatic grouping patterns — see [`data-operations.md`](./dat Merge adjacent cells with equal values: ```html - + + + ``` -Or apply a custom merge strategy: +Grid merge modes (`cellMergeMode`): +- `'onSort'` — merge only when the column is sorted **(default)** +- `'always'` — merge regardless of sort state + +Or apply a custom merge strategy at the **grid level** (not column): ```html - + + + ``` ```typescript -import { IGridMergeStrategy } from 'igniteui-angular/core'; -// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package +import { DefaultMergeStrategy } from 'igniteui-angular/core'; +// import { DefaultMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package -priceRangeMerge: IGridMergeStrategy = { - shouldMerge(prevCell, curCell) { - return Math.abs(prevCell.value - curCell.value) < 10; +// Extend DefaultMergeStrategy and override comparer +class PriceRangeMergeStrategy extends DefaultMergeStrategy { + public override comparer(prevRecord: any, record: any, field: string): boolean { + return Math.abs(prevRecord[field] - record[field]) < 10; } -}; +} + +customMerge = new PriceRangeMergeStrategy(); ``` ## Toolbar @@ -164,12 +175,24 @@ For full remote virtualization patterns — see [`paging-remote.md`](./paging-re ```html - - Moving {{ dragData.dragData.name }} + + + arrow_right_alt ``` +Handle drops via `igxDrop` on the target: + +```typescript +import { IDropDroppedEventArgs } from 'igniteui-angular/directives'; + +onDropAllowed(args: IDropDroppedEventArgs) { + this.targetGrid.addRow(args.dragData.data); // row data + this.sourceGrid.deleteRow(args.dragData.key); // primary key +} +``` + ## Action Strip > **Docs:** [Action Strip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action-strip) diff --git a/skills/igniteui-angular-grids/references/paging-remote.md b/skills/igniteui-angular-grids/references/paging-remote.md index df2318437a1..cb58ad3afbb 100644 --- a/skills/igniteui-angular-grids/references/paging-remote.md +++ b/skills/igniteui-angular-grids/references/paging-remote.md @@ -130,11 +130,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid'; import { IFilteringExpressionsTree, + ISortingExpression, NoopSortingStrategy, NoopFilteringStrategy } from 'igniteui-angular/core'; import { IForOfState } from 'igniteui-angular/directives'; -import { ISortingEventArgs } from 'igniteui-angular/grids/core'; import { debounceTime, Subject } from 'rxjs'; @Component({ @@ -156,7 +156,7 @@ export class RemoteGridComponent { private dataService = inject(OrderService); private destroyRef = inject(DestroyRef); - private currentSort: ISortingEventArgs[] | undefined; + private currentSort: ISortingExpression[] | undefined; private currentFilter: IFilteringExpressionsTree | undefined; // Debounce rapid dataPreLoad events during fast scrolling @@ -179,7 +179,7 @@ export class RemoteGridComponent { this.dataPreLoad$.next(event); } - onSortingDone(event: ISortingEventArgs) { + onSortingDone() { this.currentSort = this.gridRef().sortingExpressions; this.loadData(0, 15); } diff --git a/skills/igniteui-angular-grids/references/sizing.md b/skills/igniteui-angular-grids/references/sizing.md index d7b99cb7639..5cf718b9108 100644 --- a/skills/igniteui-angular-grids/references/sizing.md +++ b/skills/igniteui-angular-grids/references/sizing.md @@ -25,6 +25,15 @@ The grid supports both component inputs (`width`/`height`) and regular CSS/layou **Default:** `100%` — the grid fills available width of the parent/window. +### `null` Width + +```html + +``` + +- All columns are rendered in the DOM — **horizontal column virtualization is disabled**. +- **Warning:** rendering many columns without virtualization can significantly impact performance. + ### Pixel Width ```html @@ -141,6 +150,7 @@ html, body, .grid-container { - Column width is calculated as a percentage of the grid width. - Responsive — resizes when the grid resizes. - Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar. +- If the grid `width` is `null`, percentage-width columns fall back to `136px` each. ## Grid Cell Spacing Control diff --git a/skills/igniteui-angular-grids/references/state.md b/skills/igniteui-angular-grids/references/state.md index 2ffdd43d24f..9094f535b08 100644 --- a/skills/igniteui-angular-grids/references/state.md +++ b/skills/igniteui-angular-grids/references/state.md @@ -260,18 +260,16 @@ regionFilter.filteringOperands = [ } ]; -// Apply the filter to a dimension +// Apply the filter to a dimension and notify the grid this.pivotConfig.filters[0].filter = regionFilter; -// Notify the grid of the change -this.pivotGridRef().pipeTrigger++; +this.pivotGridRef().notifyDimensionChange(true); ``` ### Dimension-Based Sorting ```typescript -// Sort a row dimension -this.pivotConfig.rows[0].sortDirection = SortingDirection.Desc; -this.pivotGridRef().pipeTrigger++; +// Sort a row dimension via the public API +this.pivotGridRef().sortDimension(this.pivotConfig.rows[0], SortingDirection.Desc); ``` ### Key Pivot Grid Limitations diff --git a/skills/igniteui-angular-grids/references/structure.md b/skills/igniteui-angular-grids/references/structure.md index 371a8de56c8..57a6b5e933c 100644 --- a/skills/igniteui-angular-grids/references/structure.md +++ b/skills/igniteui-angular-grids/references/structure.md @@ -249,7 +249,7 @@ For advanced programmatic filtering, complex AND/OR trees, and remote filtering - + diff --git a/skills/igniteui-angular-grids/references/types.md b/skills/igniteui-angular-grids/references/types.md index 08c69e08aea..29f557f5db4 100644 --- a/skills/igniteui-angular-grids/references/types.md +++ b/skills/igniteui-angular-grids/references/types.md @@ -188,8 +188,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core'; import { IgxGridLiteComponent, IgxGridLiteColumnComponent, - IgxGridLiteCellTemplateDirective, - IgxGridLiteHeaderTemplateDirective + IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; @Component({ @@ -197,8 +196,7 @@ import { imports: [ IgxGridLiteComponent, IgxGridLiteColumnComponent, - IgxGridLiteCellTemplateDirective, - IgxGridLiteHeaderTemplateDirective + IgxGridLiteCellTemplateDirective ], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required — Grid Lite is a Web Component templateUrl: './users-lite.component.html', @@ -215,7 +213,6 @@ export class UsersLiteComponent { ```html ` with these inputs: ### Templates -Cell and header templates use dedicated directives: +Cell templates use the `igxGridLiteCell` directive: ```html - {{ value }} - - - - {{ column.header }} - ``` @@ -345,9 +336,9 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration = { | Event | Cancelable | Payload | |---|---|---| -| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied | +| `(sorting)` | Yes (`event.preventDefault()`) | Sorting expression about to be applied | | `(sorted)` | No | Sorting completed | -| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied | +| `(filtering)` | Yes (`event.preventDefault()`) | Filter expression about to be applied | | `(filtered)` | No | Filtering completed | ### Grid Lite Limitations From bb9869e9420ca600130741037e05bdececf7005e Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Wed, 27 May 2026 14:24:30 +0300 Subject: [PATCH 2/2] chore(*): address PR comments --- .../references/directives.md | 7 +++---- .../references/setup.md | 2 ++ .../references/paging-remote.md | 2 +- .../references/types.md | 21 ++++++++++++------- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/skills/igniteui-angular-components/references/directives.md b/skills/igniteui-angular-components/references/directives.md index 518fdf937f8..598a07d7cc6 100644 --- a/skills/igniteui-angular-components/references/directives.md +++ b/skills/igniteui-angular-components/references/directives.md @@ -129,7 +129,7 @@ onDeselected(event: IButtonGroupEventArgs) { | `(selected)` | `IButtonGroupEventArgs` | A button is selected. | | `(deselected)` | `IButtonGroupEventArgs` | A button is deselected. | -`IButtonGroupEventArgs`: `{ button: IgxButtonDirective; index: number }`, where `IgxButtonDirective` is imported from `igniteui-angular/directives` (see **Button & Icon Button** section above). +`IButtonGroupEventArgs`: `{ owner: IgxButtonGroupComponent; button: IgxButtonDirective; index: number }`, where `IgxButtonGroupComponent` is from `igniteui-angular/button-group` and `IgxButtonDirective` is from `igniteui-angular/directives` (see **Button & Icon Button** section above). **Key inputs on each `