javascript - Angular2 [ngClass] - Combining direct binding with conditional classes - Stack Overflow

admin管理员组

文章数量:1389652

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

Share Improve this question Follow asked Feb 12, 2017 at 18:28 Chris BrownChris Brown 4,65533 gold badges3131 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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>

本文标签： javascriptAngular2 ngClassCombining direct binding with conditional classesStack Overflow