Ng2-select: Dynamically update multiple ng2-select options

Created on 18 Aug 2016 · 13Comments · Source: valor-software/ng2-select

I am facing an issue with my ng2 multiple select. In fact, I have to wait for an Ajax request to complete to populate my options array.

The problem is that the options array gets populated but select options are not updated in the front-end.

Is there something I am missing here?

Source

escarabin

👍12

Most helpful comment

@escarabin i found a solution, i do this:
on html:
[multiple]="true"
[items]="items"
[disabled]="disabled"
(data)="refreshValue($event)"
(selected)="selected($event)"
(removed)="removed($event)"
placeholder="No city selected">
On typescript:

import { SelectComponent } from 'ng2-select/components/select/select';

export class HiComponent implements OnInit {

@ViewChild('SelectId') public select: SelectComponent;

items: string[];
apiItems: Item[];
ngOnInit() {
this.items = [];
this.ItemsService.getAllItems() //call to a rest api
.subscribe(
apiItems => {
this.apiItems = apiItems;
this.apiItems.forEach(item => {
this.items.push(item.name);
});
let i = 0;
this.select.items = this.items;
},
error => this.errorMessage = error);
}
}

i hope this help you

edumer12 on 19 Oct 2016

👍7

All 13 comments

+1
I am also facing the same issue. When I looked in to the source code, the items Array input property is copied over to a new Array with map and filter. I guess that's the reason the select options are not getting updated.

kishore1106 on 23 Aug 2016

I am too having the same issue.

sushant6309 on 24 Aug 2016

Try this:
[(items)]="ItemsArray".
Two-way Binding.

sushant6309 on 24 Aug 2016

👍1

Thank you but is two-way binding working on your side? It does not work for me.

escarabin on 24 Aug 2016

Any update on this?

escarabin on 14 Sep 2016

Yes It is working for me

sushant6309 on 15 Sep 2016

We're on v1.1.0 and two-way binding is not working for us either.

CJMrozek on 27 Sep 2016

In v1.1.1 i have the same issue, two-way bindings is not working

edumer12 on 19 Oct 2016

import { SelectComponent } from 'ng2-select/components/select/select';

export class HiComponent implements OnInit {

@ViewChild('SelectId') public select: SelectComponent;

i hope this help you

edumer12 on 19 Oct 2016

👍7

@edumer12 Thank you very much, that worked.

vcondratiev on 8 Dec 2016

This didn't quite work for me. Here is the solution I came up with.

EvilJimJafar on 20 Feb 2017

👍1

its working for me,you can find the example below. hope that will help you.
//for multiple select also its working
while dynamically fetching data from api, i did like this:
Account{
AccountNum:any;
//
you can also declare more varibles here
//
constructor( AccountNum:any,........)
{
this.AccountNum=AccountNum;
//
//
}
}

declared an array of object(Account) which contains 1 variable or more which i mentioned above
public Account=Array();
public acountNumArray: any[] = [];

then store the api response to Account(here i used a get ,method depends on my requiement)
//using for loop
this.Account=response;
(if response object contains multiple keys then assign acountNumArray within for loop
this.acountNumArray [i]=this.Account[i].AccountNum;
)
//end of loop
//assign Account(if it contains a single key)to acountNumArray
this.acountNumArray=this.Account;

//html

[multiple]="true"
[(items)]="acountNumArray"
[disabled]="disabled"
(data)="refreshValue($event)"
(selected)="selected($event)"
(typed)="typed($event)"
placeholder="Account Number">

                  </div>

Rajesh4d7 on 15 Jan 2018

                          <ng-select 
                              [multiple]="true"
                               [(items)]="acountNumArray"
                               [disabled]="disabled"
                               (data)="refreshValue($event)"
                               (selected)="selected($event)"
                               (typed)="typed($event)"
                               placeholder="Account Number">
                   </ng-select>

Rajesh4d7 on 15 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings