Get selected value from select on onChange event with Angular 2

Question

I'm developing an Angular 2 application with ASP.NET Core 2.0 and the Visual Studio 2017 Angular's Web application template.

I don't know how to get the selected value from a select when the user changes the selection.

This is the law.component.html:

<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:&nbsp;
<select #l (change)="lawChanges(l.value)">
    <option></option>
    <option *ngFor="let law of laws" [ngValue]="law">{{law.name}}</option>
</select>

This is the law.component.ts:

import { Component, Inject, Output, EventEmitter } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';

@Component({
    selector: 'law',
    templateUrl: './law.component.html'
})

export class LawComponent {
    public laws: Law[];

    @Output()
    change: EventEmitter<number> = new EventEmitter<number>();

    constructor(private http: Http,
        @Inject('BASE_URL') private baseUrl: string) {

        http.get(baseUrl + 'api/Law').subscribe(result => {
            this.laws = result.json() as Law[];
        }, error => console.error(error));
    }

    lawChanges(selectedLaw: Law) {
        console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
        this.change.emit(selectedLaw.value);
    }
}

interface Law {
    value: number;
    name: string;
}

At this what it generates:

<select>
    <option></option><!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
    <option ng-reflect-ng-value="1">China</option>
    <option ng-reflect-ng-value="2">Korea</option>
    <option ng-reflect-ng-value="3">European</option>
</select>

This is the angular's version (ng --version):

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.11.3
os: win32 x64

This is the JSON returned by the controller:

[
    {
        "value": 1,
        "name": "China"
    },
    {
        "value": 2,
        "name": "Korea"
    },
    {
        "value": 3,
        "name": "European"
    }
]

At the console I get:

selected law: China .

It seems that value is empty.

How can I get the selected value? I think I'm doing something wrong when I define the select but I have found a lot of examples with the same syntax.

By the way, I've found how to do it from this SO answer.

Have you tried (change)="lawChanges($event) to get the value? — Ushma Joshi, Oct 11 '17 at 10:33
@UshmaJoshi I have copied this answer, https://stackoverflow.com/a/35055235/68571, to do it. — VansFannel, Oct 11 '17 at 10:37

score 4 · Answer 1 · answered Oct 11 '17 at 10:40

4

try to change the l.value to $event :

 <select (change)="lawChanges($event)">

then

lawChanges(event : any) {
   let selectedLaw : any = event.target.value;
   console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
   this.change.emit(selectedLaw.value);

}

and in the <option> change the ngvalue to value:

<option *ngFor="let law of laws" [value]="law">{{law.name}}</option>

Hope it helps :)

answered Oct 11 '17 at 10:40

Mohamed Ali RACHID

3,245
11
22

Thanks, but I get at console: `selected law: undefined undefined.` – VansFannel Oct 11 '17 at 10:45
can u try to show the content of `laws` in the console ? what it contains exactly ? – Mohamed Ali RACHID Oct 11 '17 at 10:47
How can I show the content of `laws` in the console? – VansFannel Oct 11 '17 at 10:47
in your .ts file , simply : `console.log(laws);` – Mohamed Ali RACHID Oct 11 '17 at 10:48
I get this: `Array [ Object, Object, Object ]`. Sorry, this is the first time I do something like that. – VansFannel Oct 11 '17 at 10:51
no problem my friend :) , can u fetch the object in the console using the mouse to see its content ( if u are using Chrome try to see the content of the Array ) – Mohamed Ali RACHID Oct 11 '17 at 10:53
They have the same content as the JSON. – VansFannel Oct 11 '17 at 10:56
can we pass to Chat if there is no problem for u ? – Mohamed Ali RACHID Oct 11 '17 at 10:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156459/discussion-between-vansfannel-and-med-ali-rachid). – VansFannel Oct 11 '17 at 10:59

score 1 · Answer 2 · answered Oct 11 '17 at 11:30

This is how I have fix it:

<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:&nbsp;
<select #selectedLaw (change)="lawChanges(selectedLaw.value)">
    <option></option>
    <option *ngFor="let law of laws" [value]="law.value">{{law.name}}</option>
</select>

score 0 · Answer 3 · answered Oct 11 '17 at 10:46

you may try this code

//in html

<select #l="ngModel" [(ngModel)]="lawModel" name="lawName"  (change)="lawChanges(lawModel)">
    <option></option>
    <option *ngFor="let law of laws" [ngValue]="law">{{law.name}}</option>
</select>

// in ts declare lawModel as a variable;

lawModel:any;

Get selected value from select on onChange event with Angular 2

3 Answers3