Binding ng-select to an object inside of an object

Question

I'm using ng-select in my Angular project and my entities have Id objects that are objects on their own. (the Id contains multiple values).

So for example as items input you would have a cars array like the following:

let cars = [
   {
      id: { systemId: null, name: null }
      brand: null,
      type: null
   },
   {
      id: { systemId: null, name: null }
      brand: null,
      type: null
   }
];

So for a car owner I want to set the carId of the car without binding the whole car object. Currently when I use ng-select it would always select he complete car or only a single value like systemId or name.

I tried using

bindValue='id'

but then it says it cannot bind to an object. So in the end I would like to set owner.carId to a car.id . Currently I'm using ng-select in the following way.

            <ng-select name="ownerCarId"
                       [items]="cars"
                       [(ngModel)]="owner.carId"
                       [compareWith]="compareBySystemId"
                       >
              <ng-template ng-label-tmp let-item="item">
                {{item.systemId + ' / ' + item.name}}
              </ng-template>
              <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
                {{item.systemId + ' / ' + item.name}}
              </ng-template>
            </ng-select>

Is there a way to do this?

score 2 · Answer 1 · answered Oct 25 '18 at 09:36

It looks like I found two solutions.

First solution I came up with as noticed in the comment on Anjum...'s answer is to create a carIds object containing the car ids and provide this in the [items] input.

this.carIds = this.cars.map(car => car.id)

Then in the HTML

<ng-select [items]="carIds" [(ngModel)]="owner.carId" bindValue="systemId">
    <ng-template ng-label-tmp let-item="item">
        {{item.systemId + ' / ' + item.name}}
    </ng-template>
</ng-select>

Second solution I found which I think might be the best one as you don't need to create a carIds array is to use instead of [items] input.

So the HTML would look like:

<ng-select [items]="cars" [(ngModel)]="owner.carId">
    <ng-option *ngFor="let car of cars" [value]="car.id">{{car.id.name}}></ng-option>
</ng-select>

score 0 · Answer 2 · answered Oct 24 '18 at 07:59

Please check stackBlitz link for a sample demo.

In a nutshell, Your app.component.html should have

<ng-select [items]="cars" [(ngModel)]="owner.carId" bindLabel="brand" bindValue="brand">
<ng-template ng-label-tmp let-item="item">
    {{item.brand + ' / ' + item.type}}
</ng-template>

and your app.component.ts should be something like this

  cars
  owner={}

 constructor() {

this.owner = {carId : "My Owners Car ID", type:'Donald Duck' }

this.cars = [
  {
    id: { systemId: 121212, name: 'sysID1' },
    brand: 'Honda',
    type: 'CRV'
  },
  {
    id: { systemId: 22222, name: 'sysID2' },
    brand: 'Ford',
    type: 'Truck'
  }
]
}

this answer will set the carId of the owner to for example Honda or Ford. But what I would like to become is that the carId is set to { systemId: 121212, name: 'sysID1' } or { systemId: 22222, name: 'sysID2' } . I currently solved this issue in my setup by mapping the the items input cars to a carIds array. But curious if there is a way when using cars as items input. — Nicholas, Oct 24 '18 at 08:07

Binding ng-select to an object inside of an object

2 Answers2