How to Get the Selected Value from a Dropdown in Angular?

To get the selected value from a dropdown in Angular you can bind a change event handler function to the dropdown. The change event handler function will be invoked every time you change the selected value.

Now, to get the selected value we can pass the $event object as an argument to the change event handler function. And we can extract this selected value inside our ts file using $event.target.value.

This is how you can bind a change event handler function to the dropdown inside the template file:

<select (change)="getSelectedValue($event)">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
</select>

Now, you need to define the getSelectedValue() function inside the ts file:

getSelectedValue(event:any){
  
  // Prints selected value
  console.log(event.target.value);

}

Get selected value using template reference variables

If you don’t want to use $event to get the selected value from the dropdown, the template reference variables can be a good alternative.

In this method, you have to first declare a template variable using a hash(#) symbol such as #ref. This #ref variable will be referring to the dropdown and therefore we can pass the selected value to our event handler function using ref.value.

This is how you can do it in your template file:

<select #ref (change)="getSelectedValue(ref.value)">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
</select>

Inside your ts file you can directly get this selected value as a parameter to the change event handler function:

getSelectedValue(value:any){
  
  // Prints selected value
  console.log(value);

}

Get Selected Value using ngModel Directive

In this approach, you don’t have to add any explicit event handler function to get the selected value. Instead, we will doubly bind the select dropdown with a variable using the ngModel directive.

The ngModel directive is used for two-way data binding. It means that if the value changes in the template file, it is reflected in the ts file instantly. OR opposite of it, i.e. if the value changes in the ts file, it automatically reflects in the template file.

In the following example, we have doubly bound the select dropdown with a variable selectedValue using the ngModel directive.

So, as soon as you select any value, it automatically gets updated in the selectedValue variable. This way you can keep track of what value has the user selected from the dropdown.

<select [(ngModel)]="selectedValue">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
</select>

<p>You have selected {{selectedValue}}</p>

You have to now declare the selectedValue variable inside your component’s ts file:

// Declare the varible in ts file
selectedValue:any;

Get Selected Value when You have For Loops

Let’s say we have an array of objects where each object contains the data of a student. We want to show each student’s name in the dropdown and get the name of the selected student.

selectedName: string = '';

students: any[] = [
  {
    name:'John',
    marks: '90%',
  },
  {
    name:'James',
    marks: '80%',
  },
  {
    name:'Tom',
    marks: '82%',
  }
];

To get the name of the selected student, we will doubly bind the dropdown with the selectedName variable using the ngModel directive. Just below the dropdown, we will be showing the selected student’s name inside a paragraph.

Here is the template file:

<select [(ngModel)]="selectedName">
    <option *ngFor="let student of students" [value]="student.name">{{student.name}}</option>
</select>

<p>You have selected {{selectedName}}</p>

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.