How to use a function and expression in a ngClass using Angular?

Question

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!

I'm not a big fan of calling function : getType(item.type) inside HTML template , you can follow this example maybe it helps : codegrepper.com/code-examples/typescript/ng-class+switch+case — Rebai Ahmed, Nov 01 '21 at 09:04
@RebaiAhmed What would be the better way of doing it? Do you have an example of how it should be done? — Jens Panis, Nov 01 '21 at 12:17
I added this link in my previous comment : https://www.codegrepper.com/code-examples/typescript/ng-class+switch+case you can check it ,it helps — Rebai Ahmed, Nov 01 '21 at 13:11

score 0 · Accepted Answer · answered Nov 01 '21 at 08:53

0

You can using [className]="getType(item.type)" and [class.select]="item.name === selectedPokemon"

answered Nov 01 '21 at 08:53

Đỗ văn Thắng

185
6

score 0 · Answer 2 · answered Nov 01 '21 at 10:15

<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"
class="{{getType(item.type)}}"
           [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

AmiReza · Answer 3 · 2021-11-01T10:55:55.310

0

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>

edited Nov 01 '21 at 10:55

answered Nov 01 '21 at 10:41

AmiReza

39
1
7

What would be the better way of doing it? Do you have an example of how it should be done? – Jens Panis Nov 01 '21 at 12:19
1

there is a good article for this subject on medium : https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496#:~:text=Because%20expression%20are%20so%20powerful,our%20views%20become%20more%20complex.&text=While%20function%20calls%20in%20Angular,may%20cause%20serious%20performance%20issues. – AmiReza Nov 02 '21 at 08:00

How to use a function and expression in a ngClass using Angular?

3 Answers3