How can I set an interpolated value, as a style property in Angular?

user_14457029 0
Viewed 25

Before creating this question, I've read all the question existing, and none of the answers has fixed my issue.

Well, I'm fetching a data from API, {{ album.image["3"]["#text"] }} - is the link to the .png file which I would like to set as background-image of the . Here is the example of my code:

 <div class="album-grid">
    <div *ngFor="let album of albums">
      <div class="album"> <--! I want here to set a backgroundImage for each album-->
        <h4>{{ album.name }},</h4>
        <h5>by {{ album.artist.name }}</h5>
        <p>{{ album.image["3"]["#text"] }}</p> <--! this is the link to .png file I'm getting from server -->
      </div>
    </div>
  </div>

here is the solutions I've tried, but none of them helped me:

[style.backgroundImage]="album.image['3']['#text']"

[style]="backgroundImage: {{album.image['3']['#text']}"

[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"

Link to my repo -> https://github.com/paslavskyi9roman/Spotilar

On a picture, you can see a grid of albums, with the album name, artist name, and link to album cover file which need to be a background image click here

angular css
1 Answers

You are missing the url() part.

Try the following (as seen in your repository)

<div class="album" [ngStyle]="{ 'backgroundImage': 'url('+ album.image['3']['#text'] + ')'}">
        <h4>{{ album.name }},</h4>
      </div>
      <h5>by {{ album.artist.name }}</h5>
    </div>
user_71775580
Related