Currently, I am developing an Angular pick-ban overlay for organizing League of Legends tournaments. However, I have stumbled upon some fundamental challenges and am unsure if the task is achievable. My main issue is: Can I dynamically alter the background of a div without requiring a component reload?
Within the pick-ban-component.html file:
<div class="blueTeam">
<app-player-card *ngFor="let player of blueTeam" [bluePlayer]="player"></app-player-card>
</div>
Inside the pick-ban-component.ts file:
public blueTeam = [{
name: 'playerOne',
champion: 'Teemo',
spells: ['Flash', 'Burn']
},...
];
Within the player-card.html file:
<div [ngClass]="bluePlayer ? 'bluePlayerCard bluePlayer.champion' : redPlayer ? 'redPlayerCard redPlayer.champion' : 'noSelection'"></div>
In the player-card.css file:
.Teemo {
background-image: url('../../assets/champions/Teemo_0.jpg') !important;
background-size: cover;
background-position: top center;
}...
Each champion is registered in my player-card.css file in the same manner as Teemo. Is there a way to avoid reloading the component when changing playerOne's champion to another one, while still achieving a background change?