how do i use name in frontend and send id on selected

Question

<input *ngIf="showAutoComplete"
       [(ngModel)]="selected"
       [typeahead]="uniqueCreatedBys"
       [typeaheadOptionField]="'name'"
       class="form-control"
       (ngModelChange)=
       "ObjectType('',userId =  selected.id )">

i am using typehead of ngx bootstarp and need to access the name in frontend part but send id in the ObjectType function, my uniqueCreatedBys contains the list of both name and id

//and this is my function

ObjectType(q?: string, userId? : number, offset?: number, limit?: number) {
    // console.log(this.objectTypes)
    // const userId = this.selected ? this.objectTypes.find(obj => obj.createdBy === this.selected)?.createdById : undefined;
    this.objectTypeService.fetchObjectTypes(q, userId , offset, limit).subscribe((response: any) => {
      this.objectTypeService.resetObjectTypes();
      this.objectTypeService.setObjectTypes(response);

      this.objectTypes = this.objectTypeService.getObjectTypes();
      this.totalCount = this.objectTypeService.getTotalDocsCount();

      this.uniqueCreatedBys = this.getUniqueCreatedBys(this.objectTypes);
      console.log(this.uniqueCreatedBys)
    });
  }

Answer 1

instead of ngModelChange You can use onSelect something like

<input *ngIf="showAutoComplete"
       [(ngModel)]="selected"
       [typeahead]="uniqueCreatedBys"
       [typeaheadOptionField]="'name'"
       class="form-control"
       (typeaheadOnSelect)=
       "ObjectType('',$event.item?.id )">

Working demo