Display the name instead of value in mat-select AutoComplete

187 Views Asked by At

`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
               })
               }

           }``
0

There are 0 best solutions below