Ng2-select: Doesn't working when assign data on click event

[ahirhasmukh]

I want to assign data(colors) on click event but It is doesn't work this moment. so please review my code and let me know. how it's work.

==== TYPESCRIPT CODE ====

public items:Array<any> = [];
addColors(){
     COLORS.forEach((color:{name:string, hex:string}) => {
          debugger
          this.items.push({
              id: color.hex,
              text: `<colorbox style='background-color:${color.hex};'></colorbox>${color.name} (${color.hex})`
          });
          console.log(color.name);
      });

OR

this.items = [
        {'name': 'Blue 1', 'hex': '#AAA'},
        {'name': 'Blue 2', 'hex': '#C0E6FF'},
        {'name': 'Blue 3', 'hex': '#C0E6FF'}
     ];
  }

===== HTML CODE ====

<div style="width: 200px;margin-top: 10px;">
        <ng-select [allowClear]="true"
                   [items]="colors"
                   formControlName="items"
                   (data)="refreshValue($event)"
                   (selected)="selected($event)"
                   (removed)="removed($event)"
                   (typed)="typed($event)"
                   placeholder="No color selected">
        </ng-select>
    </div>
    <div><button type="button" (click)="addColors()">Add Colors</button></div>

@valorkin @Namek @marcalj @NathanWalker @lzoubek @kfbishop

[aminsmartsense]

@smartHasmukh @valorkin @Namek @NathanWalker @lzoubek

I am facing same issue like this. 18 hours spend in this issue. any solution?

[lzoubek]

I think there are 2 issues in your code.

1. in your HTML template you should probably have [items]="items"
2. In order to update ng-select items you cannot just add them into the array that is bound to your template, because this does not trigger a setter on ng-select component. Setter needs to be tiggered, because ng-select internally transforms your items into it's model. see code. So in your (click) code you need to either create new array or you can use EventEmitter together with async pipe. Something like

items$ = new EventEmitter<any[]>();
items = [];
addColors() {   
  // create / update existing array
  items.push({...});
  items$.next(items);
}

[items]="items$ | async"

[ahirhasmukh]

I will try it. Thanks

[wuhemei]

@smartHasmukh do you solve this issues?

[DarkPetan]

Thanks @lzoubek for your answer. Was working on the similar thing and your post helped me to make it work. Greetings to Olomouc from Ostrava!

[ahirhasmukh]

@wuhemei I will try on monday and will post as well. It will work or not.

[SadatAnwar]

for some reason I could not get this to work, it would update the list only once, this answer helped me, and it just works, though it does look more inefficient than having the async pipe. Ah well, Angular noob ;)

[EvilJimJafar]

This might help: https://github.com/valor-software/ng2-select/issues/635#issuecomment-281094377

[raghul-selsoft]

I think there are 2 issues in your code.

1. in your HTML template you should probably have [items]="items"
2. In order to update ng-select items you cannot just add them into the array that is bound to your template, because this does not trigger a setter on ng-select component. Setter needs to be tiggered, because ng-select internally transforms your items into it's model. see code. So in your (click) code you need to either create new array or you can use EventEmitter together with async pipe. Something like

items$ = new EventEmitter<any[]>();
items = [];
addColors() {   
  // create / update existing array
  items.push({...});
  items$.next(items);
}

[items]="items$ | async"

Yes,its working well,
thanks.