CODEWITHSUNDEEP
ember.jshandlebars.js
Mike Hearn
Mike Hearn

Reputation: 2358

What is the difference between class="example" vs. classNames="example" in Ember/handlebars components?

I'm applying a class to a component, and it seems like both of these options work:

  1. {{example-component class="example-class"}}

  2. {{example-component classNames="example-class"}}

Both ultimately result in the rendered HTML having the class, e.g.:

<div class="example-class ember-view">...</div>

Is there a difference between providing the class via class or classNames? Are there any unintended consequences using one over the other?

Upvotes: 3

Views: 311

Answers (1)

wuarmin
wuarmin

Reputation: 4015

There's no important difference, except that class should be a string and classNames should be an array of strings.

If you pass a class at invocation time at .hbs, I recommend using class property as in your first example, because it is the same way you would specify a class for a regular HTML element.

Property classNames can be used at .js file. I.e. I often use a pattern like that:

// my-small-button.js
import Component from '@ember/component';

export default Component.extend({
  classNames: ['my-button', 'small']
});

Invocation of component:

{{my-small-button class="red"}}

Result-html:

<div class="my-button small red">
</div

Upvotes: 3

Related Questions