How to use view children in angular2

Question

I have a html code like this with template reference variable for app-image-upload-component

<div *ngFor="let image of images"; let i = index>
  <app-image-upload #imageUpload (click)="uploadImage(i)" (image)="setImageData($event, i)">
    <img src="assets/img/camera-img.png" alt="img">
    <h4>Upload Image</h4>
  </app-image-upload>
</div>

Then in my typescript code, i am doing something like this

@ViewChild('imageUpload') imageUpload: ImageUploadComponent;

uploadImage(index) {
  console.log('index', index);
  this.imageUpload.showImageBrowseDlg();
}

When i fire click event on app-image-upload, then it always shows index value 0, no matter what is the index of *ngFor.

I know this is happening because #imageUpload is refrencing only to the first element of ngFor, so is there a way to reference all elements of *ngFor differently and to use them, as required in my code.

See also http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 — Günter Zöchbauer, May 03 '17 at 11:40

score 1 · Answer 1 · answered May 03 '17 at 11:12

You can use ViewChildren which has a QueryList of components.

import {ViewChildren,QueryList} from '@angular/core';
    @ViewChildren('imageUpload') imageUploads: QueryList<ImageUploadComponent>;

    uploadImage(index) {
      console.log('index', index);
      this.imageUploads.find((imgUpld,i)=>{
          return index == i;
      }).showImageBrowseDlg();
    }

score 1 · Answer 2 · answered May 03 '17 at 11:16

Finally I figured out how to solve this issue, instead of @ViewChild, i can use @ViewChildren and can do something like this.

@ViewChildren(ImageUploadComponent) imageUploadChildren: QueryList<ImageUploadComponent>;

#Subscribe for changes, so that if we delete any children, then it must new array.

ngAfterViewInit() {
  this.imageUploadChildrenArray = this.imageUploadChildren.toArray();
  this.imageUploadChildren.changes.subscribe(childern => {
  this.imageUploadChildrenArray = childern.toArray();
});

}

uploadImage(index) {
  this.imageUploadChildrenArray[index].showImageBrowseDlg();
}

score 0 · Answer 3 · answered May 03 '17 at 11:39

You can pass a #ref to handle function. Make sure that u export your upload directive with exportAs and assign a ref to it. See an example here:

https://plnkr.co/edit/BN2dreniteQag82h28BC?p=preview

  @Directive({
    selector: '[upload]',
    exportAs: 'upload'
  })
  export class Upload {
    static i =0;
    constructor() {
      this.instanceI = Upload.i++;
      console.log('upload');
    }
  }

  @Component({
    selector: 'my-app',
    template: `
      Last handled upload {{last}}
      <div *ngFor="let i of items">
        <h2 upload #uploadRef="upload" (click)="handle(uploadRef)">Hello {{i}}</h2>
      </div>
    `,
  })
  export class App {
    items = ['a', 'b', 'c'];

    constructor() {
    }

    handle(uploadRef) {
      console.log(uploadRef);
      this.last = uploadRef.instanceI;
    }
  }

How to use view children in angular2

3 Answers3