Skip to content

Commit f6c003e

Browse files
zdrawkuzdrawku
authored
Skill improvements (#16974) Imports updates
1 parent 23e2139 commit f6c003e

10 files changed

Lines changed: 136 additions & 47 deletions

File tree

‎skills/igniteui-angular-components/SKILL.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
name: igniteui-angular-components
3-
description: "All Ignite UI Angular UI components: application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager directives), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use for any non-grid Ignite UI Angular UI question."
3+
description: "All Ignite UI Angular UI components: application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use for any non-grid Ignite UI Angular UI question."
44
user-invokable: true
55
---
66

‎skills/igniteui-angular-components/references/data-display.md‎

Lines changed: 89 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,8 @@ Selection modes: `'None'`, `'BiCascade'`, `'Cascade'`.
6464
```typescript
6565
import { IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective, IgxCardActionsComponent, IgxCardMediaDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardHeaderThumbnailDirective } from 'igniteui-angular/card';
6666
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
67-
import { IgxButtonDirective } from 'igniteui-angular/button';
68-
import { IgxRippleDirective } from 'igniteui-angular/ripple';
69-
import { IgxIconButtonDirective } from 'igniteui-angular/button';
67+
import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
68+
import { IgxRippleDirective } from 'igniteui-angular/directives';
7069
import { IgxIconComponent } from 'igniteui-angular/icon';
7170
```
7271

@@ -215,8 +214,8 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
215214
> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-progress) · [Circular Progress](https://www.infragistics.com/products/ignite-ui-angular/angular/components/circular-progress)
216215
217216
```typescript
218-
import { IgxLinearProgressBarComponent } from 'igniteui-angular/linear-progress-bar';
219-
import { IgxCircularProgressBarComponent } from 'igniteui-angular/circular-progress-bar';
217+
import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar';
218+
import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
220219
```
221220

222221
```html
@@ -248,26 +247,94 @@ import { IgxChatComponent } from 'igniteui-angular/chat';
248247
```
249248

250249
```html
251-
<igx-chat
252-
[messages]="messages()"
253-
[isSendDisabled]="isLoading()"
254-
(sendMessage)="onSend($event)">
255-
</igx-chat>
250+
<igx-chat
251+
[options]="options()"
252+
[messages]="messages()"
253+
[draftMessage]="draftMessage"
254+
[templates]="templates()"
255+
(messageCreated)="onMessageCreated($event)">
256+
</igx-chat>
257+
258+
<ng-template #messageHeader let-message>
259+
@if (message.sender !== 'user') {
260+
<div>
261+
<span style="font-weight: bold; color: #c00000;"
262+
>Developer Support</span
263+
>
264+
</div>
265+
}
266+
</ng-template>
267+
268+
<ng-template #suggestionPrefix>
269+
<span style="font-weight: bold">💡</span>
270+
</ng-template>
271+
272+
<ng-template #messageContent let-message igxChatMessageContext>
273+
<div [innerHTML]="message.text | fromMarkdown | async"></div>
274+
</ng-template>
256275
```
257276

258277
```typescript
259-
import { IgxChatComponent, IgxMessage } from 'igniteui-angular/chat';
260-
261-
messages = signal<IgxMessage[]>([]);
262-
isLoading = signal(false);
263-
264-
async onSend(text: string) {
265-
this.messages.update(m => [...m, { author: 'user', content: text }]);
266-
this.isLoading.set(true);
267-
const reply = await this.aiService.ask(text);
268-
this.messages.update(m => [...m, { author: 'assistant', content: reply }]);
269-
this.isLoading.set(false);
270-
}
278+
import { IgxChatComponent, IgxChatMessageContextDirective, type IgxChatOptions } from 'igniteui-angular/chat';
279+
import { MarkdownPipe } from 'igniteui-angular/chat-extras';
280+
281+
@Component({
282+
selector: 'app-chat-features-sample',
283+
styleUrls: ['./features-sample.component.scss'],
284+
templateUrl: './features-sample.component.html',
285+
imports: [IgxChatComponent, IgxChatMessageContextDirective, AsyncPipe, MarkdownPipe]
286+
})
287+
export class ChatFeaturesSampleComponent {
288+
private _messageHeader = viewChild.required('messageHeader');
289+
private _suggestionPrefix = viewChild.required('suggestionPrefix');
290+
private _messageContent = viewChild.required('messageContent');
291+
292+
...
293+
294+
295+
public options = signal<IgxChatOptions>({
296+
disableAutoScroll: false,
297+
disableInputAttachments: false,
298+
inputPlaceholder: 'Type your message here...',
299+
headerText: 'Developer Support',
300+
suggestionsPosition: "below-input",
301+
suggestions: [ 'Send me an e-mail when support is available.' ]
302+
});
303+
304+
public templates = signal({});
305+
306+
constructor() {
307+
effect(() => {
308+
const messageHeader = this._messageHeader();
309+
const suggestionPrefix = this._suggestionPrefix();
310+
const messageContent = this._messageContent();
311+
312+
if (messageHeader && suggestionPrefix && messageContent) {
313+
this.templates.set({
314+
messageHeader: messageHeader,
315+
suggestionPrefix: suggestionPrefix,
316+
messageContent: messageContent
317+
});
318+
}
319+
});
320+
}
321+
322+
public onMessageCreated(e: any): void {
323+
const newMessage = e;
324+
this.messages.update(messages => [...messages, newMessage]);
325+
this.options.update(options => ({ ...options, isTyping: true, suggestions: [] }));
326+
327+
const responseMessage = {
328+
id: Date.now().toString(),
329+
text: 'Our support team is currently unavailable. We\'ll get back to you as soon as possible.',
330+
sender: 'support',
331+
timestamp: Date.now().toString()
332+
};
333+
334+
this.draftMessage = { text: '', attachments: [] };
335+
this.messages.update(messages => [...messages, responseMessage]);
336+
this.options.update(options => ({ ...options, isTyping: false }));
337+
}
271338
```
272339
273340
## See Also

‎skills/igniteui-angular-components/references/directives.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
> **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button)
99
1010
```typescript
11-
import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/button';
11+
import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
1212
import { IgxIconComponent } from 'igniteui-angular/icon';
1313
```
1414

