angularangular-ngselect

ng-select how to get any property of selected item/object into html template

I have angular v16 app with page that uses reactive form and one of the field - array. Also I'm using ng-select v11 package with array of objects that separated by groupId:

[{id: 1, name: 'name', groupId: 1, groupName: 'group name'}, ...]

<div class="row" *ngFor="let item of form.controls.conditions['controls']; let i = index" [formGroupName]="i">
  <div class="col-sm-3 mb-4">
    <ng-select formControlName="field"
               [items]="triggerFields"
               bindLabel="name"
               bindValue="id"
               groupBy="groupId"
               [clearable]="false">
    </ng-select>

    {{ item.controls.field.value }}
    {{ triggerFields.find(x => x.id == item.controls.field.value)!.groupId }}
  </div>
</div>

In html template above I need to get groupId.

But item.controls.field.value get only bindValue property of object. I also tried something like:

{{ triggerFields.find(x => x.id == item.controls.field.value)!.groupId }}

But that code doesn't work into html template.

Also I can't remove bindValue because it's used in other places and works fine. (I mean in documentation of ng-select if we skip bindValue then it will bind the whole object)

Is there way to implement that?

Solution

  • You can try to add a ts method getGroupId(fieldId) that returns the group id like return this.triggerFields.find(x => x.id === fieldId)?.groupId; and in the html you can add the binding like {{getGroupId(item.controls.field.value) }}