Get Value From Select Option in Angular 4

angular angular-directive angular4-forms

As a general (see Stackblitz here: https://stackblitz.com/edit/angular-gh2rjx):

HTML

<select [(ngModel)]="selectedOption">   <option *ngFor="let o of options">      {{o.name}}   </option></select><button (click)="print()">Click me</button><p>Selected option: {{ selectedOption }}</p><p>Button output: {{ printedOption }}</p>

Typescript

export class AppComponent {  selectedOption: string;  printedOption: string;  options = [    { name: "option1", value: 1 },    { name: "option2", value: 2 }  ]  print() {    this.printedOption = this.selectedOption;  }}

In your specific case you can use ngModel like this:

<form class="form-inline" (ngSubmit)="HelloCorp()">     <div class="select">         <select [(ngModel)]="corporationObj" class="form-control col-lg-8" #corporation required>             <option *ngFor="let corporation of corporations"></option>             </select>         <button type="submit" class="btn btn-primary manage">Submit</button>     </div></form>HelloCorp() {  console.log("My input: ", corporationObj);}

angular angular-directive angular4-forms

export class MyComponent implements OnInit {  items: any[] = [    { id: 1, name: 'one' },    { id: 2, name: 'two' },    { id: 3, name: 'three' },    { id: 4, name: 'four' },    { id: 5, name: 'five' },    { id: 6, name: 'six' }  ];  selected: number = 1;  constructor() {  }    ngOnInit() {  }    selectOption(id: number) {    //getted from event    console.log(id);    //getted from binding    console.log(this.selected)  }}

<div>  <select (change)="selectOption($event.target.value)"  [(ngModel)]="selected">  <option [value]="item.id" *ngFor="let item of items">{{item.name}}</option>   </select></div>

Expand snippet