Default Class Name (template attribute)

Learning Team
1

Does Ember have a way to define a default attribute if one isn’t defined?

Let’s say I have a component:

{{#myComponent
   componentClass="foo"

The template will have a spot for the class name of foo to be added:

<div class={{componentClass}}>

Is there any way to define a default class if one isn’t provided? So <div class={{componentClass or my-default-class}}>

2

Define it in the component:

// app/components/myComponent.js
import Ember from 'ember';

export default Ember.Component.extend({

  componentClass: 'my-awesome-default-class'

});
3

how about classNames or classNameBindings?

4

Use classNameBindings to set the value of the default class and have it bound to your rendered component element.

You can still override the value of the default class by assigning a new value to the property optionalClass via the template.

// my-classy-component.js
import Ember from 'ember';
export default Ember.Component.extend({
  classNameBindings: ['optionalClass'],
  optionalClass: 'vader-black',
});

// this will be rendered with class 'vader-black' on the div
{{my-classy-component}}

// this will be rendered with class 'threepio-gold' on the div
{{my-classy-component optionalClass='threepio-gold'}}
1 Like