Angular 4 : Selected values from template ?

In this article we are creating a select where the data is populated from the custom config file, this custom config file contains some object array with some values ,

we will use ngFor with this to show all the options , and then when one option is selected we will send that option to the TS file.

Template HTML

    <div class="form-group">
          <label>Select Project Key</label>
          <select class="form-control" (change)="esindexchanged($event)">
            <option *ngFor= "let project of esProjectObject" [value]="project.projectValue" >{{project.projectKey}}</option>
          </select>

        </div>

-> Note : here we are using [value] instead of ngValue since it did not worked for me in anglar 4,

and the projectObject is basically a object of array with some project key and project value,

once the option value is changed we are calling a function esindexchanged($event)

checkout the function

here we are getting the value using event.target.value and then storing it in the property later using it in the get request.

  esindexchanged(event:any) {
    console.log(event.target.value);

    this.esindexprop=event.target.value;

  }

simplest Get request :

  onSearch() {
        let options=new RequestOptions({ headers: this.getHeaders() });
    this.http.get(this.searchbackendForRequestJson+ this.esindexprop+"/"+"_doc/"+this.requestKey,options).subscribe( 
      (responseData) => {
      // console.log(responseData);
      this.responsejsonData=responseData.text();
      this.isRequestFound=true;
    }, 

    (error) => {
      console.log(error);
      this.responsejsonData="";
      this.isRequestFound=false;
      this.requestNotFoundMessage=this.requestKey+" is not found in "+this.esindexprop+ " index. Please Contact the  Admin for details";

    }
    )
  }