How do I make dynamic classNames in an ember 2.0 component?

Question

For example: Ember components allow you to add a classNames array and those classes will be added to the main div of the component. say we have this component called new-div

export default Ember.Component.extend({
    classNames: ['container']
});

then if you inspect this component when rendered you will see:

<div id="ember595" class="ember-view container">
...
<div>

this is fine but my issue is what if i want to use this component as a fluid container sometimes and sometimes I might want to make it a jumbotron etc.

Is there a way to do this in the html and have the component.js apply it correctly?

{{new-div extra-classes='class1,class2'}}

then in the component.js:

export default Ember.Component.extend({
    classNames: [this.get('class-names')]
});

Have a look at [classNameBindings](http://emberjs.com/api/classes/Ember.Component.html#property_classNameBindings) — Patsy Issa, Jan 26 '16 at 17:52

score 14 · Answer 1 · edited May 23 '17 at 10:31

14

The @dmk'solution is the cleanest one, but if your scenario it is not working you can use classNameBindings:

export default Ember.Component.extend({
  classNameBindings: ['getClassNames'],
  getClassNames: Ember.computed('extra-classes', function(){
    return this.get('extra-classes').replace(',', ' ');
  })
})

edited May 23 '17 at 10:31

Community

1
1

answered Mar 07 '16 at 13:07

fguillen

36,125
23
149
210

This one is great when you want the component to control its own class names. – Skitterm Nov 08 '17 at 00:52
this could just be `classNameBindings: ['myClassNames'],` where `myClassNames` is an attribute declared on the template. no computed property necessary (of course in your example it is because OP has a comma-delimited list). – Jason Nov 28 '17 at 21:46

score 13 · Accepted Answer · answered Jan 26 '16 at 17:52

13

You can add class names simply by specifying them inside the class attribute on your component:

{{new-div class="class1 class2"}}

answered Jan 26 '16 at 17:52

dimusic

4,123
2
28
31

isn't the attribute `classNames` or was this changed recently? – akst Jan 28 '16 at 06:29
1

@ABot I think `class` works since they moved to htmlbars and it's a better option, but `classNames` still works too. – dimusic Jan 28 '16 at 08:39

score 1 · Answer 3 · answered May 07 '19 at 06:25

If you're not adding too many classes, it's easy enough with class name bindings:

export default Ember.Component.extend({
  classNameBindings: [
    'foo:bar',
    'foo:baz',
  ],
});

And set the value of foo:

{{new-div foo=true}}

This will toggle on all the above class names.

See: https://api.emberjs.com/ember/release/classes/Component/properties/classNameBindings?anchor=classNameBindings

Of course, you could get tricky with computed properties and mapping an array. Also: I like to avoid assigning dynamic class names to components explicitly. Things become messy rather quickly.

score 0 · Answer 4 · answered Jan 28 '16 at 13:49

Just as an alternative one could use something like this

export default Ember.Component.extend({
attributeBindings:  ['style'],

    style: function(){
        return new Ember.Handlebars.SafeString('class="foo bar"');
    }.property(),
});

// NOT sure on this one untested
export default Ember.Component.extend({
attributeBindings:  ['classNames'],

    classNames: function(){
        return 'foo bar';
    }.property(),
});

score 0 · Answer 5 · answered Feb 01 '17 at 06:10

If someone is using ember-component-css, you may want to try out the join-classes or the local-class attribute helper.

{{join-classes styles.myclass1 attributeValue}}

attributeValue can be a value from the component's controller (I mean component.js), or an item inside an each block.

If styles.myclass1 = .class1, and attributeValue = .dummy, then the selectors would be available as .class1.dummy in the styles.css.

local-class={{(concat "myclass-" myvalue)}}

If myvalue = 'part', then with this, the generated classname would include tree-to-component_myclass-part__sdfje2jbr2 (last part is generated id), and would be accessible in the stylesheet as .myclass-part.

How do I make dynamic classNames in an ember 2.0 component?

5 Answers5