Ng2-select: Default selection / Programmatically changing selection

[uzumakinaruto123]

I have tried all possible ways to set the default value of select box (single). none worked.

I have tried:-

[active]="{id:'1' , text : 'foo' }"
[active]="[{id:'1' , text : 'foo' }]"

[data]="{id:'1' , text : 'foo' }"
[data]="[{id:'1' , text : 'foo' }]"

Is there a way to change selection Programmatically ?

angular 2.0.0-rc.4
ng2-select 1.0.3

[SathishRaju]

Same issue for me as well. There is no way to set the value of ng2-select programatically.

[littleStudent]

you can do something like this. Its not a clean solution but it works.

@ViewChild(SelectComponent) select: SelectComponent;

changeSelection() {
     if (this.select) {
          this.select.initData = [{id: 1, text: 'new value'}];
          this.select.ngOnInit();
     }
}

[uzumakinaruto123]

@littleStudent does this work on version 1.0.3 ? because I think initdata property was removed. still , I will give it a try.

[uzumakinaruto123]

@littleStudent confirmed. working for now. :+1:

[uzumakinaruto123]

@littleStudent any idea on how to do it for multiple select boxes ?

[littleStudent]

maybe something like this? did not try it, but this way you should be able to get the reference for
multiple selects

<select #select1></select>
<select #select2></select>

@ViewChild('select1') select1: SelectComponent;
@ViewChild('select2') select2: SelectComponent;

[uzumakinaruto123]

this works but ! but first selectbox shows correct selected value , but second one is blank not even placeholder.

[matthewhegarty]

I also have this issue in v1.1.0 / Angular 2.0.0.

littleStudent's workaround fixed it for me (in case it's not obvious, I had to call changeSelection() from ngOnInit()).

Also, you have to assign value not initData

this.select.value = [{id: 1, text: 'new value'}];

Hopefully we can get a more robust solution soon.

[uzumakinaruto123]

@matthewhegarty I tried everything , and now what works for me is :-

this.select.initData will work only when component initializes.

After , that if you need to change selection then this works,

this.select.active= [{id: 1, text: 'new value'}];

[wladimiravila]

hello, I solve this point to easy, in version 1.0.3 is initData in 1.1 is active

example:

``

<ng-select [initData]="initDataTeacher" [items]="teachers" placeholder="Teacher Name" (selected)="setTeacher($event,classes)" ></ng-select>

in my component.ts

this.initDataTeacher = [{ 'id': 12, 'text': 'teacherName'}];

[vicatcu]

What's the current guidance on this with angular 2.1.2?

[408796571]

@littleStudent Your method saved my day. You are lifesaver. Thank you so much!!!!

[zzolcsak]

Another method, that also works with selecting the placeholder:

...
//pass undefined to reset to placeholder
private setSelectTo(value) {
this.model = value;
this.show = false;
setTimeout(() => {
this.show = true
}, 0);
}

[ashkrit]

another way to clear is

@ViewChild(SelectComponent) select: SelectComponent;

select.writeValue(undefined)

[megasharks]

My 5 cents. It was tough!
template
[active]="activeDealer"
[multiple]="false"
[items]="dealers"
(data)="refreshValue($event)"//schould be present in code
placeholder="dealers"
>

// delcarations
dealers : Array < any > = []
activeDealer:Array =[];

// somewhere in code .(async operation) The funny part is with _temp var.
// receiving AJAX response as responseData
let _temp = [];
responseData.result
.forEach((item, index) => {
_temp
.push({id: item.id, text: item.title})
});
this.dealers = _temp;
this.activeDealer=[this.dealers[1]]