How to dynamicly add style to objects in *ngFor

Question

I have a list of members, and each one has a role, I want to color its name based on its role. In my HTML I run with *ngFor to create each one a div, but I didn't manage to color the div.

Answer 1

1. The easiest way to do this is to just use the role of the member as your css class. Your html would simply be this:

   <div *ngFor="let member of members" class="{{member.role}}">
     {{member.name}}
   </div>
   

If for example you have a member list like this:

members = [
 {name: 'jan', role: 'admin'},
 {name: 'kees', role: 'user'},
 {name: 'piet', role: 'admin'},
 {name: 'joop', role: 'user'},
 {name: 'klaas', role: 'superman'},
];

your css would be like this:

.admin {
    background-color: yellow;
}

.user {
    background-color: red;
}

.superman {
    background-color: blue;
}

2. Another way would be to use a function to determine the color for each role in your ts file:

   getColorClass(role: string) {
     let returnValue;
     switch (role) {
     case 'admin':
       returnValue = 'red';
       break;
     case 'user':
       returnValue = 'yellow';
       break;
     case 'superman':
       returnValue = 'blue';
       break;
     default:
       returnValue = 'white';
   }
   return returnValue;
   

   }

And use this function in your html like this:

<div *ngFor="let member of members" [style.background-color]="getColorClass(member.role)">
  {{member.name}}
</div>

3. The thirth way would be to use ngClass in combination with the function from option 2. The returnvalue from the function would be the name of your class. Your html would look like this:

   <div *ngFor="let member of members [ngClass]="getColorClass(member.role)">
   {{member.name}}
   </div>
   

   And your css if you use the exact same function in your ts file as in option 2:

   .yellow {
     background-color: yellow;
   }
   
   .red {
     background-color: red;
   }
   
   .blue {
     background-color: blue;
   }
   

Ofcourse these class names can be changed to anything you want. Hope this helps.

Answer 2

So I though of an answer without having to use a function to get your style in your HTML, while still not having predefined roles.

You could add a color property to your members, which would be based on the role of the member. Assuming you know the members and the colors before the component is made you could set this in ngOnInit() like this:

ngOnInit() {
    this.assignColorsToMembers();
  }

  assignColorsToMembers() {
    const uniqueRoles = this.getUniqueRoles();
    const rolesWithColors = this.assignColorsToRoles(uniqueRoles);
    this.members.forEach(member => {
      member.color = rolesWithColors[member.role];
    });
  }

  getUniqueRoles(): string[] {
    const allRoles = this.members.map(member => member.role);
    const uniqueRoles = Array.from(new Set(allRoles));
    return uniqueRoles;
  }

  assignColorsToRoles(roles: string[]): RolesWithColors {
    const rolesWithColors = {};
    roles.forEach((role, index) => {
      rolesWithColors[role] = this.colors[index];
    });
    return rolesWithColors;
  }

Interfaces:

interface RolesWithColors {
  [key: string]: string;
}

interface Member {
  name: string;
  role: string;
  color?: string;
}

In getUniqueRoles() you make an array that get's the roles from all your members and then removes the duplicates. in assignColorsToRoles() you create an object where the keys (properties) are the roles from the array you made in getUniqueRoles() and the values are the colors from your colors array.

This assumes you have an array with colors similar to this: colors = ['red', 'yellow', 'blue', 'green', 'purple']; and the length of your colors array is sufficient to give each role a different color.

In case your colors array is not long enough you could check for this in the function:

assignColorsToRoles(roles: string[]): RolesWithColors {
  const rolesWithColors = {};
  roles.forEach((role, index) => {
    if (this.colors.length < index + 1) {
      rolesWithColors[role] = 'white';
    }
    rolesWithColors[role] = this.colors[index];
  });
  return rolesWithColors;
}

Ofcourse you can substitute white for any other colors you want.

If you already have your colors coupled to certain roles this will be a lot simpler. You can omit the first two steps of assignColorsToMembers, and alter the rest depending on how your roles and colors are saved (array or object).

Now that all members have a color assigned to them you can use this property in your html:

<div *ngFor="let member of members" [style.background-color]="member.color">
  {{member.name}}
</div>

Answer 3

Try this:

<div *ngFor="let member of members">
 <div [ngClass]="{'red': member.role === 'name of the role', 'blue': member.role === 'name of the role'}">
  {{member.name}}
 </div>
</div>