How do I replace the large image of my page with the associated clicked small image?

The page shown above has large images of products with smaller images below each product showing variations of that product. When a small image is clicked, it is to replace the image in the large frame. Here is the segment of code that produces the images:

<div class="row">
<div *ngFor="let product of products.products" class="col col-12 col-md-6 col-lg-4 p-3 gallery-col">
<img class="img-fluid" src="assets/img/{{currentGalleryImg}}">

<div class="d-flex justify-content-around mt-2">
<img *ngFor="let img of product.images; let idx=index" class="img-fluid" src="assets/img/{{img}}"
style="width: 47.4px;" (click)="setCurrentGalleryImg(img)"
[ngClass]="{'gallery-product-selected': currentGalleryImg === img }">
</div>
</div>


This implementation is faulty. When the small image is clicked, the variable currentGalleryImg is set in the component to the clicked image. Not only is the small image displayed in place of the larger image, all large images on the page are replaced by the clicked smaller image. The object is to replace only the large image of the associated small image.

Continue reading...