Angular 2 how do I use a variable for the value of ngClass

Question

I want to use a variable for the value of ngClass that will be added to the class list. My use case is that I have a collection of image sprites, there is the base sprite and then an active state which has the same filename as the base sprite only with -active added to the end. I add the sprites to the document by giving an element a class matching the desired sprites file name. I need to toggle back and forth between the two sprites when a user hovers over the element. How do I do that?

For example something like this (NOTE: tool.name === the file name of the sprite to display):

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'>
  <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span>
</li>

Delaware

do you need something like toggle isActive between true/false dynamically? – Terrorism

No, each tool.name matches the filename of a sprite, in addition each sprite has a second file with the same name but -active added. I need to toggle between the two sprites on hover. – Delaware

Answer 1

In stead of having class .tool-name-active You can have your class as .tool-name.active Then you can do the following

<li *ngFor='let tool of tools'>
  <span class="{{tool.name}}" [ngClass]='{active: isActive}'>{{tool.name}}</span>
</li>

Manciple

.<tool-name>-active is a sprite name so I need the whole string. For example it ends up being .color-btn if isActive is false and .color-btn-active if isActive is true. .color-btn.active would just load the sprite named color-btn. – Delaware

I meant you could change your css class name from .color-btn-active to .color-btn.active if it's possible. – Manciple

It's not, as I said I need the class to be .color-btn-active so that it matches color-btn-active.png I also need .color-btn so that it matched color-btn.png. If I don't have these classes matching the file names then the sprites don't load. – Delaware

But as the way you said, try the solution form The FORCE JB, it might works for you but not recommended. Other ways are: 1. Renames your stripe to color-btn.active.png 2. If you use css to load the stripe, post your css help and we can help to adjust it. – Manciple

Nice answer; you could though easily rewrite: class="{{tool.name}}" to [class]="tool.name". – Carlottacarlovingian

Answer 2

Maybe using a function to return the ngClass array will helps.

<li *ngFor='let tool of tools'><span [ngClass]='chkClass(tool)'>{{tool.name}}</span></li>


public chkClass(item:any){
    let newClass = {};
     newClass[item.name+ '-active'] = true;
     newClass[item.name] = false;
     return newClass;
}

Garrity

Note: function calls in template are bad for performance and against Angular best practice. I would strongly discourage this solution since there are more proper solutions out there to solve this simple use case. – Carlottacarlovingian

Answer 3

Another option to get .tool-name-active | .tool-name in one attribute would be:

<li *ngFor='let tool of tools'>
  <span [class]="tool.name + (tool.isActive ? '-active' : '')">{{tool.name}}</span>
</li>

Or to get the following .tool-name.active | .tool-name you could also do:

<li *ngFor='let tool of tools'>
  <span [class]="tool.name" [class.active]="tool.isActive">{{tool.name}}</span>
</li>

See for more information on Angular class binding the official docs here.

Carlottacarlovingian