Select drop-down in Angular

Issue

I want to create a drop-down that shows options as "code-description" but when the option is selected display only "code" in the selected field.

Eg : "A-Apple" in the drop-down, but display only "A" when selected. I can pass the value as only code but unable to display it as code alone in the selected field.

Solution

As said from AhmerMH, it would be better if you can be more precise and share some code and some other information.

It depends a lot from which type of drop down you want and how your data are made. Anyway, i'll show you some examples that maybe can help.

1. If you need a drop down menu, like mat-menu, and your data reside in some lists, you can use something like:

Drop Down Codes and Descriptions option 2 option 3 option 4

<mat-menu #moreOptions="matMenu">
    //it depends on how the objects you want to display are made 
    //if code and description are in the same object:
    <div *ngFor="let c of codesList; index as i">
        <button mat-menu-item>{{c.code}} {{c.description}}</button>
    </div>

    //otherwise, if code and description are separated: (if codes are in "codesList" and descriptions are in "descsList" and if descsList is ordered in the same way of codesList)
    <div *ngFor="let c of codesList; index as i"> 
        <button mat-menu-item>{{c}} {{descsList[i]}}</button>
    </div>

</mat-menu>

2. Otherwise if you mean a drop down like a form-field you can have different cases, it always depends on your data:

2.1 - if you have a small bunch of fixed data you can try with this:

<div class="row">
    <div class="col">
        <mat-form-field class="" appearance="outline" floatLabel="always" hideRequiredMarker>
            <mat-label>Codes and Descriptions</mat-label>
            <mat-select formControlName="data" (selectionChange)="doSomething()">
                <mat-option *ngFor="let d of referenceData" [value]="d.value">
                    {{d.code}} {{d.description}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

and correspondingly in your .TS file, you can define it in the form as

form = this.fb.group({
    data: [''],
})

and the list of data as:

referenceData = [
{code: 'Code One', description: 'Desc One', value: 'first_value'},
{code: 'Code Two', description: 'Desc Two', value: 'second_value'},
{code: 'Code Three', description: 'Desc Three', value: 'third_value'},
]

2.2 - if your data are not fixed and maybe you have to get them from a DB:

<div class="row">
    <div class="col">
        <mat-form-field class="" appearance="outline" hideRequiredMarker formGroupName="data" *ngIf="data$ | async as datas"> 
            <mat-label class="font-18-semi-b">Codes and Descriptions</mat-label>
            <input matInput formControlName="id" placeholder="Data">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayData(datas)" (optionSelected)="dataChanged($event.option.value)">
                <mat-option *ngFor="let d of datas" [value]="d.id">
                    {{d.code}} {{d.description}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
</div>

and in your .TS file:

form = this.fb.group({
    data: this.fb.group({
        id: ['',],
      }),
})

data$: Observable<Data>;

displayData(datas: Data[]) {   
    return (dataId?: number): string | undefined => {
      let data = datas.find(option => option.id === dataId);
      return data ? data.code + " " + data.description : undefined
    };
}
  
dataChanged(event){
    this.dataService.get(event).pipe( //your service that you use to get the data from the server
      tap((value:Data) => {
        //do what you want, like:
        var selectedData = value; 
      })
    ).subscribe();
    this.form.get("data.id").setValue(event);
} 

Hope it helps :)

Answered By - Ingrik