0

In Angular, each of these elements is going to have different background images. I just need to use the "background" value coming out of JSON as the source of the background image, for each of these .cards. I also need other CSS styles (styles, not class names) from JSON, including background-position, etc.

For instance, this is the JSON:

{
  "title": "Card Number One",
  "background": "https://www. fakeURL .com/img-one.jpg",
  "background-size": "270%";
  "background-position": "-68px -6px";
}

Maybe I can dynamically add these classes with attr binding or something? I have access to the JSON so I can change anything I need to.

The JSON above would be converted into CSS styles as if it were in CSS like this:

.card {
  background: url(https://www. fakeURL .com/img-one.jpg);
  background-size: 270%;
  background-position: -68px -6px;
}

The HTML is basic and can be whatever is needed, but right now it's a Card component within an *ngFor:

<div class="card-slot" *ngFor="let cardId of cards">
  <app-card [card]="getCard(cardId)"></app-card>
</div>

Thanks! :)

SpaceNinja
  • 496
  • 7
  • 20
  • 1
    what is this getCard(cardId)? use getClass attribute to the card element – Gopal Nov 26 '22 at 03:40
  • 1
    Already answered here: https://stackoverflow.com/questions/32326498/how-to-set-angular-json-model-into-css – akseli Nov 26 '22 at 03:44
  • @Gopal - getCard() is a method that takes in the ID and fetches/gathers the rest of the card data. This way `cards` is just an array of numbers yet the whole card data object gets passed into `[card]` this way. Pretty handy once I learned it. – SpaceNinja Nov 26 '22 at 04:55

0 Answers0