Igniteui-angular: [igx-combo] initial values are not checked.

[tkiryu]

Description

Initial values are not checked.

• igniteui-angular version: 7.3.7
• browser: any

Steps to reproduce

1. Go to https://stackblitz.com/edit/igx-combo-initial-value-not-selected-issue
2. Open drop down

Result

Initial values are in the textbox, but they are not checked on the drop down.

Expected result

Initial values should be checked on the drop down.

Attachments

https://stackblitz.com/edit/igx-combo-initial-value-not-selected-issue

[ViktorSlavov]

@tkiryu
The combo items are marked as selected by object reference. Since you're initializing new items inside the selectedItems array, they are not present in the items array and are not mapped as selected.
If you pass [this.items[0]], this.items[1]] under selectedItems, the entries in the list will be properly marked. Here's the updated example

We'll review how the combo handles passing selected items, as with the current implementation it's a bit tricky to implement ngModel binding if both your data an selected items are coming from separate services. We'll investigate if we could maybe streamline that more w/o impacting performance.

[zdrawku]

This approach does not work appropriately when it comes to remote data, I needed to add more logic (selectItems and triggerCheck) in order to accomplish an initial selection of items.

As I spoke with @Lipata one of the next sprints we should definitely find time for this bug, our combo should provide ngModel binding.

[ViktorSlavov]

@zdrawku @tkiryu @rkaraivanov @damyanpetev
Since the fix for the value binding has the potential to break applications using binding w/ object references + defined [valueKey], I've targeted the PR to 8.2.
When the PR is merged, there will be two ways to bind to the combo's [(ngModel)]:

• If valueKey is defined, [(ngModel)] should be an array containing only the resp. values. For example, if valueKey="id", [(ngModel)] should be an array containing the item ids.

<igx-combo #combo [data]="data" valueKey="id" displayKey="text" [(ngModel)]="values">
</igx-combo>

export class MyExampleComponent {
    ...
    public data: {text: string, id: number, ... }[] = ...;
    ...
    public values: number[] = ...;
}



md5-a0712751a818747afb573dd014aeeaa7



```typescript
export class MyExampleComponent {
    ...
    public data: {text: string, id: number, ... }[] = ...;
    ...
    public values: {text: string, id: number, ...} [] = [this.items[0], this.items[5]];
}