I currently have two different working implementations of [ngClass] on an element;

[ngClass]="{ selected: element.isSelected, highlighted: element.isHighlighted}"

and

[ngClass]="element.customClasses"

Is it possible to bine both of these approaches in the template, or do I have to create a method in my ponent to return an array of classes based on the logic above?

Thanks!

I currently have two different working implementations of [ngClass] on an element;

[ngClass]="{ selected: element.isSelected, highlighted: element.isHighlighted}"

and

[ngClass]="element.customClasses"

Is it possible to bine both of these approaches in the template, or do I have to create a method in my ponent to return an array of classes based on the logic above?

Thanks!

• javascript
• angular
• ng-class

2 Answers 2

I opted for using [class.*] to set the conditional classes, leaving [ngClass] to handle the binding;

<div 
  [ngClass]="element.customClasses" 
  [class.selected]="element.isSelected"
  [class.highlighted]="element.isHighlighted"
></div>

You can directly set the customClasses to your template as

<span class="customClasses">something</span>

And also you can use [ngClass] which will append your classes based on the condition, so putting together

<span [ngClass]="{ selected: element.isSelected, 
                 highlighted: element.isHighlighted}" 
                 class="customClasses">something
</span>