Angular 9/8 Select Dropdown Example

In this section, we will learn how to select dropdown in Angular 8 or Angular 9. For this, we will provide a very simple example to select dropdown in Angular 8 or Angular 9. The Angular 9/8 contains a list of bind select dropdowns. We will start by change event of dropdown selection.

In order to create a reactive form that will contain a dropdown box, we will use the loop. In this section, we will provide two examples to select dropdown. In the first example, when we click on the submit button, we are able to get the value of selected dropdown box. In the second example, when the change event has occurred, we are able to get the value of selected dropdown box. In our both example, we will create dropdown by using the "websiteList" variable. Both the examples to get dropdown are described below. For this, firstly, we have to add from validation, and for that, we will follow some step in Angular 9, which is described as follows:

Example 1: Get Selected DropDown value on Form Submit

Step 1:

In this step, we will Import FormsModule. If we are trying to use the Angular app to create form, we require to import FormsModule. We will import this from @angular/forms library. So we will use the app.module.ts file and add the following code:

src/app/app.module.ts:

Step 2:

In the second step, we will perform Form with ngModel. For this, we will use html form and write code into it with ngModel. So we will use the file app.component.html to add the below code. In our form, we will use the bootstrap class.

src/app/app.component.html:

Step 3:

In this step, we will Update Ts file. For this, we will write a function named submit(), and after that, we are able to get all the values of input fields. So we will use the app.component.ts file to add the below code:

src/app/app.component.ts:

Now, we will use the following command to run the above example:

Example 2: Get Selected DropDown value on Change Event

Step 1:

In this step, we will Import FormsModule. If we are trying to use the Angular app to create form, we require to import FormsModule. We will import this from @angular/forms library. So we will use the app.module.ts file and add the following code:

src/app/app.module.ts:

Step 2:

In the second step, we will perform Form with ngModel. For this, we will use html form and write code into it with ngModel. So we will use the file app.component.html to add the below code. In our form, we will use the bootstrap classes.

src/app/app.component.html:

Step 3:

In this step, we will Update Ts file. For this, we will write a function named submit(), and after that, we are able to get all the values of input fields. So we will use the app.component.ts file to add the below code:

src/app/app.component.ts

Now we will use the following command to run the above example:

After running the above command, we will see the following output: