How to give condition in image tag using angular 6?

Question

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?

First of all, make your decision how you want to display the image. Either by img src or setting the background image by css ? — Sunil
– Sunil, Commented Nov 11, 2018 at 18:26

Manzer A · Accepted Answer · 2018-11-13 05:57:39Z

2

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

edited Nov 13, 2018 at 5:57

answered Nov 11, 2018 at 16:10

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Manzer A Over a year ago

Instead of <ng-container>. You should use <div>

sai Over a year ago

Thanks for your reply. I tried the same. But Im not able to get the image.

Manzer A Over a year ago

Is this.imgDefault is getting changed onclick?

sai Over a year ago

Yes, It needs to be changed on onclick of the button

Manzer A Over a year ago

Inspect the div and check whether image is getting loaded on network tab

|

Rahul · Accepted Answer · 2018-11-11 18:42:27Z

0

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 !!

edited Nov 11, 2018 at 18:42

answered Nov 11, 2018 at 18:37

Rahul

2,1382 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to give condition in image tag using angular 6?

2 Answers 2

ts

.html

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

ts

.html

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related