passing parameters on change event in angular 2

Question

I have to pass the value of the option whenever the item is selected.But after my event takes place, the passed value is always undefined. My code is as follows :

<select (change)="handle(this.value);">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
</select>

My angular2 code is as follows:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  n1 = 0;
 n2 = 0;
 result = 0;

handle(value){
  alert("selected option's value is "+value);
}

constructor() { }
  ngOnInit() {

 }

}

The problem is that whenever there is any change of option, the parameter(value) which is passed to the handle function is always "undefined".

alert("selected option's value is "+value);

In this line, the value of the parameter "value" is always undefined.

Please help!

Thanks in advance!

Possible duplicate of How can I get new selection in "select" in Angular 2? — anoop
– anoop, Commented Jun 21, 2017 at 15:01

Yordan Nikolov · Accepted Answer · 2017-06-21 15:08:42Z

19

try with template reference variable

<select (change)="handle(selectField.value);" #selectField>

edited Jun 21, 2017 at 15:08

answered Jun 21, 2017 at 15:00

Yordan Nikolov

2,67815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sai Raman Kilambi Over a year ago

Thanks! You solved my problem. Can you explain why do I need to use a local variable ?

Yordan Nikolov Over a year ago

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. More info: angular.io/guide/…

rick dana · Accepted Answer · 2018-06-27 11:45:40Z

Try to use this approach:

HTML TEMPLATE

<select [(ngModel)]="selectedValue" (change)="handle();">
 <option [ngValue]="0">Addition</option>
 <option [ngValue]="1">Subtraction</option>
 <option [ngValue]="2">Multiplication</option>
 <option [ngValue]="3">Division</option>
</select>

HomeComponent COMPONENT

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

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    selectedValue: number;
    n1 = 0;
    n2 = 0;
    result = 0;

    handle() {
        alert("selected option's value is " + this.selectedValue);
    }

    constructor() {}
    ngOnInit() {

    }
}

This looks like an overkill when we have to the option of passing values as part of the event handler method signature.

Miguel Carvalhais Matos · Accepted Answer · 2020-12-05 17:58:15Z

3

Consider also

<select (change)="handle($event.target.value);">

answered Dec 5, 2020 at 17:58

Miguel Carvalhais Matos

1,1632 gold badges13 silver badges23 bronze badges

Collectives™ on Stack Overflow

passing parameters on change event in angular 2

3 Answers 3

2 Comments

HTML TEMPLATE

HomeComponent COMPONENT

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

HTML TEMPLATE

HomeComponent COMPONENT

1 Comment

Comments

Linked

Related