Choose a single image by clicking on the <img> tag

Question

Choose a single image by clicking on the <img> tag

While working with Angular, I encountered an issue where rendering multiple images using the img tag resulted in all images changing background color when one of them was clicked. I need to find a solution to change only the background color of the image that is clicked.

Below is the code snippet I am currently using:

html

<img
 [src]="data.Url" alt="image"
 (click)="_upload(data.Url)" 
 [ngClass]="{'green' : toggle, 'red': !toggle}"
>

ts

Within my function:

this.toggle = !this.toggle;
this.status = this.toggle ? 'Enable' : 'Disable';

javascript css angular typescript

Answer 1

Answer №1

To handle the rendering of multiple HTML elements, it is assumed that you are utilizing the ngFor directive. In this scenario, you can leverage the index to assign distinct css classes to each element.

Here's an example:

HTML

<div *ngFor="let option of options; let i = index">
 <img
   [src]="option.Url"
   (click)="_upload(option.Url, i)"
   [class.selected]="i === indexSelected" <!--apply the selected css class if condition is TRUE-->
  >
</div>

CSS

.selected {
  background-color: green;
}

TypeScript

...
export class YourComponent {
  indexSelected: number = -1;

  _upload(url: string, index: number) {
    // ...
    this.indexSelected = index;
  }
}

Answer 2

To handle the rendering of multiple HTML elements, it is assumed that you are utilizing the ngFor directive. In this scenario, you can leverage the index to assign distinct css classes to each element.

Here's an example:

HTML

<div *ngFor="let option of options; let i = index">
 <img
   [src]="option.Url"
   (click)="_upload(option.Url, i)"
   [class.selected]="i === indexSelected" <!--apply the selected css class if condition is TRUE-->
  >
</div>

CSS

.selected {
  background-color: green;
}

TypeScript

...
export class YourComponent {
  indexSelected: number = -1;

  _upload(url: string, index: number) {
    // ...
    this.indexSelected = index;
  }
}

Answer 3

Answer №2

Appreciate everyone, here is the approach I took

<td *ngFor="let item of responseData; let i = index;" (click)="setActive(i)" [ngStyle]="{'background-color': active === i ? '#4b8df2' : 'white' }">
    <div>
    <img 
     [src]="item.Url" alt="image"
     (click)="uploadImage(item.Url)" 
    >
    </div>
</td>

Answer 4

Appreciate everyone, here is the approach I took

<td *ngFor="let item of responseData; let i = index;" (click)="setActive(i)" [ngStyle]="{'background-color': active === i ? '#4b8df2' : 'white' }">
    <div>
    <img 
     [src]="item.Url" alt="image"
     (click)="uploadImage(item.Url)" 
    >
    </div>
</td>

Choose a single image by clicking on the <img> tag

Answer №1

Answer №2

Similar questions

Calculate the total amount by multiplying the price and quantity values within nested arrays

Create a stylish frame around the interior triangle shape

The issue of the HTML email background image not appearing at its full width is

Preserve the output from the jQuery ajax request

Exploring the Four Quadrants of CSS

Separate a tab delimited text file and store it into an array using JavaScript

Adding an external JavaScript library to a gateway project: A step-by-step guide

Is there a directive in AngularJS that allows for binding HTML templates using ng-bind-html

Extend child flex boxes vertically when the main axis is horizontal

Dynamic updating in a React application with an express server

What is the best way to calculate checksum and convert it to a 64-bit value using Javascript for handling extremely large files to avoid RAM overflow?

How to use Javascript to set focus on a dropdown list within a PHP script

Trouble arises when attempting to modify a property inherited from a parent class in TypeScript while

angular table cell with a show more/less button

Combining multiple arrays housed within a single variable

Exploring ways to incorporate or eliminate animations on mobile devices using html/css

Ways to resolve the issue with the information window on Google Maps

How to change the hover effect of a span with CSS

Language setting required for dijit.form.DateTextBox

Unable to navigate through bootstrap dropdown items using keyboard shortcuts