How to get the selected option of dropdown on click of a button in Angular 7

Question

I have a dropdown that contains a few options coming from a loop,I need to get the selected option(not value) on click of a button. I tried with ngModel but I was able to get the value, not option. Can anyone please help me? Here is the code below

app.component.html

<div>
    <select>
        <option *ngFor="let group of groups" value="{{group.id}}">{{group.name}}</option>
    </select>
</div>
<input type="button" (click)="getVal()" value="submit"/>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    ngOnInit() {

    }

    getVal() {

    }

    groups = [{
        "id": 1,
        "name": "pencils",
        "items": "red pencil"
    },
    {
        "id": 2,
        "name": "rubbers",
        "items": "big rubber"
    },
    {
        "id": 3,
        "name": "rubbers1",
        "items": "big rubber1"
    }];
}

What exactly do you mean by "I need to get the selected option(not value)"? Do you want the `name`? — nash11, Sep 04 '19 at 18:27
Use the `indexOf()` method to find which option you've selected — Dev Man, Sep 04 '19 at 18:44

nash11 · Accepted Answer · 2019-09-04T19:28:31.743

2

Just use ngModel to bind to the selected value. Since you want to get both id and the name from the selected option, it would be better if you get the entire object that was selected. You can do this using ngValue (Source: docs).

<select [(ngModel)]="selectedGroup">
    <option *ngFor="let group of groups" [ngValue]="group">{{group.name}}</option>
</select>

selectedGroup: any;

getVal() {
    console.log(this.selectedGroup); // returns selected object
    console.log(this.selectedGroup.id); // returns selected option's id
    console.log(this.selectedGroup.name); // returns selected option's name
}

edited Sep 04 '19 at 19:28

answered Sep 04 '19 at 18:33

nash11

8,220
3
19
55

I have value also – UIAPPDEVELOPER Sep 04 '19 at 19:02
Why are you setting the value to `group.items` if you want the `name`? I'm still not clear on what you want, do you just want the object as a whole with both `items` and `name`? – nash11 Sep 04 '19 at 19:04
In this case its group.items but in our project, value will be there like group.id – UIAPPDEVELOPER Sep 04 '19 at 19:06
That doesn't answer my question. Can you please be clear on what exactly you want? In the comments on the question, you mentioned you wanted the name, the above answer will give you that. If that's not what you want, let me know exactly what you expect to get in the `getVal` function if you select `pencils` (for example) – nash11 Sep 04 '19 at 19:11
I need name only but when I put value inside option , its not working showing error I updated my question above. Just I need the display value of selected option on click a button thats all – UIAPPDEVELOPER Sep 04 '19 at 19:16
Yes, that is expected behavior because `ngModel` is bound to the `value` and not the display value in the option. I don't understand why you even need the `value` to be set as `group.items` if what you want is the `name`. Just set it to `group.name` or don't set it at all (as you will get `group.name` anyway) – nash11 Sep 04 '19 at 19:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198965/discussion-between-nash11-and-uiappdeveloper). – nash11 Sep 04 '19 at 19:20

Adrita Sharma · Answer 2 · 2019-09-04T18:34:59.893

1

Try like this:

Template:

<div>
  <select [(ngModel)]="selectedgroup">
     <option *ngFor="let group of groups">{{group.name}}</option>
  </select>
  </div>
<input type="button" (click)="getVal()" value="submit"/>

Typescript:

 selectedgroup: any

  getVal() {
    console.log(this.selectedgroup)
    console.log(this.groups.filter(x => x.name == this.selectedgroup)[0].items)
  }

See Stackbiltz Demo

edited Sep 04 '19 at 18:34

answered Sep 04 '19 at 18:29

Adrita Sharma

21,581
10
69
79

Not working with value throwing error – UIAPPDEVELOPER Sep 04 '19 at 19:04
I updated my question above – UIAPPDEVELOPER Sep 04 '19 at 19:20
Try console.log(this.groups.filter(x => x.items == this.selectedgroup)[0].items) – Adrita Sharma Sep 04 '19 at 19:28
In setting value, you can directly console the value or the name mentioned – Adrita Sharma Sep 04 '19 at 19:29

score 0 · Answer 3 · answered Sep 04 '19 at 19:46

        import { Component } from '@angular/core';
@Component({
selector: 'app-pager',
template: `
<div><select (change)="Selected($event)"><option *ngFor="let group of groups" [value]="group.name">{{group.name}}</option></select></div>
<input type="button" (click)="getVal()" value="submit"/>
<h4 [hidden]="hide">the name selected : {{ selected }} OR for click button : {{ button }} </h4>
`
})
export class PagerComponent {

selected : string = '';
button : string = '';

hide : boolean = true;
  Selected(event: any){
    //update the ui
    this.selected = event.target.value;
    this.hide=false;
  }
// or you can use the button :
getVal(){
this.button=this.selected;
}
groups=[
  {
    "name": "select your chois",
    "items": ""
  },
     {
       "name": "pencils",
       "items": "red pencil"
     },
     {
       "name": "rubbers",
       "items": "big rubber"
     },
     {
       "name": "rubbers1",
       "items": "big rubber1"
     }
  ];

}

    //you can give a value groups.name and working with $event

How to get the selected option of dropdown on click of a button in Angular 7

app.component.html

app.component.ts

3 Answers3

Linked