Telerik blogs
AngularT2 Dark_1200x303

Have you ever had to ask, “How do I get the value of the selected dropdown menu item in Angular?” Let’s answer that!

In Angular apps, the dropdown is a typical HTML element used in forms and components to allow the users to select values. Today, we will learn three ways to get the value of the user’s selected item in a dropdown list with Angular.

Our three approaches are:

  • Using a change event
  • Using ngModel
  • Using viewChild

Our example app has three components with the same HTML markup, a dropdown with a list of NBA teams, and one property, selectedTeam, on the TypeScript file. We will implement each solution to assign the selected value from the dropdown to the selectedTeam variable.

  • TeamWithChangeEventComponent: Uses the HTML change event and template reference.
  • TeamUsingViewChildComponent: Uses the viewChild decorator and template reference.
  • TeamWithNgmodelComponent: Uses the ng-model directive.

The HTML markup looks like this:

<div class="col">
<p>You select your team {{ selectedTeam }} using viewChild</p>
	<select #teams (change)="onSelected()">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

And the TypeScript file will have the variable selectedTeam.

{
	selectedTeam = '';
}

Let’s work with the first solution TeamWithChangeEventComponent.

Using the Change Event and Template Reference Variables

To work with this approach, we first use HTML reference variables to read the value and the dropdown event change, listen when the user changes the selection in the dropdown, and create a new method onSelected to assign the value to selectedTeam.

First, create the template variables for dropdown using #teams. Use the event binding to listen for the change event and link with the onSelect method.

The onSelect method receives the reference variable and takes the value of the dropdown element.

The code will look like this:

<div class="col">
<p>You select your team {{ selectedTeam }} using change event</p>
	<select #teams (change)="onSelected(teams.value)">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

Next, create the onSelected(value) method in the TypeScript file. Take the value as a parameter and assign it to the selectedTeam variable.

import { Component } from '@angular/core';
@Component({
	selector: 'app-team-with-change-event',
	templateUrl: './team-with-change-event.component.html',
	styleUrls: ['./team-with-change-event.component.css'],
})
export class TeamWithChangeEventComponent {
	selectedTeam = '';
	onSelected(value:string): void {
		this.selectedTeam = value;
	}
}

How Does It Work?

Angular uses event binding to link the method, and it gets the value from the parameter because it uses template reference to gain access to the dropdown HTML element.

You can read more about template reference variables and event binding in Angular.

Next, using the viewChild—let’s do it!

Using viewChild and Template Reference Variable

The new approach uses the @ViewChild decorator and template reference variables. In the new scenario, we create the template reference variable for the teams dropdown using #teams and listen for the (change) event. However, the method onSelected doesn’t require passing the value with a slight change.

The HTML looks like this:

<div class="col">
<p>You select your team {{ selectedTeam }} using viewChild</p>
	<select #teams (change)="onSelected()">
		<option default>Pick a team</option>
		<option>Lakers</option>	
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

In our TypeScript file, add the variable teams, using the decorator @ViewChild with type ElementRef and create the method onSelected() without parameters. But using the reference of teams, we can read the value of the reference of teams and assign it to the variable.

The code will look like this:

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
	selector: 'app-team-using-view-child',
	templateUrl: './team-using-view-child.component.html',
	styleUrls: ['./team-using-view-child.component.css'],
})
export class TeamUsingViewChildComponent {
	@ViewChild('teams') teams!: ElementRef;
	selectedTeam = '';
	onSelected():void {
		this.selectedTeam = this.teams.nativeElement.value;
	}
}

But How Does It Work?

The ElementRef is a wrapper for the DOM HTML element, and the property nativeElement has a reference to the DOM object. Using the @ViewChild decorator, we get ElementRef in the component class.

Feel free to read more about the ViewChild decorator and ElementRef.


Using NgModel Directive

Angular has another way to get the selected value in the dropdown using the power of ngModel and two-way data binding.

The ngModel is part of the forms module. We need to import it into the NgModule list in the app.module, which will be available in our app.

The ngModel directive helps us listen and update variables when the event changes trigger, and to use it, add the ngModel using [(ngModel)]="selectedTeam".

Angular automatically gets the value and updates the variable selectedTeam using the ngModel approach when the user changes the value. We don’t need to create the onSelected method in our TypeScript file.

<div class="col">
<p>You select your team {{ selectedTeam }}</p>
<p>The change Event</p>
	<select [(ngModel)]="selectedTeam">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

How Does It Work?

First, the ngModel directive uses the ControlValueAccessor, because Angular provides access to all HTML form elements like input, select and checkbox by default. It sends the value, and the two-way data binding creates the link between the value and the variable.

If you want to read more:


Conclusion

We built three different ways to work with dropdowns in our apps. You can find a full code example for this article and play with the example app in the following links:

If you want to save your time and create fast and advanced dropdowns, then I recommend visiting the article about Angular Dropdowns in Minutes with Kendo UI—it shows you how to use Angular DropDownList in your apps.

Thanks for your time. I hope you can see how many ways there are to work with dropdowns and pick the best for your app.


About the Author

Dany Paredes

Dany Paredes is a Google Developer Expert on Angular and loves sharing content and writing articles about Angular, TypeScript and testing in his blog and on Twitter (@danywalls).

 

Related Posts

Comments

Comments are disabled in preview mode.