CODEWITHSUNDEEP
cssangular
Nakkarst
Nakkarst

Reputation: 47

Is there a way to change a background-image without live-reloading?

I'm actually trying to make an Angular pick&ban overlay for League of Legends tournaments, but I'm facing some fundamental issues and I'm not sure if it can even be done. My problem is : can I dynamically change a div background without reloading my component ?

In pick-ban-component.html :

<div class="blueTeam">
   <app-player-card *ngFor="let player of blueTeam" [bluePlayer]="player"></app-player-card>
</div>

In pick-ban-component.ts :

public blueTeam = [{
        name: 'playerOne',
        champion: 'Teemo',
        spells: ['Flash', 'Burn']
    },...
];

In player-card.html :

<div [ngClass]="bluePlayer ? 'bluePlayerCard bluePlayer.champion' : redPlayer ? 'redPlayerCard redPlayer.champion' : 'noSelection'"></div>

In player-card.css :

.Teemo {
    background-image: url('../../assets/champions/Teemo_0.jpg') !important;
    background-size: cover;
    background-position: top center;
}...

My player-card.css has every single champion registered the same way as Teemo is. So I would like to know if there is a way to avoid component reloading if I change the champion of playerOne to another one, but still provide a background change ?

Upvotes: 3

Views: 176

Answers (2)

mahalde
mahalde

Reputation: 709

In your case the simplest solution is to change this line: 

<div [ngClass]="bluePlayer ? 'bluePlayerCard bluePlayer.champion' : redPlayer ? 'redPlayerCard redPlayer.champion' : 'noSelection'"></div>

to this:

<div [ngClass]="bluePlayer ? 'bluePlayerCard ' + bluePlayer.champion : redPlayer ? 'redPlayerCard ' + redPlayer.champion : 'noSelection'"></div>

Upvotes: 1

SGalea
SGalea

Reputation: 722

You can use ngStyle

<div class='Teemo' [ngStyle]="{'background-image': 'url(' + myBackground + ')' }"></div>

Upvotes: 1

Related Questions