title: OnChange Typescript input
body: <p>I want to be able to trigger an on change when a file is selected from a input(file). I want the triggered event to set a textbox to be the name of the file. </p>
  
  <p>I am using HTML5, Typescript and Angular2. I can't figure out or find an example of exactly how to produce the behavior I am after.</p>
  
  <p>see my code below:</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Http } from '@angular/http';
  import { Headers, RequestOptions } from '@angular/http';
  
  @Component({
      selector: 'testConnection',
      // ignore error on require
      template: require('./testConnection.component.html')
  })
  export class TestConnectionComponent {
      public http: Http;
      public requestData: RequestData;
  
  
      public constructor(http: Http) {
          this.http = http;
  
          (&lt;HTMLInputElement&gt;document.getElementById('fileInput')).onchange = (ev: Event) =&gt; {
              var fileInput = (&lt;HTMLInputElement&gt;ev.srcElement).files[0];
  
              var fileTextbox = (&lt;HTMLInputElement&gt;document.getElementById('fileTextbox'));
              fileTextbox.value = fileInput.name;
          }
      }
  
  
      public testButtonClick() {
  
          // Iniatialise Request object
          let request: RequestData;
          request = { "CountryCode": "", "SiteIDList": "" };
  
          // Get site(s)
          var siteIdList = (&lt;HTMLInputElement&gt;document.getElementById('siteIDInput')).value;
  
          // Get selected country
          var countryCode = (&lt;HTMLInputElement&gt;document.getElementById('countryDropdown')).value;
  
          // Veryify contents is just site ids. 
          // TODO
          request.CountryCode = countryCode;
          request.SiteIDList = siteIdList;
  
  
          // Set Http POST options
          let headers = new Headers({ 'Content-Type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
  
          // Call Api with test connection data 
          this.http
              .post('/api/TestConnection/TestConnection', JSON.stringify(request), options)
              .subscribe(data =&gt; {
                  // alert request ok
                  alert('ok');
              }, error =&gt; {
                  // Log error
                  console.log(error.json());
              });
      }
  }
  
  interface RequestData {
      SiteIDList: string;
      CountryCode: string;
  }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;h2&gt;Test Site Connection&lt;/h2&gt;
  
  &lt;p&gt;This will allow you to check the connectivity of a set of sites by either individually or uploading a CSV file of Site IDs.&lt;/p&gt;
  &lt;br /&gt;
  &lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Manual Test&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt;
              Select the country and the sites you want to test.
          &lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;Multiple sites can be selected using commas (,).&lt;/li&gt;
              &lt;li&gt;you can see results in the Site Connection Results tab&lt;/li&gt;
          &lt;/ul&gt;
          &lt;br /&gt;
          &lt;!--Replace with lookup to enabled countries--&gt;
          &lt;div class="form-group col-lg-4"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;select class="form-control" id="countryDropdown"&gt;
                      &lt;option&gt;Select Country&lt;/option&gt;
                      &lt;option&gt;US&lt;/option&gt;
                      &lt;option&gt;SG&lt;/option&gt;
                      &lt;option&gt;NL&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;input type="text" class="form-control" placeholder="SiteID(s)" id="siteIDInput" /&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-primary" (click)="testButtonClick()"&gt;Test&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-success"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Upload file&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div&gt;
              &lt;p&gt;Upload a CSV file of sites to test all at once.&lt;/p&gt;
              &lt;br /&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;input type="text" class="col-lg-4 form-control" id="fileTextbox" disabled/&gt;
              &lt;/div&gt;
              &lt;label class="btn btn-primary"&gt;
                  Browse &lt;input type="file" id="fileInput" style="display:none;" onchange="{ setFileName() }"/&gt;
              &lt;/label&gt;
              &lt;button class="btn btn-primary" (click)="searchButtonClick()"&gt;Test&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;One fine body…&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>