List of images are executing in a loop(ngFor). I am trying to get the current element that is being clicked by calling the function (click)="addStyle()".The issue I am facing here is ,if i am adding a style [class.active] depending upon the clicked method,it gets reflected in all the image tags.But I am trying to add style to only the particular image being clicked.

ponent.html

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive" (click)="addStyle()">
</div>

ponent.ts

 isActive:false;
 addStyle()
 {
  this.isActive=true;
 }

ponent.css

.active
{
 border:1px solid red;
 }

In short,I am trying to add style to only particular image tag and not all the images in the loop

List of images are executing in a loop(ngFor). I am trying to get the current element that is being clicked by calling the function (click)="addStyle()".The issue I am facing here is ,if i am adding a style [class.active] depending upon the clicked method,it gets reflected in all the image tags.But I am trying to add style to only the particular image being clicked.

ponent.html

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive" (click)="addStyle()">
</div>

ponent.ts

 isActive:false;
 addStyle()
 {
  this.isActive=true;
 }

ponent.css

.active
{
 border:1px solid red;
 }

In short,I am trying to add style to only particular image tag and not all the images in the loop

• javascript
• jquery
• css
• angular

• 1 (click)="addStyle(i)" add i to addStyle, and class.active should be img.active. Rename let i = index to let _i = index to avoid conflicts with the already declared variable i. Alter addStyle to set i.isActive to !i.isActive. – briosheje Commented May 9, 2019 at 5:44
• thanks for the help..but i am still trying to add style to only the particular element that is being clicked – Sathya Narayanan GVK Commented May 9, 2019 at 5:50
• This will do that. You just need to disable the style on the other elements. – briosheje Commented May 9, 2019 at 5:53

5 Answers 5

Try this one.

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="i === activeIdx" 
(click)="addStyle(i)">
</div>

activeIdx: number;
addStyle(i)
{
  this.activeIdx = i;
}

you can try like this

HTML

<div class="item" *ngFor="let i of img;let j = index">
    <img class="product-i-2" [src]="i" [class.active]="isActive[i] == true ? 'active' : '' " (click)="addStyle(j)">
</div>

TS

isActive: any[] = false;
ngOnInit() {
// here we set defalut value to false
   for (let i = 0; i < img.length; i++) {
    this.isActive.push(false);
   }
}
 addStyle(j)
 {
  this.isActive[j]= !this.isActive[j];
 }

You can pass event parameter on click and in that you will get element and than you can add class into it.

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" (click)="addStyle(e)">
</div>

// In TS file

addStyle(event)
{
  event.target.classList.add(className);
}

The best way is you convert the array of images to array of object of images and mark as active.

 ngOnInit(){
  this.img.forEach((img)=>{
  this.alter.push({src:img, isActive:false})
 })
}

 addAlterStyle(index){
   this.alter.forEach((img) => img.isActive = false);
   this.alter[index].isActive = true;
 }

HTML

<div class="item" *ngFor="let image of alter;let i = index">
    <img class="product-i-2" [ngClass]="{'isActive':image.isActive}" [src]="image.src" (click)="addAlterStyle(i)">
</div>

If you dont want to change the img array structure

TS

addStyle(event){
    let imageTags = document.querySelectorAll('.image');
    imageTags.forEach((element)=>{
      element.classList.remove('isActive')
    })
    event.target.classList.add('isActive')
  }

HTML

<div class="item" *ngFor="let image of img;let i = index">
    <img class="product-i-2 image" [src]="image" (click)="addStyle($event)">
</div>

Here is the stackblitz working demo

don't save isActive property save active Image and then you can check a condition by reference

activeImg:any;

addStyle($event){
this.activeImg=$event;
}

<div class="item" *ngFor="let i of img;let i = index">
    <img class="product-i-2" [src]="i" [class.active]="activeImg==i" (click)="addStyle()">