CODEWITHSUNDEEP
angularhtmltypescript
Hino_Bit
Hino_Bit

Reputation: 23

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

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!

Upvotes: 0

Views: 10793

Answers (1)

Nguyen Phong Thien
Nguyen Phong Thien

Reputation: 3387

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

Upvotes: 4

Related Questions