`I want to display the name (employee Name) instead of value (employee id), while trying to pick an employee by name in the drop down.
Sample Data: 0: {employeeID: 13, employeeName: 'vinayakar G'} 1: {employeeID: 14, employeeName: 'kanna V'}
Any thoughts would be helpful, thanks in advance
HTML
` <div>
<mat-form-field>
<mat-label>Purchased By</mat-label>
<input [formControl]="myControlPurchasedBy" formControlName="purchasedBy" matInput
type="text" [matAutocomplete]="auto1" />
<mat-autocomplete #auto1="matAutocomplete"
(optionSelected)="selectedPurchasedBys($event.option.value)" >
<mat-option *ngFor="let item of finalDataPurchasedBy | async"
[value]="item.employeeID">
{{item.employeeID}} - {{item.employeeName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>`
Component
`export class DataEntryComponent implements OnInit{
empOptions!:Employees[]
myControlPurchasedBy = new FormControl ('')
finalDataPurchasedBy!:Observable<Employees[]>
_filter(name:string):Employees[]{
const filterName = name.toLocaleLowerCase()
return this.empOptions.filter(opt =>
opt.employeeName.toLocaleLowerCase().includes(filterName))
}
ngOnInit(): void {
this.empSvc.GetEmployeesForSearch(this.companyID).subscribe((response)=>{
this.empOptions = response
})
this.finalDataPurchasedBy = this.myControlPurchasedBy.valueChanges.pipe(
startWith(''),
map(item => {
const name = item;
return name?this._filter(name as string):this.empOptions
})
}
}``