Skip to content

feat(single-combo): update single selection combo topics #1026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hristo313 wants to merge 6 commits into
base: vnext
Choose a base branch
from
+2,604 −1,210
Open

feat(single-combo): update single selection combo topics #1026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bf227d4
feat(combo): update combo overview topics
Hristo313 Nov 4, 2026
385446d
feat(single-combo): update topics and assets content
Hristo313 Nov 6, 2026
144563b
fix(single-combo): update do and dont section
Hristo313 Nov 11, 2026
7800612
fix(single-combo): update topics content
Hristo313 Nov 13, 2026
21647e9
Merge branch 'vnext' into hhristov/update-single-selection-combo-topics
Hristo313 Nov 13, 2026
afc00d3
fix(simple-combo): relative links
Hristo313 Nov 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/angular/src/content/en/components/angular-reactive-form-validation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export class MyComponent implements OnInit {

Related topics:

- [Combo](/combo)
- [Combo](/inputs/combo/overview)
- [Select](/select)
- [Input Group](/input-group)
- [Date Picker](/date-picker)
Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/en/components/combo-features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,12 @@ Additional components and/or directives with relative APIs that were used:

<hr/>

- [ComboBox Component](/combo)
- [ComboBox Component](/inputs/combo/overview)
- [ComboBox Remote Binding](/combo-remote)
- [ComboBox Templates](/combo-templates)
- [Template Driven Forms Integration](/input-group)
- [Reactive Forms Integration](/angular-reactive-form-validation)
- [Single Select ComboBox](/simple-combo)
- [Single Select ComboBox](/inputs/combo/single-selection)

Our community is active and always welcoming to new ideas.

Expand Down
6 changes: 3 additions & 3 deletions docs/angular/src/content/en/components/combo-remote.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ A service needs to be included as a provider.

### Handling Selection

When using a combobox bound to remote data loaded in chunks and dealing with a more complex data type (e.g. objects), it is necessary to define a `valueKey`. As stated in the [combobox topic](/combo#data-value-and-display-properties), when no `valueKey` is specified, the combobox will try to handle selection by `equality (===)`. Since the objects that will be marked as selected will not be the same as the object that are continuously loaded, the selection will fail.
When using a combobox bound to remote data loaded in chunks and dealing with a more complex data type (e.g. objects), it is necessary to define a `valueKey`. As stated in the [combobox topic](/inputs/combo/overview#data-binding), when no `valueKey` is specified, the combobox will try to handle selection by `equality (===)`. Since the objects that will be marked as selected will not be the same as the object that are continuously loaded, the selection will fail.

<DocsAside type="info">
When binding a combobox to remote data, make sure to specify a `valueKey`, representing a property that is unique to each item.
Expand All @@ -243,12 +243,12 @@ When the combobox is bound to remote data, setting value/selected items through

<hr/>

- [ComboBox Component](/combo)
- [ComboBox Component](/inputs/combo/overview)
- [ComboBox Features](/combo-features)
- [ComboBox Templates](/combo-templates)
- [Template Driven Forms Integration](/input-group)
- [Reactive Forms Integration](/angular-reactive-form-validation)
- [Single Select ComboBox](/simple-combo)
- [Single Select ComboBox](/inputs/combo/single-selection)

Our community is active and always welcoming to new ideas.

Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/en/components/combo-templates.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,12 @@ When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` s

<hr/>

- [ComboBox Component](/combo)
- [ComboBox Component](/inputs/combo/overview)
- [ComboBox Features](/combo-features)
- [ComboBox Remote Binding](/combo-remote)
- [Template Driven Forms Integration](/input-group)
- [Reactive Forms Integration](/angular-reactive-form-validation)
- [Single Select ComboBox](/simple-combo)
- [Single Select ComboBox](/inputs/combo/single-selection)

Our community is active and always welcoming to new ideas.

Expand Down
464 changes: 0 additions & 464 deletions docs/angular/src/content/en/components/combo.mdx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion docs/angular/src/content/en/components/expansion-panel.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ We can do that by passing content in an `igx-expansion-panel-icon` tag:

Our Angular Expansion Panel will now render "Show More" when the panel is collapsed and "Show Less" once it's fully expanded.

The `IgxExpansionPanel` control allows all sorts of content to be added inside of the `igx-expansion-panel-body`. It can render [`IgxGrid`](/grid/grid)s, [`IgxCombo`](/combo), charts and even other expansion panels!
The `IgxExpansionPanel` control allows all sorts of content to be added inside of the `igx-expansion-panel-body`. It can render [`IgxGrid`](/grid/grid)s, [`IgxCombo`](/inputs/combo/overview), charts and even other expansion panels!

For the sake of simplicity let's add some basic markup to the body of our expansion panel.

Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/en/components/general/cli/component-templates.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ These templates generate components into an existing Angular workspace only. The
| snackbar | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c snackbar newSnackbar</code><br />Ignite UI CLI:<br /><code>ig add snackbar newSnackbar</code><details>Basic IgxSnackbar sample.</details> | [IgxSnackbar](../../snackbar.mdx) showing a brief message with an optional action. |
| toast | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c toast newToast</code><br />Ignite UI CLI:<br /><code>ig add toast newToast</code><details>Basic IgxToast sample.</details> | [IgxToast](../../toast.mdx) showing a non-interactive notification. |
| <b>Data Entry & Display</b> | | |
| combo | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>Basic IgxCombo with templating.</details> | [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx). |
| simple-combo | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c simple-combo newSimpleCombo</code><br />Ignite UI CLI:<br /><code>ig add simple-combo newSimpleCombo</code><details>Basic IgxSimpleCombo sample.</details> | [IgxSimpleCombo](../../simple-combo.mdx) with single selection. |
| combo | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>Basic IgxCombo with templating.</details> | [IgxCombo](../../inputs/combo/overview.mdx) with custom [templating](../../combo-templates.mdx). |
| simple-combo | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c simple-combo newSimpleCombo</code><br />Ignite UI CLI:<br /><code>ig add simple-combo newSimpleCombo</code><details>Basic IgxSimpleCombo sample.</details> | [IgxSimpleCombo](../../inputs/combo/single-selection.mdx) with single selection. |
| badge | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c badge newBadge</code><br />Ignite UI CLI:<br /><code>ig add badge newBadge</code><details>Basic IgxBadge sample.</details> | [IgxBadge](../../inputs/badge.mdx) displaying a status indicator. |
| button-group | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c button-group newButtonGroup</code><br />Ignite UI CLI:<br /><code>ig add button-group newButtonGroup</code><details>Basic IgxButtonGroup sample.</details> | [IgxButtonGroup](../../inputs/button-group.mdx) with a set of toggle buttons. |
| checkbox | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c checkbox newCheckbox</code><br />Ignite UI CLI:<br /><code>ig add checkbox newCheckbox</code><details>Basic IgxCheckbox sample.</details> | [IgxCheckbox](../../inputs/checkbox.mdx) for binary choices. |
Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/en/components/general/update-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1564,7 +1564,7 @@ The `ng update` process will update all enumeration names, like `AvatarType`, `T
```

- IgxCombo
- The way that the [`igx-combo`](/combo) handles selection and data binding is changed.
- The way that the [`igx-combo`](/inputs/combo/overview) handles selection and data binding is changed.

- If the combo's [`valueKey`] input is defined, the control will look for that specific property in the passed array of data items when performing selection.
**All** selection events are handled with the value of the data items' `valueKey` property.
Expand Down Expand Up @@ -1603,7 +1603,7 @@ The `ng update` process will update all enumeration names, like `AvatarType`, `T
}
```

You can read more about setting up the combo in the [readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md#value-binding) and in the [official documentation](/combo#selection-api).
You can read more about setting up the combo in the [readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md#value-binding) and in the [official documentation](/inputs/combo/overview#value-and-selection).

## From 8.0.x to 8.1.x

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/src/content/en/components/grids-and-lists.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
- [Grid-level Searching](/grid/search)
- [Export to Excel, CSV, TSV](/exporter-excel)
- [Multi-Column Headers](/grid/multi-column-headers)
- [Combo Box/Dropdown](/combo)
- [Combo Box/Dropdown](/inputs/combo/overview)
- [Virtualization and Performance](/grid/virtualization)
- [Remote Data Load on Demand](/grid/virtualization#remote-virtualization)
- [Cell Templates](/grid/grid#cell-template)
Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/en/components/overlay-styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
<div class="highlight">


[`IgxOverlayService`](/overlay) is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - [Drop Down](/drop-down), [Combo](/combo), [Date Picker](/date-picker) and more - so it is important to understand how the overlay displays content.
[`IgxOverlayService`](/overlay) is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - [Drop Down](/drop-down), [Combo](/inputs/combo/overview), [Date Picker](/date-picker) and more - so it is important to understand how the overlay displays content.
To display the content above other elements, the service moves it into a special outlet container (attached at the end of the document's body, by default). This behavior can affect styles [scoped to specific container](#scoped-overlay-styles).
</div>
<hr/>
Expand Down Expand Up @@ -53,7 +53,7 @@ Because these universal overrides are global, the drop-down content can consume

A local theme can only affect overlay content that inherits from its container or matches its generated selectors. Content attached to the default outlet at the end of `body` is not a descendant of the component that opened it.

For example, the `igx-combo` item [styles](/combo#styling) use the drop-down theme. This component-local theme takes effect after the combo outlet is moved beneath the host:
For example, the `igx-combo` item [styles](/inputs/combo/overview#styling) use the drop-down theme. This component-local theme takes effect after the combo outlet is moved beneath the host:

```scss
// overlay-styling.component.scss
Expand Down
Loading
Loading