Angular change image based on dynamical value

Question

Here is my below code

I am doing only if then else condition i want to do if else if if condition based on three value i want to change the image

<img [src]="status.getRequestStatus() == 'granted' ? 'assets/imgs/trafficlight_green.png':'assets/imgs/trafficlight_red.png' " class="image--background" >

this is for if and else condition i want to add if else if if

like if(new){someimage}else if(new1){some image1} if(new2){some image2}

I think that if you use [(src)]="sourceProperty" changes based on that, and I would deffenitly move that logic to the component from the view, and on the status.getRequestStatus() you can set the property based on the result.. — rmjoia
– rmjoia, Commented Apr 16, 2019 at 12:17

Harun Or Rashid · Accepted Answer · 2019-04-16 12:33:13Z

2

Move logic to component.

In your component.html

<img [src]="someFn()" class="image--background" >

In your component.ts

someFn() {
    let rtn = '';
    if(...) {
        rtn = ...
    } else if (...) {
       ...
    } else {
       ...
    }
    return rtn;
}

edited Apr 16, 2019 at 12:33

Harun Or Rashid

5,9572 gold badges21 silver badges23 bronze badges

answered Apr 16, 2019 at 12:21

Sunil Kashyap

2,9842 gold badges17 silver badges33 bronze badges

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

Comments

Harun Or Rashid · Accepted Answer · 2019-04-16 12:37:57Z

1

You can use multiple img tag on condition as below -

<img *ngIf="new" [src]="assets/imgs/trafficlight_green1.png" class="image--background">
<img *ngIf="new1" [src]="assets/imgs/trafficlight_green2.png" class="image--background">
<img *ngIf="new2" [src]="assets/imgs/trafficlight_green3.png" class="image--background">

Or use a variable to store image source in your component.ts and then bind it in component.html as below -

<img [src]="imageSource" class="image--background">

edited Apr 16, 2019 at 12:37

answered Apr 16, 2019 at 12:18

Harun Or Rashid

5,9572 gold badges21 silver badges23 bronze badges

Comments

dev-dan · Accepted Answer · 2019-04-16 12:45:20Z

1

You can keep the ternary statement in the template if you wanted to with the if else flow, as a ternary can be chained. It could look like so.

<img [src]="'new' ? 'green.png': new1 ? 'red.png' : 'amber.png'" class="image-background">

This would read like

if (new)
{ 'green.png' }

else if (new1)
{ 'red.png' }

else 
{ 'amber.png' } // being new2

Hope this is what you are looking for.

answered Apr 16, 2019 at 12:45

dev-dan

6,3333 gold badges27 silver badges46 bronze badges

Comments

rmjoia · Accepted Answer · 2019-04-16 12:30:26Z

try this solution based on my comment:

Check the example on StackBlitz

The validation is made on the component, on your getRequestStatus() I used ngOnInit with a timeout to change "dynamically"

the source is automatically updated based on the source property change.

view:

<img [(src)]="sourceImage" width="200" />

component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  sourceImage: string;

  ngOnInit() {
    this.sourceImage = 'https://angular.io/assets/images/logos/angular/angular.svg';

    setTimeout(()=> {
        this.sourceImage = 'https://dwglogo.com/wp-content/uploads/2017/03/AngularJS_logo_004.svg';
    }, 2000)
  }
}

Collectives™ on Stack Overflow

Angular change image based on dynamical value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related