How To Get The Selected Option Of Dropdown On Click Of A Button In Angular 7

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 v

Solution 1:

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
}

Solution 2:

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

Solution 3:

        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