CODEWITHSUNDEEP
javascripthtmlangulartypescript
awebdev
awebdev

Reputation: 1127

Display thumbnail that user clicks as main image with Angular2

I am making a product thumbnail gallery, and wish to display the thumbnail that the user clicks as the main image. I am doing this with Angular, but I am fairly new to the framework.

product.html

<img src="{{mainImage}}">

<div class="thumbnails">        
        <img src="{{image1}}" (click)="changeMainImg()">
        <img src="{{image2}}" (click)="changeMainImg()">
</div>

product.ts

public mainImage;

public image1 = "http://via.placeholder.com/100x100";
public image2 = "http://via.placeholder.com/100x200";

public changeMainImg(event){
    this.mainImage = "http://via.placeholder.com/100x100";
}

For the part

this.mainImage = "http://via.placeholder.com/100x100";

I want this.mainImage to equal either image1, or image2, depending on which thumbnail is selected.

Upvotes: 1

Views: 1996

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Just pass the selected image to the function and assign it

<div class="thumbnails">        
        <img src="{{image1}}" (click)="changeMainImg(image1)">
        <img src="{{image2}}" (click)="changeMainImg(image2)">
</div>

and in TS

changeMainImg(image:any){
    this.mainImage = image;
}

DEMO

Upvotes: 1

Related Questions