Ng2-select: Unable to programatically set active item

[kylestephens]

Currently unable to programatically set active item.

Would be good to have option to do this via component logic, e.g.:

this.mySelectComponent.setActive([itemFromList]);

[alotnak]

Same problem. I had active on template.
active is told to be object in case of Single, and array of objects in case on Multiple, but the only way I can set active for Single is, if it's array of single object. Would like it to really be only object.

[maxim-makarov91]

Same problem. I want to select item automatically on previous select component changed - in case if select has only 1 item available or another situation like select last item of available(it's decrease user's interaction with UI - so user can increase working speed).
Want something to be like this:

html:
<ng-select [active]="active" ... > - in case single selected element

js:
setAnotherActiveProgramatically() {
    this.active = items[indexOfSomeElement];    
}

[adammendoza]

Same here. I need to set a given value because I'm using it to edit existing data.

[kylestephens]

I meant to get back to this. A workaround is to use Angular2's formbuilder and bind a formcontrol to the dropdown.

Markup:
<ng-select [multiple]="true" [items]="businessTypes" placeholder="No category selected" formControlName="businessType" id="businessType"></ng-select>

Logic:
this.myForm.controls['businessType'].setValue([businessType]);

Hope this helps! :)

[adammendoza]

Thanks for the reply. It didn't work for my use case. I'm guessing it's due to that fact that I'm using the ng-select inside an array this.formBuilder.array. I loop through an array and pre-populate the values in the form. One of the fields is a given option in the ng-select.

It threw an error.

ERROR TypeError: selectedItems.map is not a function at SelectComponent.set [as active] (select.js:83) at SelectComponent.writeValue (select.js:228) at setUpControl (forms.es5.js:1748) at FormGroupDirective.addControl (forms.es5.js:4720) at FormControlName._setUpControl (forms.es5.js:5306) at FormControlName.ngOnChanges (forms.es5.js:5224) at checkAndUpdateDirectiveInline (core.es5.js:10701) at checkAndUpdateNodeInline (core.es5.js:12083) at checkAndUpdateNode (core.es5.js:12051) at debugCheckAndUpdateNode (core.es5.js:12680) at debugCheckDirectivesFn (core.es5.js:12621) at Object.eval [as updateDirectives] (UserProfileComponent.html:118) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12606) at checkAndUpdateView (core.es5.js:12018) at callViewAction (core.es5.js:12333)

[alienriquebm]

Same here... Dear owner, can you help us with this?

[alotnak]

We use this with next update (inside our own component):

...
[active]="obj.items"
(data)="refreshValue($event)"
[multiple]="obj.multiple"
>

public refreshValue(value: any): void {
if (this.obj.multiple) {
this.obj.items = value;
}
else {
if (value.length == 0) {
this.obj.items = [];
}
else {
this.obj.items = [value];
}
}
...
}

Where this.obj is like

export class Items {
...
multiple: boolean;
items: Item[] = [];
constructor() {
}
}
And Item like:
export class Item {
id: string;
text: string;
}

This way the obj.items can have many items like items[0], items[1], if multiple, and if single, there will be only items[0] or [].

[alienriquebm]

Thanks for your answer @alotnak , when this update will take a place for us?

[Hesesses]

+1

[dilotec-2015]

if you add or delete an array item angular seems not notice the change because the reference to this array has not changed.

if you do something like this:
this.activeItems.push({id: '1', text: 'something'});
this.activeItems= JSON.parse(JSON.stringify(this.activeItems));
then the active items will be updated

the same about updating the items list

[aiswarya4confianz]

Thanks for your answer @alotnak

[sumithf]

@kylestephens Thanks, your solution is working with my scenario ( Angular4 Reactive Forms)

[xyrintech]

I am getting this issue inside formGroupName
Else this works.

Any solution for this?

[NageshGandikota549]

---------html ------
bindLabel="name"
bindValue="id"
[multiple]="false"
placeholder="Select city"
[(ngModel)]="selectedCityId" (add)="asdf(selectedCityId)">

-------component--------
cities: any[] = [
{id: '1', name: 'Vilnius',ext:"fsdf"},
{id: '2', name: 'Kaunas',ext:"fsfddf"},
{id: '3', name: 'Pabradė',ext:"5"},
{id: '3', name: 'Klaipėda',ext:"fs646df"},
{id: '3', name: 'Nida',ext:"fsdf"}
];
selectedCityId='1';

Note: id in cities obj is string so assign string to model like this( selectedCityId='1';)
Plunker link https://plnkr.co/edit/RBGOdyzaabUrQ45lodmS?p=preview