Choosing from a list in Angular

Question

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to pass the value as just the code, but struggling to display it as the code alone in the selected field.

javascript html css angular typescript

Answer 1

Answer №1

According to AhmerMH, providing more precise details and sharing some code along with other information would be beneficial.

The type of drop-down menu you require and the structure of your data play a significant role in implementation. Here are some example snippets that might assist you:

If you need a drop-down menu similar to mat-menu and your data is organized in lists, you can utilize the following approach:

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>

In case you are looking for a form-field type drop-down, there are various scenarios depending on your data:

2.1 - If you have a set amount of fixed data points, consider using this method:

<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>

To correspondingly define it in your .TS file, use:

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

And include the list of data like so:

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 varies and needs to be fetched from a database:

<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>

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

I hope this provides some assistance :)

Answer 2

According to AhmerMH, providing more precise details and sharing some code along with other information would be beneficial.

The type of drop-down menu you require and the structure of your data play a significant role in implementation. Here are some example snippets that might assist you:

If you need a drop-down menu similar to mat-menu and your data is organized in lists, you can utilize the following approach:

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>

In case you are looking for a form-field type drop-down, there are various scenarios depending on your data:

2.1 - If you have a set amount of fixed data points, consider using this method:

<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>

To correspondingly define it in your .TS file, use:

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

And include the list of data like so:

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 varies and needs to be fetched from a database:

<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>

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

I hope this provides some assistance :)

Choosing from a list in Angular

Answer №1

Similar questions

Adding rows dynamically to multiple tables on a single page using a single function

What causes the Material-UI Grid element to shift upon clicking it?

Monitoring WooCommerce order submissions through AJAX

Update the referenced lists in ng-admin

Is there an issue with the jQuery ajax function when it comes to sending the RegistrationId to our server?

Creating a customizable filter by using the function of an object

The function Observable.timer in Angular rxjs is throwing an error when imported

I'm currently working on incorporating a rating system into my Vue.js project, but I am struggling to successfully pass the rating values

Cross-browser compatibility issues preventing CSS button effects from functioning properly

Unable to install npm package from git source

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

Mastering the Art of Line Breaks in WordPress

Utilizing a navigation menu to display various Strapi Collection pages within a single Angular Component

Verify if the JSON response contains any data

Navigating PopUpWindows using SeleniumIn this guide, learn the best

In Safari, my layout is disrupted by the mere mention of the word 'City'

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

When the object contains multiple arrays, filter out the id and remove it when clicked

Stack screen not visible on React Native navigation