I'm currently trying to show a list of Pokemons that have a different background color depending on their type. I would like to implement a feature where the border of the selected pokemon also shows with a gold border color. If I use them one at a time they work just fine but i'm having trouble using them together.
My html is the following:
<h1>Pokédex</h1>
<p [hidden]="!selectedPokemon">Geselecteerde pokemon: {{selectedPokemon}}</p>
<div class="wrapper">
<app-pokemon (selectedPokemon)="highlightPokemon($event)"
*ngFor="let item of pokemons"
[pokemon]="item"
[ngClass]="{getType(item.type), item.name === selectedPokemon ? 'select' : ''}">
</app-pokemon>
</div>
My getType function is the following:
getType(pokemonType: string): string {
pokemonType = pokemonType.toLowerCase();
switch(pokemonType) {
case 'grass': {
return 'grass'
}
case 'fire': {
return 'fire'
}
case 'water': {
return 'water'
}
default: {
return 'grass'
}
}
}
The error my IDE is complaining about:
I also tried the following:
[ngClass]="getType(item.type), item.name === selectedPokemon ? 'select' : ''">
Thanks a lot for helping!
CodePudding user response:
You can using [className]="getType(item.type)" and [class.select]="item.name === selectedPokemon"
CodePudding user response:
<h1>Pokédex</h1>
<p [hidden]="!selectedPokemon">Geselecteerde pokemon: {{selectedPokemon}}</p>
<div >
<app-pokemon (selectedPokemon)="highlightPokemon($event)"
*ngFor="let item of pokemons"
[pokemon]="item"
[ngClass]="item.name === selectedPokemon ?
'select' : ''">
</app-pokemon>
</div>
this is working code, what i did is selected class will come from ngclass while background class will come through getType function
CodePudding user response:
using functions in html templates is a bad practice, try to dont use them. but you can use like this for add multiple class conditionally by ngClass in angular
<div [ngClass]="[yourFunction(value), value === 2 && 'your-class']">123</div>
CodePudding user response:
Try this changes:
// HTML
[ngClass]="getExpression(item, selectedPokemon)"
// TS:
getExpression(item, selectedPokemon) {
selectedPokemon = selectedPokemon?.toLowerCase();
const pokemonName = item.name.toLowerCase();
const pokemonType = item.type.toLowerCase();
switch (pokemonType) {
case 'grass': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
case 'fire': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
case 'water': {
return `'${pokemonType}': ${pokemonName} === selectedPokemon`;
}
default: {
return `'grass': ${pokemonName} === selectedPokemon`;
}
}
}