Are you sure you want to delete this item? This action cannot be undone.
@@ -63,7 +72,8 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
[autoHide]="true"
actionText="UNDO"
(clicked)="undo()"
- (animationDone)="onSnackbarDone()">
+ (animationDone)="onSnackbarDone()"
+>
Item saved successfully
```
diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md
index 2634e6c804f..31dd871e8ab 100644
--- a/skills/igniteui-angular-components/references/form-controls.md
+++ b/skills/igniteui-angular-components/references/form-controls.md
@@ -17,9 +17,12 @@
- [Slider](#slider)
- [Autocomplete](#autocomplete)
- [Reactive Forms Integration](#reactive-forms-integration)
-- [Signal Forms Integration](#signal-forms-integration)
- [Key Rules](#key-rules)
+## Overview
+
+This reference gives high-level guidance on when to use each form control component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
## Input Group
```typescript
@@ -41,21 +44,45 @@ Types: `line` (default), `border`, `box`, `search`.
## Combo (Multi-Select Dropdown)
-> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "combo" })` covers data binding, selection APIs, forms support, keyboard behavior, and known issues. Prefer it over this snippet when available.
-
```typescript
import { IgxComboComponent } from 'igniteui-angular/combo';
```
```html
-
+
+
```
+Key inputs: `[data]`, `[valueKey]`, `[displayKey]`, `[groupKey]`, `[placeholder]`, `[allowCustomValues]`, `[filterFunction]`, `[itemsMaxHeight]`, `[type]`.
+
+Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`, `(addition)`, `(searchInputUpdate)`.
+
## Simple Combo (Single-Select)
-> **Full doc in the MCP:** `get_doc({ framework: "angular", name: "simple-combo" })`.
+```typescript
+import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo';
+```
+
+```html
+
+
+```
-`IgxSimpleComboComponent` from `igniteui-angular/simple-combo` (its own entry point, not `/combo`). Same API as `igx-combo` but restricted to single selection.
+`IgxSimpleComboComponent` comes from its own `igniteui-angular/simple-combo` entry point, not `/combo`. Same API as `igx-combo` but restricted to single selection.
## Select
@@ -66,7 +93,7 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
```html
@for (role of roles; track role.id) {
- {{ role.name }}
+ {{ role.name }}
}
```
@@ -83,7 +110,8 @@ import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
[minValue]="minDate"
[maxValue]="maxDate"
[hideOutsideDays]="true"
- [displayMonthsCount]="2">
+ [displayMonthsCount]="2"
+>
```
@@ -92,28 +120,69 @@ Implements `ControlValueAccessor` and `Validator`. Works with both reactive and
## Date Range Picker
```typescript
-import { IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent } from 'igniteui-angular/date-picker';
+import {
+ IgxDateRangePickerComponent,
+ IgxDateRangeStartComponent,
+ IgxDateRangeEndComponent,
+} from 'igniteui-angular/date-picker';
import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxPickerToggleComponent, IgxPickerClearComponent } from 'igniteui-angular/core';
```
-Two-input configuration rules — place the `input` directly inside `igx-date-range-start`/`igx-date-range-end` (no extra `igx-input-group` wrapper); use `igx-picker-toggle igxPrefix` for the calendar action and `igx-picker-clear igxSuffix` for the clear action on **both** inputs. A plain `igx-prefix`/`igx-suffix` icon is decorative only and does not trigger picker actions.
+```html
+
+
+
+
+
+
+
+
+```
+
+`IgxDateRangePickerComponent` is imported from `igniteui-angular/date-picker`.
+
+In the two-input configuration:
+
+- place the `input` directly inside `igx-date-range-start` and `igx-date-range-end`
+- use `igx-picker-toggle igxPrefix` for the calendar action
+- use `igx-picker-clear igxSuffix` for the clear action
+
+A plain `igx-prefix` or `igx-suffix` with an `igx-icon` is decorative only and does not trigger picker actions.
+Do not wrap the inputs in an additional `igx-input-group`.
+
+**Avoid these patterns in two-input mode:**
+
+- `
calendar_today`
+
+- placing the toggle on only one input unless explicitly requested
+
+Common two-input configuration with calendar toggles:
```html
- calendar_today
+
+ calendar_today
+
- clear
+
+ clear
+
+
- calendar_today
+
+ calendar_today
+
- clear
+
+ clear
+
```
@@ -125,10 +194,7 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
```
```html
-
-
+
```
## Calendar
@@ -142,7 +208,8 @@ import { IgxCalendarComponent } from 'igniteui-angular/calendar';
[(ngModel)]="selectedDate"
[selection]="'single'"
[hideOutsideDays]="true"
- [weekStart]="1">
+ [weekStart]="1"
+>
```
@@ -189,29 +256,30 @@ public sliderType = IgxSliderType;
[minValue]="0"
[maxValue]="100"
[lowerBound]="20"
- [upperBound]="80">
+ [upperBound]="80"
+>
```
## Autocomplete
```typescript
-import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
+import {
+ IgxAutocompleteDirective,
+ IgxDropDownComponent,
+ IgxDropDownItemComponent,
+} from 'igniteui-angular/drop-down';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
```
```html
-
+
@for (city of cities | startsWith:selectedCity; track city) {
-
- {{ city }}
-
+ {{ city }}
}
```
@@ -240,7 +308,7 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
IgxComboComponent,
IgxDatePickerComponent,
IgxSelectComponent,
- IgxSelectItemComponent
+ IgxSelectItemComponent,
],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@@ -258,7 +326,8 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
formControlName="skills"
[valueKey]="'id'"
[displayKey]="'name'"
- placeholder="Select skills">
+ placeholder="Select skills"
+ >
@@ -269,18 +338,24 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
}
- `
+ `,
})
export class MyFormComponent {
form = new FormGroup({
name: new FormControl('', Validators.required),
skills: new FormControl
([]),
startDate: new FormControl(null),
- role: new FormControl(null)
+ role: new FormControl(null),
});
- skills = [{ id: 1, name: 'Angular' }, { id: 2, name: 'TypeScript' }];
- roles = [{ id: 'admin', name: 'Admin' }, { id: 'user', name: 'User' }];
+ skills = [
+ { id: 1, name: 'Angular' },
+ { id: 2, name: 'TypeScript' },
+ ];
+ roles = [
+ { id: 'admin', name: 'Admin' },
+ { id: 'user', name: 'User' },
+ ];
submit() {
if (this.form.valid) {
@@ -290,68 +365,13 @@ export class MyFormComponent {
}
```
-## Signal Forms Integration
-
-The same controls bind to Angular Signal Forms through `[formField]`. Required, disabled, touched and validity state flow from the field; no `ReactiveFormsModule` is needed.
-
-```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormField, disabled, form, required, submit } from '@angular/forms/signals';
-import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
-import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
-import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-
-@Component({
- selector: 'app-signup',
- imports: [FormField, IGX_INPUT_GROUP_DIRECTIVES, IgxSelectComponent, IgxSelectItemComponent, IgxCheckboxComponent],
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: `
-
- `
-})
-export class SignupComponent {
- model = signal({ name: '', role: '', terms: false });
- roles = ['Admin', 'User'];
-
- signup = form(this.model, (path) => {
- required(path.name, { message: 'Name is required' });
- required(path.role);
- required(path.terms);
- disabled(path.role, { when: ({ valueOf }) => valueOf(path.name) === '' });
- });
-
- onSubmit(event: Event) {
- event.preventDefault();
- submit(this.signup, async () => undefined);
- }
-}
-```
-
-`submit()` marks every field touched, so invalid controls show their error state the same way a reactive `markAllAsTouched()` does.
-
## Key Rules
- **Always check `app.config.ts` first** — add `provideAnimations()` before using Combo, Select, Date Picker, or any overlay component
- **Import from specific entry points** — avoid the root `igniteui-angular` barrel
- Date/Time pickers implement both `ControlValueAccessor` and `Validator` — they integrate with reactive forms natively
+- For `igx-date-range-picker` with separate start and end inputs, use this structure for both inputs: `igx-picker-toggle igxPrefix`, then `input igxInput igxDateTimeEditor`, then optional `igx-picker-clear igxSuffix`.
+- Do not use a plain `igx-prefix` / `igx-suffix` icon for calendar or clear actions.
- How to choose between Combo, Simple Combo, Select, and Auto-complete:
- Use `igx-combo` for multi-select dropdowns with built-in filtering and grouping
- Use `igx-simple-combo` for single-select dropdowns with built-in filtering and grouping
diff --git a/skills/igniteui-angular-components/references/layout-manager.md b/skills/igniteui-angular-components/references/layout-manager.md
index 8a62972f6ce..30ebc80cfc1 100644
--- a/skills/igniteui-angular-components/references/layout-manager.md
+++ b/skills/igniteui-angular-components/references/layout-manager.md
@@ -9,6 +9,10 @@
- [Dock Manager](#dock-manager)
- [Tile Manager](#tile-manager)
+## Overview
+
+This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in.
+
---
## Layout Manager Directives
@@ -34,10 +38,16 @@ import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directive
```html
-
-
+