How to get selected value and selected text of a dropdown on click a button in angular 7

Question

I have a dropdown select,Here on click the button I need to console selected text(green..) and selected value(1..),I tried with ngmodel but I can able to capture only value and also empty option is showing there in select field.Here is the code below,

home.component.html

<select>
<option *ngFor="let status of statusdata" value="{{status.id}}">{{status.name}}</option>
</select>
<button type="submit" (click)="register()" class="btn btn-primary mr-1">Register</button>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { 
    dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
 constructor(private formBuilder: FormBuilder) {


     }
     onHover(i:number){
 this.hoverIndex = i;
}
     columns = ["name", "Items","status"];



  ngOnInit() {
      this.test = false;
      this.statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];
} 

register(){
    console.log('selected Value');
    console.log('selected name');
}


}

Answer 1

If what you want is to store the whole object as a value when selected, you can try this:

<select [(ngModel)]="value">
  <option *ngFor="let status of statusdata" [ngValue]="status"> 
   {{status.name}}</option>
</select>

And then in your component just declare the variable value, and either leave it undefined or assign it to the value you wish (it needs to be the whole object). For instance:

export class HomeComponent implements OnInit { 
  statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];
  value = statusdata[0];
  ....

That should default to the first option selected. Then if you want to print the value just:

console.log(this.value.id);
console.log(this.value.name);

Answer 2

To achieve expected result, use below option of using Formbuilder, FormGroup and Form Control name in component.html and commponent.ts

component.html

1. Use form name for your form as [formGroup]="profileForm"
2. Set formControlName for select ie formControlName="name"

`component.ts
3. Declare formgroup and using formbuilder initialize name

profileForm: FormGroup
 constructor(private formBuilder: FormBuilder) {
this.profileForm = this.formBuilder.group({
    name: new FormControl(1)
});  

4. On button click get value using this.profileForm.get('name').value

register(){
    console.log('selected Value', this.profileForm.get('name').value);
    console.log('selected name', this.statusdata.filter(v => v.id == this.profileForm.get('name').value)[0].name);
}

Sample working code for reference - https://stackblitz.com/edit/angular-unnal4?file=src/app/app.component.ts

Please refer this link for more details on reactive forms - https://angular.io/guide/reactive-forms