Displaying the preselected option in a Select dropdown menu using Angular

Question

Displaying the preselected option in a Select dropdown menu using Angular

Here is the code snippet I have:

<select label="people" id="ppl"  [(ngModel)]="Selectedppl" (ngModelChange)="onPplSelection($event.target.value)">
<option>select people</option>
<option *ngFor="let x of peopleList" [ngValue]="x">
    {{x.name}}
</option>

I am dealing with a list of objects that contain properties such as name, address, and contact. My goal is to pass the entire object as a parameter to ngModelChange using ngValue.

Furthermore, once a specific person has been selected and saved, I would like the dropdown menu to display the name of the selected individual. Essentially, I want the default selected option in the dropdown to reflect the saved value.

It's important to note that I am not utilizing Reactiveforms in this scenario.

javascript angular typescript

Answer 1

Answer №1

You can obtain the element's reference and pass its value to a function.

<select label="people" id="ppl" #ppl="ngModel"  
   [(ngModel)]="Selectedppl" 
   [compareWith]="compareFn"
   (ngModelChange)="onPplSelection(ppl.value)">
     <option>select people</option>
     <option *ngFor="let x of peopleList" [ngValue]="x">
       {{x.name}}
     </option>
</select>

ts

If you have a complex object, then you must use compareFn to help Angular compare the objects and set the default value.

  compareFn(a, b) {
    if (!a || !b) {
      return false;
    } else {
      return a.name === b.name;
    }
  }

See the working example here - https://stackblitz.com/edit/hello-angular-6-2z9f3b

Answer 2

You can obtain the element's reference and pass its value to a function.

<select label="people" id="ppl" #ppl="ngModel"  
   [(ngModel)]="Selectedppl" 
   [compareWith]="compareFn"
   (ngModelChange)="onPplSelection(ppl.value)">
     <option>select people</option>
     <option *ngFor="let x of peopleList" [ngValue]="x">
       {{x.name}}
     </option>
</select>

ts

If you have a complex object, then you must use compareFn to help Angular compare the objects and set the default value.

  compareFn(a, b) {
    if (!a || !b) {
      return false;
    } else {
      return a.name === b.name;
    }
  }

See the working example here - https://stackblitz.com/edit/hello-angular-6-2z9f3b

Displaying the preselected option in a Select dropdown menu using Angular

Answer №1

ts

Similar questions

Neglecting to review the CSS - embracing ejs layouts in Express

Tips for organizing MUI Card effectively within a React application using TypeScript

Reorganizing Firebase data in Ionic 2

Creating a dynamic step animation with jQuery: A step-by-step guide

Generating React components dynamically can bring flexibility and efficiency to the

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Responses were buried beneath the inquiries on the frequently asked questions page

Identification of input change on any input or select field within the current modal using JavaScript

Creating a Yeoman application with a personalized Node.js server

Encountering numerous TypeScript errors due to a JavaScript file in Visual Studio 2017

What is the process for configuring vue.config.js with typescript?

Step-by-step guide on building a factory in Angular for a pre-existing service

JavaScript vanilla can be difficult to grasp, especially when it comes to

Leveraging Watchers on props in Vue 3's Script Setup

Adding a PDF generated from an HTML div to an email using Java

Troubleshooting Angular 7 Build Failure: Missing Typescript .d.ts Declaration Files for Ahead-of-Time Compilation

User authentication on AngularJs is only initiated on the second interaction

Struggling with verifying the visibility of multiple elements using the toBeVisible() assertion

Using a Regex Pattern to Validate Password Strength

Ways to obtain a referrer URL in Angular 4