How can i change the background-image from Typescript in Angular?

Question

i want to change the background-image from the Typescript file in Agular, i tried but don't work.

I change the style directly in my html file because i don't know how to do in the css.

This is the line in my html file:

<div style="background-image: url({{imageName}});"> </div>

and this is my Typescript file:

export class NAmeComponent implements OnInit {

  imageName: String;

ngOninit(){
this.getImage();
}

getImage(){
 switch (value) {
      case 'a': {
        this.imageName = 'Nebula.jpg';
        break;
      }
     case 'b': {
        this.imageName = 'Eclipse.jpeg';
        break;
      }
    }
}
}

How can i fix this? Thank all for the answer!

you can use something like <img [src]='yourVariableHere' /> — Sachin Gupta
– Sachin Gupta, Commented Mar 1, 2019 at 12:24

Nguyen Phong Thien · Accepted Answer · 2019-03-01 12:24:28Z

4

You can try [ngStyle]="{'background-image': 'url(' + imageName + ')'}"

answered Mar 1, 2019 at 12:24

Nguyen Phong Thien

3,3871 gold badge19 silver badges36 bronze badges

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

1 Comment

Hino_Bit Over a year ago

i fight with this problem from 2 days XD

Collectives™ on Stack Overflow

How can i change the background-image from Typescript in Angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related