Doesn't working when assign data on click event

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

[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"

[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.