0

Project: Trying to create a simple image gallery. One main image placeholder, that changes its image to be have the same src as a corresponding thumbnail image that has been clicked.

Example in plain JS: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tab_img_gallery

Code:

<div *ngIf="images">  

  <div *ngFor="let image of images"> //images array

    <img #productThumbnail [src]='image.fields.file.url' 
    (click)='thumbnailClicked()'>

    <div *ngIf='showImage'>//simple function that shows the image
      <img src={{productThumbnail.src}}>
    </div>

(image.fields.file.url is an external array (array name: images) of image URLs)

Problem: When the images array is populated many array items will be given the reference #productThumbnail

This results in the main image placeholder retrieving the src of every thumbnail, because they all have the same reference of #productThumbnail. I just need the thumbnail that has been clicked on.

I hope this makes some sense. Any help is really appreciated.

Brian
  • 1
  • 1

1 Answers1

2

Mimicking that, I think you'd want this:

<img *ngFor="let image of images" 
    [src]='image.fields.file.url' 
    (click)='thumbnailClicked(image)'>

Have you stepped through the Angular tutorial yet? I think walking through that can help you to solve problems like this.

Daniel W Strimpel
  • 8,190
  • 2
  • 28
  • 38
  • Thanks for your reply Daniel, and for spotting that I left out the ngFor statement. (I've updated the question to put it in). I got the above code from the Angular tutorial, which I did find helpful. I'll keep going through it. – Brian Apr 20 '18 at 04:57