-1

So I am trying to build a small web application with Angular and Firebase, where said application should display a list of players. This list of players I render like this:

<ul class="team">
    <li *ngFor="let player of players">
      <span class="icon icon-*xyz*"></span> {{ player.name }}
    </li>
</ul>

What I want: Depending on the player id I want to style the span differently. Hence I would like the class "icon-xyz" to be icon-123, where 123 equals player.id.

Why I want this: I have a big picture with portraits of each player and with setting this class I exactly "cut" out the necessary portrait.

What I tried / question: I went through the Angular docs and Google in search of a functionality of Angular, which would help me here - without success. I found out that React provides a functionality, where components have a "probs" functionality which can access object properties to change styling. I have not found something similar for Angular and now my question is if there is some good solution for my problem or if I should change my approach totally.

velko93
  • 5
  • 2
  • 1
    Does this answer your question? [Angular: conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) – Ruben Helsloot Nov 16 '20 at 22:27
  • I don't recommend you to do this https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass, since in your case this will make your code grow with every player you add to the list. – Eliezer Veras Vargas Nov 16 '20 at 22:36
  • @RubenHelsloot Conditional classing is not applicable for my use case, as I have a couple of hundred players. – velko93 Nov 17 '20 at 08:24
  • I meant using the `[class]="myVariable"` syntax used at the end of [this answer](https://stackoverflow.com/a/35269213/5015356) – Ruben Helsloot Nov 17 '20 at 08:31

2 Answers2

0

Welcome to Stackoverflow, I think you could add the class name as a property of the player object, setting the needed class name in every player. Then you can use this

<span class="icon {{player.icon}}"></span> {{ player.name }}

Here's an example of how this works https://stackblitz.com/edit/angular-ivy-buv8dr

Eliezer Veras Vargas
  • 204
  • 1
  • 9
0

Assuming you have an object to base properties off of, you have multiple options.

Stack

Example:

<div *ngFor="let user of users">
  <span ngClass="{{user.role}}">
    <img src="{{user.icon}}" height="50px" />
    <div >{{user.name}}</div>
  </span>   
</div>

You could use ngClass to add / remove classes. Any property or expression can work here as required.

You could also use property binding to append the DOM as the data dictates. For this example: we have a name, a role (color of the underline), and a picture (random hosted images on Google).

enter image description here

Austin T French
  • 5,022
  • 1
  • 22
  • 40
  • The provided solution by @Eliezer Veras Vargas does the trick for me, but your approach is also totally working. Just a follow-up question: What is the benefit of using 'ngClass' instead the normal css 'class'? – velko93 Nov 17 '20 at 08:33
  • @velko93 FYI, you can upvote AND accept as answers are helpful. But to the follow up question: using class is just binding a value to the element. ngClass is an Angular directive which allows some cooler things, like an expression : [ngClass]="{'extra-sparkle': isDelightful}" or even conditional ternary operators. ngClass is much more flexible, so as a better practice I'd generally use it to minimize changes later if the requirements change what possible classes would be required changes. – Austin T French Nov 17 '20 at 13:10