How to select onchange pass option value in angular 6 ?

In this article, we will see how to select onchange pass option value in angular 6, along with knowing the different techniques for retrieving the value of the user-selected item in a dropdown list & will understand their implementation through the illustration.

The Dropdown is a commonly used element in HTML forms that facilitates the users to select data from the given option list. To accomplish this task, we have 3 approaches:

• By implementing the ngModel directive
• By using the viewChild decorator
• Using a change event

We will explore the above-mentioned techniques & understand them sequentially.

Before we proceed, we need to create a new angular project using the below commands:

ng new geeksforgeeks_onchange

Project Structure: After complete installation, it will look like the following:

Project Structure

Here, we have taken examples of some fruits in an HTML dropdown menu, such as mango, banana, pineapple, apple, and kiwi. In the Typescript file, there is one more property named selected_fruit. Three distinct methods will be used to assign the user-selected value from the dropdown to the selected_fruit variable.

Approach 1: By implementing the Change Event

Keystrokes, mouse movements, clicks, and touches are examples of user activities that can be listened to and handled using event binding. When a change happens, Angular uses event binding to listen for it and then executes the component’s onChange() method.

Example: In this example, we are using a change event for retrieving the value of the user-selected item from the list.

• app.component.html: This function uses the change event, which is triggered when the user modifies their drop-down selection, and a new method onChange() to assign the value to the selected_fruit variable. The current value of the user-selected drop-down option is passed using the $event.

HTML

<div class="container mt-5">
    <h1>
        <span>
            <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" />
        </span>
        GeeksforGeeks
    </h1>
    <h3>
        You have selected this fruit: {{selected_fruit}}
    </h3>
    <div class="form-group mt-5">
        <label for="sel1">
            Select Any Fruit:
        </label>
        <select class="form-control"
                (change)="onChange($event)">
            <option default>Banana</option>
            <option>Mango</option>
            <option>Pineapple</option>
            <option>Apple</option>
            <option>Kiwi</option>
        </select>
    </div>
</div>

• app.component.ts: Create a variable name as selected_fruit and create the onChange(value) method in the app.component.ts file. Take the value as a parameter and assign it to the selected_fruit variable.

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'geeksforgeeks_onchange';
    selected_fruit = 'Banana';

    onChange(value: any) {
        this.selected_fruit = value.target.value;
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Approach 2: Using ngModel directive

Using the functionality of ngModel Directive and two-way data binding, Angular has another method for obtaining the selected value from the dropdown. The forms module includes the ngModel. Import FormsModule in the imports list of the app.module.ts. The [(ngModel)]=”selected_fruit] directive adds the ngModel and enables us to listen for event changes and update variables when they occur. When the user modifies the value, Angular immediately retrieves the value and updates the variable selected_fruit using the ngModel method.

Example: In this example, we have used ngModel Directive for retrieving & displaying the value of the user-selected item from the list.

• app.component.html
  

HTML

<div class="container mt-5">
    <h1>
        <span>
            <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" />
        </span>
        GeeksforGeeks
    </h1>
    <h3>
        You have selected this fruit: {{selected_fruit}}
    </h3>
    <div class="form-group mt-5">
        <label for="sel1">
            Select Any Fruit:
        </label>
        <select class="form-control"
                [(ngModel)]="selected_fruit">
            <option default>Banana</option>
            <option>Mango</option>
            <option>Pineapple</option>
            <option>Apple</option>
            <option>Kiwi</option>
        </select>
    </div>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'geeksforgeeks_onchange';
    selected_fruit: any = 'Banana';
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Approach 3: Using @ViewChild decorator & Template Reference Variable

The nativeElement property of the ElementRef contains a reference to the DOM object, which is a wrapper for the DOM HTML element. Native DOM elements with a template reference variable can be accessed with the @ViewChild decorator.

For the HTML dropdown, we are using #fruits as the Template Reference Variable, and we are listening for the change event that happens when the user changes the dropdown option. Currently, the onChange() method does not need a parameter to pass a value because we can read the value of the template reference variable and assign it to the value of the selected_fruit variable.

Example 3: In this example, we are using @ViewChild and Template reference variable for retrieving & displaying the value of the user-selected item from the list.

• app.component.html

HTML

<div class="container mt-5">
    <h1>
        <span>
            <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" />
        </span>
        GeeksforGeeks
    </h1>
    <h3>
        You have selected this fruit: {{selected_fruit}}
    </h3>
    <div class="form-group mt-5">
        <label for="sel1">
            Select Any Fruit:
        </label>
        <select class="form-control" #fruits
                (change)="onChange()">
            <option default>Banana</option>
            <option>Mango</option>
            <option>Pineapple</option>
            <option>Apple</option>
            <option>Kiwi</option>
        </select>
    </div>
</div>

• app.component.ts
  

Javascript

import { Component, ElementRef, ViewChild }
    from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'geeksforgeeks_onchange';
    @ViewChild('fruits') fruits !: ElementRef;
    selected_fruit: any = 'Banana';
    onChange() {
        this.selected_fruit =
            this.fruits.nativeElement.value;
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output: