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:

```html
<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:

```js
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:

[![enter image description here](https://i.stack.imgur.com/pJZKK.png)](https://i.stack.imgur.com/pJZKK.png)

I also tried the following:

```html
[ngClass]="getType(item.type), item.name === selectedPokemon ? 'select' : ''">

```

[![enter image description here](https://i.stack.imgur.com/5b6uX.png)](https://i.stack.imgur.com/5b6uX.png)

Thanks a lot for helping!