title: Preview multiple image before upload file in Angular
body: <p>How can I preview multiple images that I have selected before uploading them in Angular?</p>
  
  <p><a href="https://i.stack.imgur.com/znjbS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/znjbS.png" alt="enter image description here"></a></p>
  
  <p>I have managed to do it but only with one image, even though I select several, only one recognizes me. I think the use of <code>*ngFor</code> is a good alternative but I'm not sure how to raise it. Any ideas?</p>
  
  <p><strong>myComponent.html</strong></p>
  
  <pre><code>&lt;img *ngIf="url" [src]="url" class="rounded mb-3" width="180"&gt;
  &lt;input type="file" multiple (change)="detectFiles($event)"&gt;
  </code></pre>
  
  <p><strong>myComponent.ts</strong></p>
  
  <pre><code>detectFiles(event) {
  this.selectedFiles = event.target.files;
  if (event.target.files &amp;&amp; event.target.files[0]) {
    var reader = new FileReader();
    reader.onload = (event: any) =&gt; {
      this.url = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }
  }
  </code></pre>