title: angular 4 ng-select converting data
body: <p>Created an angular project using angular-cli</p>
  
  <p>I am using <a href="https://github.com/basvandenberg/ng-select" rel="nofollow noreferrer">https://github.com/basvandenberg/ng-select</a> for modifying selectbox.
  Getting data from rest servis.</p>
  
  <pre><code>that is my basic data
  [
      {
          "name": "New York",
          "id": "108779345385"
      },
      {
          "name": "London",
          "id": "104207537613"
      },
      {
          "name": "Paris",
          "id": "109677701240"
      }
  ]
  </code></pre>
  
  <p>my.component.ts</p>
  
  <pre><code>import { Component, OnInit, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { SelectModule } from 'ng-select';
  import { Router } from "@angular/router";
  import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
  import { ApiService, Method } from "../../service/apiservice.service";
  import { UsermodalsComponent } from '../modals/usermodals/usermodals.component';
  import { IOption } from 'ng-select';
  import 'rxjs/Rx';
  
  @Component({
      selector: 'app-add-newaddress',
      templateUrl: './newaddress.component.html',
      providers: [ApiService]
  })
  
  @NgModule({
      imports: [
          FormsModule,
          ReactiveFormsModule,
          BrowserModule,
          SelectModule
      ]
  })
  
  export class NewaddressComponent implements OnInit {
  
      newTaskForm: FormGroup;
      cities: Array&lt;IOption&gt;;
      district: Array&lt;IOption&gt;;
      selectedCountry: string;
      noFilterThreshold: number = 6000;
  
      addressSelection = [];
  
  
      constructor(private apiService: ApiService) { }
  
      getTowns() {
          this.apiService.callService(new Method("Address/GetTowns", null, "get"))
              .subscribe(h =&gt; {
                  this.cities = h.result; 
              });
      }
  
      onSelected(option: any) {
          var districtId = option.id;
          this.getSubCities(districtId);
      }
  
      getSubCities(getDistrict) {
          this.apiService.callService(new Method("Address/GetSubCities?townId='" + getDistrict + "'", null, "get"))
              .subscribe(h =&gt; {
                  this.district = h.result;
              });
      }
  
  
      ngOnInit() {
  
          this.getTowns();
  
      }
  
  
  }
  </code></pre>
  
  <p>html block</p>
  
  <pre><code>&lt;ng-select placeholder="Select City" [options]="cities" [allowClear]="true" (selected)="onSelected($event)" [(ngModel)]="selectedCountry"
                          name="selectedCountry" [noFilter]="noFilterThreshold" &gt;
                          &lt;ng-template #optionTemplate let-option="option"&gt;
                              {{option?.name}}
                          &lt;/ng-template&gt;
                      &lt;/ng-select&gt;
  </code></pre>
  
  <p>here is the problem.
  whenever i choose an item in selectbox , i dont see it in selectbox(a.k.a blank);</p>
  
  <p>how can i pass name to label and id to value?</p>
  
  <p>thanks</p>