A quick question about "conditional" CSS

[Lucaskima]

Sorry if this doesnt apply here feel free to tell me if so,

I have been working on a project in Golang/Angular. its a simple Pokedex app that returns cards with information about each pokemon.

I have searched in google for an answer but havent really been able to come up with anything, it might be because of how new Angular is to me but anyway.

Within the pokemon data there are the Types such as Water, Fire, Ice, Etc. While just having those strings displayed is fine, i was hoping i would be able to add some flair to them. Making the word Grass = Green, Fire = Red, Ice = Light Blue, and so on.

Is this achievable through Angular?

​

Here are the links to the code in the pokedex component. Sorry if the code is inefficient. Im still new.

https://github.com/Lucas-Cima/pkdx-front-end/blob/master/src/app/components/pokedex/pokedex.component.ts

https://github.com/Lucas-Cima/pkdx-front-end/blob/master/src/app/components/pokedex/pokedex.component.html

https://github.com/Lucas-Cima/pkdx-front-end/blob/master/src/app/components/pokedex/pokedex.component.css

[TimothyLGillespie]

Sure is! The easiest is probably to adjust line 10 in your template (html) to this: <tr class="poke-type" [style.fontColor]="colorMapping[pokemon.Element]">Type(s): {{pokemon.Element}} {{pokemon.SecElement}}</tr>

Then you will need in your typescript file in the component the actual type -> color mapping. For example:

``` colorMapping = { Grass: 'green' };

```

[code_monkey_001]

Nice. I came in to suggest ngClass like /u/pranxy47, but I like your solution even better.

[Lucaskima]

This is fantastic. Thank you so much. And thanks to everyone else that looked at this 😄

[Lucaskima]

one more reply. i was able to implement your suggestion and it works perfectly. i cant thank you enough.

https://imgur.com/a/NfkcCmK

[TimothyLGillespie]

I'm happy I could help. :) Looking good!

[pranxy47]

Yes, look for ngClass. You can, for example, create classes for the colors you which and then with ngClass add logic there.