title: Two way binding with angular 2
body: <p>I have an input in which I am using 2-way binding syntax to populate its value like so in a separate component:</p>
  
  <pre><code>  &lt;input type="text" [(ngModel)]="this.inputValue" id="itemText"&gt;
  </code></pre>
  
  <p>And in my index.html, I set the value of inputValue:</p>
  
  <pre><code>  onSelect: function (request, response) {
            this.inputValue = request.item;
      }
  </code></pre>
  
  <p>However, my input is updating with this new value, what am I missing?</p>
  
  <p>Edit: 
  The component is setup like so:</p>
  
  <pre><code>@Component({
    selector: 'app-leftpane-table',
    templateUrl: './leftpane-table.component.html'
  })
  export class LeftpaneTableComponent implements OnInit {
    inputValue:any;
    constructor(private ds: DataService) { }
  
    ngOnInit() {}
  </code></pre>
  
  <p>And in index.html I am setting inputValue once an item has been selected from the search results:</p>
  
  <pre><code>$('.ui.search')
    .search({
      apiSettings: {
        url: 'http://localhost:8088/Badges/{query}'
      },
      onSelect: function (request, response) {
          var urlApi = 'http://localhost:8088/Badges/Details/' + request.item;
          this.inputValue = request.item;
      }
  });
  </code></pre>