JIYIK CN >

We will cover how to set the selected option in an Angular dropdown, set the selected option from an array of options, and set the selected option if the options are dynamic in Angular.

Setting the selected option in an Angular dropdown menu

This article will discuss setting a selected option for an Angular dropdown menu. When you create a dropdown with multiple options, no option is automatically selected.

Therefore, we will first create a drop-down list and set the selected option and discuss different scenarios in the best way to set the selected option when the options are static or dynamic or when there is a range of options.

In app.component.html, we will create a select form.

# angular
<select [(ngModel)]='ngDropdown' name="dropdownOption" id="dropdownOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

As you can see in this code, we use [(ngModel)], which creates an FormControlinstance of and binds it to a form control element.

We'll app.component.cssadd some CSS to improve our drop-down form.

# angular
.form-control{
  padding: 5px 10px;
  background-color: rgb(52, 119, 179);
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: rgb(52, 119, 179);
}

Output:

We can see that no option is selected, but when we click on it all the options appear.

To set the option to be checked, we can assign the value to app.component.tsthe variable in ngDropdown. Looking at app.component.htmlthe code in , we see that we have assigned the variable [(ngModel)]='ngDropdown'.

Let's try 1setting to the default value.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngDropdown = 1;
}

After assigning the selected option, we notice that the drop-down menu displays 1as the selected option. This way, we can select any option as the selected option in Angular.

Output:

Sets the selected option from the options array

We will discuss how to set a default value from a set of options.

First, we'll create two variables: ngDropdownfirst, the default option for our dropdown menu, and second ngOptions, which will contain all the options we want to display in our dropdown.

So, let's app.component.tsadd this code inside .

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [1,2,3,4,5,6,7,8,9,10]
  ngDropdown = 1;
}

In ngOptionsthe array, we set the values ​​from 1to 10; in ngDropdown, we 1set to the default value.

We will app.component.htmlcreate a selection form in .

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

In this code, we will see that we [selected]set to ngDropdown, so when any option is ngDropdownthe same as , it will automatically be selected.

Output:

Option to select from dynamic values

We will discuss setting a selected option if we have dynamic values ​​for the options. First, we will create two variables; the first one ngDropdown, where we select the default option for the form, and the second one ngOptions, which will contain all the values ​​we want to display in the dropdown options.

We know there will be dynamic values, so let's have an array of random numbers and set the selected option for the second item in that array.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [3,6,1,4,2,10,7,5,9,8]
  ngDropdown = this.ngOptions[1];
}

app.component.htmlWill have the following code.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

Output:

So we can see that the second item of the array is set to the selected option. We can change it by changing the index of the array.

This tutorial taught us how to set the selected option of an Angular dropdown menu. We also discussed three different scenarios for selecting an option when the value is static, dynamic, or an array.