Odtnhj

My webpage contains,

 <ng-container *ngFor="let horizontal of categories">
 <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
 <button [ngClass]="'selected-color' : i==selectedIndex " 
 [ngStyle]="'padding-top':horizontal.items[i].title==='Business'?'2.56%':(horizontal.items[i].title==='Plat' ? '2.56%':null)"type="submit" class="btn1" [id]="horizontal.items[i].title"
 (click)="changeImage(id);">
 <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
 horizontal.items[i].title 
 </button>
 </ng-container>

My ts file:

 changeImage(option)
if(option == "Trans")


 this.imgDefault = 'imgChange';
 console.log("this.imgDefault :",this.imgDefault);

 else if(option == "Col")

 this.imgDefault = 'imgChange1';
 console.log("this.imgDefault :",this.imgDefault1);

else if(option == "Business")
 this.imgDefault = 'imgChange2';
 console.log("this.imgDefault :",this.imgDefault2);

So in my css I have kept the images which needs to be changed onclick of the button.

.imgChange
background-image: url('../assets/Trans_2.png');
color:blue;
 
.imgChange1
background-image: url('../assets/Trans_3.png');
color:blue;
 
 .imgChange2
background-image: url('../assets/Trans_4.png');
color:blue;
 

How can I give condition in img tag, so that onclick of a button to change the image?

You should add image in a div as below:-

ts

 imgDefault = 'imgChange'; <-- default;

changeImage(option)
if(option == "Trans")


 this.imgDefault = 'imgChange';
 console.log("this.imgDefault :",this.imgDefault);

 else if(option == "Col")

 this.imgDefault = 'imgChange1';
 console.log("this.imgDefault :",this.imgDefault1);

else if(option == "Business Process Re-engineering")
 this.imgDefault = 'imgChange2';
 console.log("this.imgDefault :",this.imgDefault2);

.html

 <ng-container *ngFor="let horizontal of categories">
 <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
 <button [ngClass]="'selected-color' : i==selectedIndex " 
 [ngStyle]="'padding-top':horizontal.items[i].title==='Business'?'2.56%':(horizontal.items[i].title==='Plat' ? '2.56%':null)"type="submit" class="btn1" [id]="horizontal.items[i].title"click)="changeImage(id);">

 horizontal.items[i].title 
 </button>
 </ng-container> 
</ng-container> 

<div [ngClass]="imgDefault"></div>

Link:- https://stackblitz.com/edit/angular6-sqemmd?file=app/app.component.html

You can directly add class names based on the conditions - you are trying to add images from css replace the img tag as div which will render background image based on the class applied

Make sure if you want your images in the loop, if not move your div outside *ngFor

<div [class.imgChange]="imgDefault === 'imgChange'" 
 [class.imgChange1]="imgDefault === 'imgChange1'"
 [class.imgChange2]="imgDefault === 'imgChange2'" ></div>

This will add all your classes based on the condition and the div will render the img - Hope this works Happy coding !!