@@ -38,7 +38,7 @@ Button variants for `igxIconButton`: `'flat'`, `'outlined'`, `'contained'`.
3838
> **Docs:** [Ripple Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/ripple)
3939
4040
```typescript
41-
import { IgxRippleDirective } from 'igniteui-angular/ripple';
41+
import { IgxRippleDirective } from 'igniteui-angular/directives';
4242
```
4343

4444
```html
@@ -58,7 +58,7 @@ Inputs: `[igxRipple]` (ripple color), `[igxRippleCentered]` (always start from c
5858
> **Docs:** [Tooltip Directive](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tooltip)
5959
6060
```typescript
61-
import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/tooltip';
61+
import { IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
6262
```
6363

6464
```html
@@ -84,7 +84,7 @@ hideTooltip() { this.tooltip().close(); }
8484
> **Docs:** [Drag and Drop](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop)
8585
8686
```typescript
87-
import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/drag-drop';
87+
import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';
8888
```
8989

9090
### Basic drag and drop

‎skills/igniteui-angular-components/references/feedback.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
1212
```typescript
1313
import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
14-
import { IgxButtonDirective } from 'igniteui-angular/button';
14+
import { IgxButtonDirective } from 'igniteui-angular/directives';
1515
```
1616

1717
```html
@@ -50,7 +50,7 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
5050
5151
```typescript
5252
import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
53-
import { IgxButtonDirective } from 'igniteui-angular/button';
53+
import { IgxButtonDirective } from 'igniteui-angular/directives';
5454
```
5555

5656
```html
@@ -98,7 +98,7 @@ Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hide
9898
```typescript
9999
import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
100100
import { IgxIconComponent } from 'igniteui-angular/icon';
101-
import { IgxButtonDirective } from 'igniteui-angular/button';
101+
import { IgxButtonDirective } from 'igniteui-angular/directives';
102102
```
103103

104104
```html

‎skills/igniteui-angular-components/references/form-controls.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,11 @@ Implements `ControlValueAccessor` and `Validator`. Works with both reactive and
109109
> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker)
110110
111111
```typescript
112-
import { IgxDateRangePickerComponent } from 'igniteui-angular/date-range-picker';
113-
import { IgxDateTimeEditorDirective } from 'igniteui-angular/date-time-editor';
112+
import { IgxDateRangePickerComponent } from 'igniteui-angular/date-picker';
113+
import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
114114
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
115+
116+
// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
115117
```
116118

117119
```html
@@ -186,7 +188,13 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch';
186188
> **Docs:** [Slider Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)
187189
188190
```typescript
189-
import { IgxSliderComponent, SliderType } from 'igniteui-angular/slider';
191+
import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider';
192+
193+
public sliderType = IgxSliderType;
194+
public priceRange = {
195+
lower: 200,
196+
upper: 800
197+
};
190198
```
191199

192200
```html
@@ -195,7 +203,7 @@ import { IgxSliderComponent, SliderType } from 'igniteui-angular/slider';
195203

196204
<!-- Range slider -->
197205
<igx-slider
198-
[type]="SliderType.RANGE"
206+
[type]="sliderType.RANGE"
199207
[minValue]="0"
200208
[maxValue]="100"
201209
[lowerBound]="20"

‎skills/igniteui-angular-components/references/layout.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,9 +171,9 @@ import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'ig
171171
> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)
172172
173173
```typescript
174-
import { IgxNavDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/nav-drawer';
174+
import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer';
175175
import { IgxIconComponent } from 'igniteui-angular/icon';
176-
import { IgxRippleDirective } from 'igniteui-angular/ripple';
176+
import { IgxRippleDirective } from 'igniteui-angular/directives';
177177
```
178178

179179
```html

‎skills/igniteui-angular-components/references/setup.md‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ All Ignite UI components are **standalone** — no NgModules needed. Import them
5050
5151
```typescript
5252
import { ChangeDetectionStrategy, Component } from '@angular/core';
53-
import { IgxButtonDirective } from 'igniteui-angular/button';
53+
import { IgxButtonDirective } from 'igniteui-angular/directives';
5454
import { IgxDialogComponent } from 'igniteui-angular/dialog';
5555
5656
@Component({
@@ -94,7 +94,7 @@ import { IgxComboComponent } from 'igniteui-angular';
9494
| Stepper | `igniteui-angular/stepper` |
9595
| Accordion / Expansion Panel | `igniteui-angular/expansion-panel` |
9696
| Splitter | `igniteui-angular/splitter` |
97-
| Navigation Drawer | `igniteui-angular/nav-drawer` |
97+
| Navigation Drawer | `igniteui-angular/navigation-drawer` |
9898
| Bottom Navigation | `igniteui-angular/bottom-nav` |
9999
| List | `igniteui-angular/list` |
100100
| Tree | `igniteui-angular/tree` |
@@ -109,18 +109,29 @@ import { IgxComboComponent } from 'igniteui-angular';
109109
| Icon | `igniteui-angular/icon` |
110110
| Carousel | `igniteui-angular/carousel` |
111111
| Paginator | `igniteui-angular/paginator` |
112-
| Linear Progress | `igniteui-angular/linear-progress-bar` |
113-
| Circular Progress | `igniteui-angular/circular-progress-bar` |
112+
| Linear Progress | `igniteui-angular/progressbar` |
113+
| Circular Progress | `igniteui-angular/progressbar` |
114114
| Chat | `igniteui-angular/chat` |
115-
| Button / Icon Button | `igniteui-angular/button` |
116-
| Ripple | `igniteui-angular/ripple` |
117-
| Tooltip | `igniteui-angular/tooltip` |
118-
| Drag & Drop | `igniteui-angular/drag-drop` |
115+
| Button / Icon Button | `igniteui-angular/directives` |
116+
| Ripple | `igniteui-angular/directives` |
117+
| IgxTooltipDirective, IgxTooltipTargetDirective | `igniteui-angular/directives` |
118+
| Drag & Drop | `igniteui-angular/directives` |
119119
| Layout Manager (`igxLayout`, `igxFlex`) | `igniteui-angular/directives` |
120+
| Core utilities, services, base types | `igniteui-angular/core` |
120121
| Icon Service | `igniteui-angular/icon` |
121122
| Overlay Service | `igniteui-angular/core` |
122123
| **Dock Manager** | `igniteui-dockmanager` *(separate package — `npm install igniteui-dockmanager`)* |
123124

125+
**Grid-specific entry points** (tree-shakable imports):
126+
127+
| Component / Feature | Entry Point |
128+
|---|---|
129+
| Shared grid infrastructure (columns, toolbar, filtering, sorting, etc.) | `igniteui-angular/grids/core` |
130+
| Standard grid (`IgxGridComponent`) | `igniteui-angular/grids/grid` |
131+
| Tree grid (`IgxTreeGridComponent`) | `igniteui-angular/grids/tree-grid` |
132+
| Hierarchical grid (`IgxHierarchicalGridComponent`, `IgxRowIslandComponent`) | `igniteui-angular/grids/hierarchical-grid` |
133+
| Pivot grid (`IgxPivotGridComponent`, `IgxPivotDataSelectorComponent`) | `igniteui-angular/grids/pivot-grid` |
134+
124135
### Convenience Directive Collections
125136

126137
For complex components, use the bundled directive arrays instead of listing every sub-directive individually:

‎skills/igniteui-angular-grids/SKILL.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Ignite UI has **five grid types**. Picking the correct one is the most important
5959

6060
Ask these questions in order:
6161

62-
1. **Does the user need a lightweight, read-only data display** with sorting, filtering, and virtualization but no editing, selection, or paging? → **Grid Lite** (open-source, MIT licensed)
62+
1. **Does the user need a lightweight, read-only data display** with sorting, filtering, and virtualization but no editing, selection, or paging? → **Grid Lite** (open-source, MIT licensed). **If the user later needs features beyond Grid Lite's capabilities, upgrade strictly to `igx-grid` (`IgxGridComponent`)** — never recommend non-grid components as a substitute.
6363
2. **Does the user need pivot-table analytics** (rows/columns/values/aggregations that users can drag-and-drop to reshape)? → **Pivot Grid**
6464
3. **Does the data have parent-child relationships where each level has a DIFFERENT schema** (e.g., Companies → Departments → Employees)? → **Hierarchical Grid**
6565
4. **Does the data have parent-child relationships within a SINGLE schema** (e.g., Employees with a `managerId` field, or nested children arrays)? → **Tree Grid**

‎skills/igniteui-angular-grids/references/data-operations.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,8 @@ Sorting modes:
145145
### Programmatic Sorting
146146

147147
```typescript
148-
import { SortingDirection } from 'igniteui-angular/grids/core';
148+
import { SortingDirection } from 'igniteui-angular/core';
149+
// import { SortingDirection } from '@infragistics/igniteui-angular/core'; for licensed package
149150

150151
// Sort a single column
151152
this.gridRef().sort({ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true });

‎skills/igniteui-angular-grids/references/types.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ onChildGridCreated(event: IGridCreatedEventArgs) {
161161

162162
The **lightest grid option** — an open-source (MIT licensed) Web Component with an Angular wrapper. Use it for **read-only data display** with sorting, filtering, column hiding/resizing, and row virtualization. It has **no editing, no selection, no paging, no grouping, no summaries, no export**.
163163

164-
> **When to recommend Grid Lite vs. Flat Grid**: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, use the Flat Grid.
164+
> **When to recommend Grid Lite vs. Flat Grid**: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, **upgrade strictly to `igx-grid` (`IgxGridComponent`)** from `igniteui-angular/grids/grid` — do NOT recommend other non-grid components as a substitute.
165+
166+
> **AGENT INSTRUCTION — Grid Lite → Grid Upgrade**: When a user is working with `igx-grid-lite` and you identify that their requirements exceed Grid Lite's capabilities (e.g., they need editing, selection, paging, grouping, summaries, export, row operations, or any feature not available in Grid Lite), you MUST recommend upgrading to `igx-grid` (`IgxGridComponent`). Never suggest a different component type — the upgrade path from Grid Lite is always to `igx-grid`. Replace `IgxGridLiteComponent` with `IgxGridComponent`, update imports from `igniteui-angular/grids/lite` to `igniteui-angular/grids/grid`, use `IGX_GRID_DIRECTIVES` instead of individual Grid Lite imports, and remove `CUSTOM_ELEMENTS_SCHEMA`.
165167
166168
### Installation
167169

0 commit comments

Comments
 (0)