title: Angular2 - Display image
body: <p>I created a Angular2 app that allows the user to upload images. I want to implement a preview option. However, when i try to imperilment it the image doesn't show up. How do i achieve this feature? </p>
  
  <p>UploadComponent.ts</p>
  
  <pre><code>import * as ng from '@angular/core';
  //import { UPLOAD_DIRECTIVES } from 'ng2-uploader';
  import {UploadService} from '../services/upload.service'; 
  
  @ng.Component({
    selector: 'my-upload',
    providers:[UploadService], 
    template: require('./upload.html')
  })
  export class UploadComponent {
      progress:any; 
      logo:any; 
      filesToUpload: Array&lt;File&gt;;
      constructor(public us:UploadService){
          this.filesToUpload = [];
      }
      upload() {
          this.us.makeFileRequest("http://localhost:5000/api/SampleData/Upload", this.filesToUpload)
          .then((result) =&gt; {
              console.log(result);
          }, (error) =&gt; {
              console.error(error);
          });
      }
      onFileChange(fileInput: any){
          this.logo = fileInput.target.files[0];
      }
  }
  </code></pre>
  
  <p>Upload.html </p>
  
  <pre><code>&lt;h2&gt;Upload&lt;/h2&gt;
  &lt;input type="file" (change)="onFileChange($event)" placeholder="Upload image..." /&gt;
  &lt;button type="button" (click)="upload()"&gt;Upload&lt;/button&gt;
   &lt;img [src]="logo" alt="Preivew"&gt; 
  </code></pre>