Angular select dropdown

In Angular, a select or dropdown list is a common UI component that allows users to choose a single value from a predefined set of options.

Angular select allows us to bind the dropdown list to a data source, such as an array or an object, using directives like `*ngFor`. It allows 2-way data binding using [(ngModel)] directive.

Angular also provides us with Event Handling functions like (change), (selectionChange), etc, which allows us to handle events triggered by the dropdown list such as changing the selected option.

Angular dropdown example

Angular select option

Angular dropdown with search

Angular dropdown bootstrap

Angularjs dropdown

In this article, we will see how to set a selected option of a dropdown list control.

Approach 1. Set a selected option using [(ngModel)]

ngModel directive is used for two-way data binding.

Here we are using ngModel to establish the two-way data binding between the variable of our component class and the selected option in the dropdown.

Syntax:

<select [(ngModel)]="selectedValue">
<option value="option1">Option 1 </option>
<option value="opti