Angular. After closing image cropper does not open the same image from another panel in accordion

Question

In accordion content there is a functionality to upload cropped image. When I clicked the icon to upload it opens modal for image cropping, but when I close the modal instead of "Done" in second time for the same image it does not open the modal.

Html Input

<label [for]="'image-input-' + i">
  <span class="icon">
    <i class="fa-solid fa-circle-plus" title="Upload new image"></i>
  </span>
</label>

<input hidden #imageInput [id]="'image-input-' + i" type="file" accept="image/*"                               
      (change)="onFileChange($event, promotion.promotion,'image')" />

Cropper

<ng-template #ImageCropper let-modal>
    <div class="p-2 cropper">
        <h5 class="modal-title" id="exampleModalLabel">
            Crop Selected
            Image</h5>
        <image-cropper [maintainAspectRatio]="true"
            [aspectRatio]="6 / 3" format="png"
            [imageChangedEvent]="imageCropperEventAttached"
            (imageCropped)="ImageCropped($event)">
        </image-cropper>
    </div>
    <div class="d-flex">
        <button type="button"
            class="btn btn-danger text-white px-3 py-2 m-2 ms-auto"
            (click)="onThumbnailCropperCloseClick()">
            Close
        </button>
        <button type="button"
            class="btn btn-primary px-3 py-2 m-2"
            (click)="processFile(imageInput, selectedData, 'image')">
            Done
        </button>
    </div>
</ng-template>

typescript

onFileChange(event: any, pr: any, imgType: any): void {
    this.imageCropperEventAttached = event;
    this.popup = this.modalService.open(this.imageCropModel);
    this.selectedData = pr;
  }

I tried to add @ViewChild('imageInput') imageInput: ElementRef;

and set value null on closing but it does not work properly when I try to upload the same image from another panel .

onThumbnailCropperCloseClick() {
    this.popup.close();
    this.imageInput.nativeElement.value = '';
  }

Stackblitz

Answer 1

Every time ViewChild returns the first panel because Angular will find the first instance of the panel. Change ViewChild to ViewChildren for getting all of the panels.

@ViewChildren('imageInput') imageInput: any;

And also set empty value to all panels in onThumbnailCropperCloseClick()

onThumbnailCropperCloseClick() {
    this.popup.close();
    this.imageInput.forEach((panel: ElementRef) => panel.nativeElement.value = '');
}