0

I have a dropdown:

<ul class="dropdown-menu">
    <li><a href="#" (click)="showSelectedImage(1)">Option 1</a></li>
    <li><a href="#" (click)="showSelectedImage(2)">Option 2</a></li>
    <li><a href="#" (click)="showSelectedImage(3)">Option 3</a></li>
</ul>

and I have 3 images:

<img class="hidden" src="image1.png" alt />
<img class="hidden" src="image2.png" alt />
<img class="hidden" src="image3.png" alt />

In app.component.ts I have this method:

showSelectedImage(image) {
    // ... 
}

What I need to do is when an image is selected from the dropdown menu, I need that image to be shown and the others to be hidden.

Improve this question

3 Answers 3

Reset to default
4

Just generate one image with the corresponding source :

<ul class="dropdown-menu">
    <li *ngFor="let i of [1,2,3,4,5,6]">
        <a href="#" (click)="showSelectedImage(i)">Option {{i}}</a>
    </li>
</ul>

<img src="image{{imageId}}.png" *ngIf="imageId" />

Component :

imageId:Number;

showSelectedImage(id){
    this.imageId = id
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

don't repeat yourself! are you going to write 50 <li> items if there are 50 choices?
absolutely right, I was editing my answer :) This being said, each <li> can be written independently, because they can be very different. But in any case, only one image is needed.
Good answer, this way it will also lazy load the images.
1

If you wanted to separate the image urls and descriptions, you could put them in a list within your component code and then display them in the template using an ngFor. That way they can be called whatever (rather than having to be image1, image2, image3 etc.) and could be easily changed in the future without having to edit your template each time (e.g. from a dynamic list).

E.g.: Template:

<ul class="dropdown-menu">
    <li *ngFor='let image of images'><a href="#" (click)="showSelectedImage(image)">{{image.description}}</a></li>
</ul>

<img *ngIf='selectedImage' src="{{selectedImage.src}}" alt />

app.component.ts:

selectedImage;
images: list = [
    {src: 'image1.jpg', description: 'Image 1'},
    {src: 'image2.jpg', description: 'Image 2'},
    {src: 'someotherimage.jpg', description: 'Some other Image'}
];

showSelectedImage(image) {
    this.selectedImage = image;
}

Example Plunker

Improve this answer

2 Comments

This goes a bit beyond the question, but it's a nice example. Up
Where's 'list' specified?
0 
<ul class="dropdown-menu">
    <li><a href="#" (click)="showSelectedImage(1)">Option 1</a></li>
    <li><a href="#" (click)="showSelectedImage(2)">Option 2</a></li>
    <li><a href="#" (click)="showSelectedImage(3)">Option 3</a></li>
</ul>


<img class="hidden" src="image1.png" alt *ngIf="selectedImage==1"/>
<img class="hidden" src="image2.png" alt *ngIf="selectedImage==2"/>
<img class="hidden" src="image3.png" alt *ngIf="selectedImage==3"/>

app.component.ts 

private selectedImage: number;

showSelectedImage(imageNumber: number) {
    this.selectedImage = imageNumber; }
Improve this answer

2 Comments

Don't Repeat Yourself... Will you write each one of the 50 <img> tags and 50 *ngIfs if there are 50 choices?
I first wrote a quick "copy-paste" of OP's code with solution, and I was about to simplify exactly as you did... but I saw that you already did it ;) , so no need to copy your answer. I agree, DRY, Don't Repeat Yourself !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.