Angular ng-select group and bind value which exists in both group

Question

I have a situation where i need to group data in ng-select and in both group i have same id exists, so when i bind using [(ngModel)] , even though i selected item from one group , its getting selected from another group. I hope somebody has solution for this issue. Thanks in advance

    <label>Grouping</label>
    <ng-select [items]="data"
            bindLabel="name"
            bindValue="id"
            groupBy="type"
            [(ngModel)]="selectedValue">
    </ng-select>
    `


selectedValue= 1
data= [
    {id: 1, type: SystemVariables, name: Week},
    {id: 2, type: SystemVariables, name: Week},
    {id: 3, type: SystemVariables, name: Week},
    {id: 1, type: CustomVariables, name: c1},
    {id: 2, type: CustomVariables, name: c2}, 
    {id: 3, type: CustomVariables, name: c3}];

Answer 1

bindValue should be unique. So create a unique value concatenating the properties type and id

newData = data.map(elm => {
  return {
    ...elm,
    typeId: elm.type + '-' + elm.id
  }
});

Now bind it like,

<ng-select 
  [items]="newData" 
  bindLabel="name" 
  bindValue="typeId" 
  groupBy="type" 
  [(ngModel)]="selectedValue">
</ng-select>

Now extract id from selectedValue like this.

const selectedId = 
    this.selectedValue.substring(this.selectedValue.lastIndexOf('-') + 1);