How to use multiple ViewChild element in Angular (2/4)

Question

I have followed https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/ to upload single file and its working fine.

Now I want to upload dynamic no of files based on the no of elements in an array documentTypes[] .

My HTML:

<div *ngFor="let item of documentTypes ;let i=index">
  <input #fileInput[i] type="file" #select name="document[{{i}}]" />
</div>

My TS:

@ViewChild("fileInput") fileInput: any[];

Submit function:

onSubmit = function (docs) {
  for (var i = 0; i < this.documentTypes.length; i++) {
    let fi = this.fileInput[i].nativeElement;
    //This  is not working. Here fileInput is undefined
  }
};

Any suggestion will be appreciated.

Answer 1

@ViewChild decorator is only for one child. To get array of children you need to use @ViewChildren