Angular 16 Get Selected Value of Dropdown Tutorial

Get a selected dropdown value angular; In this tutorial, you will learn how to get the selected value when the user either submits the form or changes the dropdown selection using the onsubmit and onchange event in angular 16.

Get Selected Value of Dropdown in Angular 16

Steps to get the selected value when the user either submits the form or changes the dropdown selection using the onsubmit and onchange event in angular 16:

• Step 1: Create a New Angular Application
• Step 2: Create a Dropdown Component
• Step 3: Create a Dropdown List
• Step 4: Implement the Component Logic
• Step 5: Use the Component
• Step 6: Run the Application

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 angular-dropdown-example

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 a Dropdown List

Open the dropdown.component.html file, and add the following code to create a dropdown list inside a form:

<div>
  <h2>Angular 16 Dropdown Example - Tutsmake.com</h2>
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="dropdown">Select an option:</label>
      <select id="dropdown" class="form-control" [(ngModel)]="selectedOption" (change)="onDropdownChange()">
        <option value="Tutsmake.com">Option 1</option>
        <option value="Tutsmake.com1111">Option 2</option>
        <option value="Tutsmake.com3333">Option 3</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  <div>
    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</div>

Step 4: Implement the Component Logic

Open the dropdown.component.ts file and add the following code to implement the component logic:

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

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

  onSubmit() {
    // Handle form submission, you can use this.selectedOption here.
    alert(`Form submitted with selected option: ${this.selectedOption}`);
  }

  onDropdownChange() {
    // Handle dropdown change event, you can use this.selectedOption here.
    console.log(`Selected option changed to: ${this.selectedOption}`);
  }
}

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 } from '@angular/forms'; // Import FormsModule for ngModel support
import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component';

@NgModule({
  declarations: [
    AppComponent,
    DropdownComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add FormsModule to the imports array
  ],
  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 16.

Recommended Angular Tutorials