Select Options Example in Angular

We use select options when there are many options to choose from. Learn how to use them in Angular. We will show you how to set the Default Value for the select. Listen to the Select option change event and react to it. Dynamically update the Dropdown list option & Dynamically Set Value etc. We will cover both Reactive Forms & Template-driven forms.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Select Options in Reactive Forms

Create a contactForm using the Reactive Form as shown below. The Form has only one Formcontrol field i.e. country. The value for the country is going to come from the countries array. We will store the id in the country field

The select option for the country is as shown below.

The formControlName directive maps the select to the country field of the contactForm. ( <select formControlName="country">)

<option [ngValue]="null" disabled > displays the Select Country when no value for country is selected or country is null

The ngFor loops through the "countries" array and displays the country.name in the drop down. You can also display the country.name - country.id or any other property of the country

We want to return the id of the country. Hence we use the [ngValue]="country.id". You can also use [ngValue]="country", in which case it will return the country object.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Set the Default Value for the select

We can set the value of a FormControl using either setValue or patchValue.

Set the default values when defining the form to pass the default value. The following code sets the default country as Australia. This works only once when we load the component for the first time

The other method is to create a separate setDefaults method, which you call any time.

Listen to the Select option change event

Listen to the change event using the valueChanges event as shown below.

Dynamically update the Drop down option

You can dynamically add or remove options from the countries array and it will reflect in the drop down immediately.

Ask for the new country in template.

And add it to countries array after verifying it does not exists.

Dynamically Set Value

The following dynamically changes the value of the country via code.

The final application

Select Option Drop down Example in Reactive Forms
Select Option Drop down Example in Reactive Forms

Complete Code

app.component.html

app.component.ts

Select Options in Template Driven Forms

The following is the code for the select options in Template Driven Forms. Also refer to the tutorial on how to set value in template driven forms.

We get the reference to the contactForm using the @ViewChild.

Use the setTimeout() to wait for a change detection cycle so that the @ViewChild updates the reference to the contactForm. Without it the contactForm will return null.

To Listen to the change we use the event binding using the (ngModelChange)="onCountryChanged($event)". We can also use the valueChanges

Rest of the code is very similar to the Reactive forms.

References

Read More

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top