title: Problem with multiple input file in *ngFor loop
body: <p>I'm having trouble targeting the correct input when it's in a *ngFor loop. When I add an image with the first input (Certificat dimmatriculation), I show a placeholder image and a delete button to reset the input (which works) but it shows under both div.</p>
  
  <p>I want to target only the input where I added the actual image. I do have a ViewChild but I can't seem to make it work.</p>
  
  <p><a href="https://i.stack.imgur.com/d0B44.jpg" rel="nofollow noreferrer">See image here</a></p>
  
  <p>and here's the code:</p>
  
  <pre><code>&lt;div class="files"&gt;
       &lt;div class="single-file" *ngFor="let file of files"&gt;
            &lt;h5&gt;{{file.title}}&lt;/h5&gt;
            &lt;input type="file" name="file" id="{{file.slug}}" class="inputfile" #fileInput (change)="addFile(fileInput.files[0])" /&gt;
            &lt;label for="{{file.slug}}" *ngIf="!hasFile || isDeleted"&gt;
            &lt;img class="d-none d-xl-inline-block" src="assets/images/addImg.png" alt=""&gt;
            Ajouter votre photo
            &lt;img class="d-block d-xl-none" src="assets/images/addImg_big.png" alt=""&gt;
       &lt;/label&gt;
       &lt;div class="placeholder" *ngIf="hasFile &amp;&amp; !isDeleted"&gt;
            &lt;img [src]="imageUrl" /&gt;
        &lt;/div&gt;
        &lt;div class="deleteImg" *ngIf="hasFile &amp;&amp; !isDeleted" (click)="deleteFile()"&gt;
            &lt;div class="btn btn-outline"&gt;&lt;img src="assets/images/delete-x-icon.png" alt="Supprimer"&gt;Supprimer&lt;/div&gt;
            &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in the .ts:</p>
  
  <p>I declare all my variables </p>
  
  <pre><code>file: File;
  imageUrl: string | ArrayBuffer = '../app/assets/images/imgAdded.png';
  hasFile = false;
  isDeleted = false;
  
  @ViewChild('fileInput', { static: false }) myFileInput: ElementRef;
  
  files: any = [{
      'title': 'Certificat dimmatriculation',
      'slug': 'immatriculation',
      'input': '#fileInput1'
  }, {
      'title': 'Preuve dassurance',
      'slug': 'insurance',
      'input': '#fileInput2'
  }];
  
  addFile(file: File) {
      if (file) {
          this.hasFile = !this.hasFile;
          // this.fileName = file.name;
          this.file = file;
  
          const reader = new FileReader();
          reader.readAsDataURL(file);
  
          reader.onload = event =&gt; {
              this.imageUrl = this.imageUrl;
              // this.imageUrl = reader.result;
          };
      }
  }
  
  deleteFile() {
      this.isDeleted = !this.isDeleted;
      this.myFileInput.nativeElement.value = '';
  }
  </code></pre>