Get value from selected dropdown in Angular 2

Question

I have a database table with two attributes (Name_of_Game and Type_of_Game). I have to extract Name_of_Game in the dropdown list. But this is what I want to do now. After choosing a game from the drop-down list, how can I type type into the corresponding game type automatically?

Example

The game
Lord of the Rings

A type

Adventures

After choosing Lord of the rings from the drop-down list, the type input field should be automatically set to Adventure.

//Component export class ChatComponent{ Game : Games []; constructor(private http:HttpService){ // list all games into the dropdown list this.http.listgames() .subscribe(data => { this.Games = data; }) } //html <div class="form-group"> <select class="form-control" name="game" [(ngModel)]="game.name" required> <option *ngFor="let games of Games" [ngValue]="games" > {{games.name}} </option> </select> </div> <div class="form-group"> <label for="type">Type:</label> <input type="type" class="form-control" name="type" [(ngModel)]="game.type"> </div> 

Answer 1

Look at the naming convention, I changed the names in my example a little to reflect the lower / upper case that we usually use;)

You are on the right track to use [ngValue] . Let your name bind the entire object, which we can then use in the type to show the corresponding type. Therefore, let us create a variable in which we will store the selected game, when the user selects a name from the drop-down list, let me call it selectedGame :

component:

 selectedGame: Object = {}; 

Template:

 <select [(ngModel)]="selectedGame" required> <option *ngFor="let game of games" [ngValue]="game">{{game.name}}</option> </select> 

Now we have bound the entire object to selectedGame , so the input field will reflect that we are making changes, since we use selectedGame.type as a two-way binding for the input field. So your template will look like this:

 <label>Name:</label> <select [(ngModel)]="selectedGame" required> <option *ngFor="let game of games" [ngValue]="game" > {{game.name}} </option> </select> <label>Type:</label> <input type="type"name="type" [(ngModel)]="selectedGame.type"> 

Here a

Demo

Answer 2

You must use the name property when you point to the name in [(ngModel)], you must use the same property to bind to ngValue as belew

 <select class="form-control" name="game" [(ngModel)]="game.name" required> <option *ngFor="let games of Games" [ngValue]="games.name" > {{games.name}} </option> </select> 

Update: if you want a type, then you should do as below

 <select class="form-control" name="game" (change)="valueChange()" [(ngModel)]="game" required> <option *ngFor="let games of Games" [ngValue]="games" > {{games.name}} </option> </select> 

Change your text box to contain some name as a model

 <input type="type" class="form-control" name="type" [(ngModel)]="someName"> 

Your method looks like

 valueChange(games){ this.someName=this.game.type; } 

Live demo

Answer 3

In Angular 4, you can:

 (change)="MyMethod($event.target.value)" 

pass the selected value to the Typescript method.