title: How to get the first image url from multiple selected image files in Angular 4
body: <p>I am new to angular 4 ,Here in need to display the first image of the selected image files before upload.</p>
  
  <p>I have searched and found a solution on stackoverflow but I can't get the first image url. It displayed all the images as selected.</p>
  
  <p>Reference : <a href="https://stackoverflow.com/questions/48939699/preview-multiple-image-before-upload-file-in-angular">Preview multiple image before upload file in Angular</a></p>
  
  <p>app.component.ts</p>
  
  <pre><code>export class AppComponent {
  
      urls = new Array&lt;string&gt;();
      selectedImageToShow : string ;
  
        detectFiles(event) {
  
          selectedImageToShow = // how to get the first image url 
  
          this.urls = [];
          let files = event.target.files;
          if (files) {
            for (let file of files) {
              let reader = new FileReader();
              reader.onload = (e: any) =&gt; {
                this.urls.push(e.target.result);
              }
              reader.readAsDataURL(file);
            }
          }
        }
      } 
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180"&gt;
  &lt;/div&gt;
  &lt;input type="file" multiple (change)="detectFiles($event)"&gt;
  </code></pre>
  
  <p>can anyone help me to solve this.</p>