Old Guides - You are viewing the guides for Ember v1.13.0. VIEW v3.28.0

Binding Element Class Names

An HTML element's class attribute can be bound like any other attribute:

<div class={{priority}}>
  Warning!
</div>

If the component's priority property is "p4", this template will emit the following HTML:

<div class="p4">
  Warning!
</div>

Conditional Values

If you want a class value based on a conditional property, use the Handlebars if helper:

<div class={{if isUrgent 'is-urgent'}}>
  Warning!
</div>

If isUrgent is true, this emits the following HTML:

<div class="is-urgent">
  Warning!
</div>

If isUrgent is false, no class name is added:

<div>
  Warning!
</div>

You can also specify a class name to add when the property is false:

<div class={{if isEnabled 'enabled' 'disabled'}}>
  Warning!
</div>

In this case, if the isEnabled property is true, the enabled class will be added. If the property is false, the class disabled will be added.