title: Angular2 and xhr EventListener
body: <p>How to access HTML elements inside addEventListener function? Or Can I set value for a component property inside this function? I want to make progress percent for uploading file.
  <a href="https://i.stack.imgur.com/2PiYL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2PiYL.png" alt="enter image description here"></a></p>
  
  <p><strong>sample.component.ts :</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  @Component({
  selector: 'Account-Management',
  templateUrl: 'AddUser.template.html',
  })
  export class AddUserComponent {
  host: string = "http://" + window.location.hostname + (location.port ? ':' + location.port : '');
  URL = this.host + '/api/apiUser/Upload';
  
   upload() {
      this.makeFileRequest(this.URL, [], this.filesToUpload).then((result) =&gt; {
          console.log(result);
      }, (error) =&gt; {
          console.error(error);
      });
  }
  
  fileChangeEvent(fileInput: any) {
      this.filesToUpload = &lt;Array&lt;File&gt;&gt;fileInput.target.files;
  }
  percent = "0";
  makeFileRequest(url: string, params: Array&lt;string&gt;, files: Array&lt;File&gt;) {
      var i = 1;
  
      return new Promise((resolve, reject) =&gt; {
          var formData: any = new FormData();
          var xhr = new XMLHttpRequest();
          for (var i = 0; i &lt; files.length; i++) {
              formData.append("uploads[]", files[i], files[i].name);
          }
    xhr.upload.addEventListener("progress", this.progressFunction, false);  
          xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                  if (xhr.status == 200) {
                      resolve(JSON.parse(xhr.response));
                  } else {
                      reject(xhr.response);
                  }
              }
          }
          xhr.open("POST", url, true);
          xhr.send(formData);
      });
  }
  
  progressFunction(evt, d) {
  
      if (evt.lengthComputable) {
  //percent changed but I couldn't see change in html.
          this.percent = Math.round(evt.loaded / evt.total * 100) + "%";
  //log works correctly.
          console.log("PERCENT : ", this.percent);
  //log works correctly.
          console.log(Math.round(evt.loaded / evt.total * 100) + "%");
      }
  }
  </code></pre>
  
  <p><strong>AddUser.template.html :</strong></p>
  
  <pre><code>                &lt;div class="form-group"&gt;
                      &lt;input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /&gt;
                      &lt;button type="button" (click)="upload()"&gt;Upload&lt;/button&gt;
                      &lt;span&gt;{{percent}}&lt;/span&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lfQuO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfQuO.png" alt="enter image description here"></a></p>