Angular 17, 16 Get Selected Value of Dropdown Tutorial

To get the selected value of the dropdown in an angular application, you need to create onchange or onsubmit function on the component file and bind it with an HTML template to get it. When you either submit the form or change the dropdown selection using the onsubmit and onchange event in angular 17, 16.

How to Get the Selected Value from a Dropdown in Angular

Steps to get selected value of dropdown in angular with onsubmit and onchange event:

Step 1: Create a New Angular Application

Firstly, open your cmd or terminal and run the following command into it to create new angular app into your system:

ng new my-new-app --no-standalone

Step 2: Create a Dropdown Component

Next, create a new Angular component to represent the form with the dropdown. In the terminal, run the following command:

ng generate component dropdown

Step 3: Create on Change or Submit in Component

To get the selected value from a dropdown in angular onchange or onsubmit, Simply open the dropdown.component.ts file, and then create functions into it like following:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  selectedOption: FormControl = new FormControl('');

  onSubmit() {
    alert(`Form submitted with selected option: ${this.selectedOption.value}`);
  }

  onDropdownChange() {
    console.log(`Selected option changed to: ${this.selectedOption.value}`);
  }

}

Step 4: Create a Dropdown List

Now use onChange and onSubmit function with html template to get selected dropdown value; For that, Open the dropdown.component.html file, and then use it like following:

<div style="text-align: center;">
  <h2>How to Get the Selected Value from a Dropdown in Angular? - Tutsmake.com</h2>
  <form>
    <div class="form-group">
<select [formControl]="selectedOption" (change)="onDropdownChange()">
  <option value="tutsmake.com">Option 1</option>
  <option value="tutsmake 123456">Option 2</option>
  <option value="option 123456">Option 3</option>
</select>
<button (click)="onSubmit()">Submit</button>

  <div>

  </div>
</div>
</form>
 <div>
    <p>Selected Option: {{ selectedOption.value }}</p>
  </div>
</div>

Step 5: Use the Component

To use the DropdownComponent, open the src/app/app.component.html file and add the following code:

<app-dropdown></app-dropdown>

Next, Open the src/app/app.module.ts file. Import the required modules and components:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // Import the ReactiveFormsModule

import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component';


@NgModule({
  declarations: [
    AppComponent,
    DropdownComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // Add the FormsModule for ngModel (if needed)
    ReactiveFormsModule // Add the ReactiveFormsModule for reactive forms
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6: Run the Application

Finally, You can now run your Angular application using the following command:

ng serve

Open your web browser and navigate to http://localhost:4200/ to view and interact with your Angular dropdown example.

Conclusion

Congratulations you have learned how to get the selected value of dropdown when the user either submits the form or changes the dropdown selection using the onsubmit and onchange event in angular 17, 16.

Recommended Angular Tutorials