# Add a class to a selected element within a component

**URL:** <https://discuss.emberjs.com/t/add-a-class-to-a-selected-element-within-a-component/8975>\
**Category:** Uncategorized\
**Created:** [October 18, 2015, 10:32pm UTC](https://discuss.emberjs.com/t/add-a-class-to-a-selected-element-within-a-component/8975 "2015-10-18T22:32:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hummingbird](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)\
**Post date:** [October 18, 2015, 10:32pm UTC](https://discuss.emberjs.com/t/add-a-class-to-a-selected-element-within-a-component/8975/1 "2015-10-18T22:32:20Z")

</div>

I want to display a modal dialog in my application, which allows the user to manipulate elements of a model. I do not want to use a route for this, as I don’t want to reflect the state if the modal is being displayed within the url.

for instance, if I had a user model, which contains an array of colours:

```
{
  'name': 'john',
  'colors': [{name: 'red', count: 1}, {name: 'blue', count: 2}]
}

```

In the modal I would like to render the list of colours. Each color within a span. I would like to make the color clickable, and when a color is select I would like to show the details below this list. I am having trouble finding a way to add a class to the span that has been selected.

```
    {{#each colours as |colour|}}
        <span class="{{if <<How do I find out if this colour is the selected?>> 'selected'}}" {{action "selectColour" colour}}>
            {{colour.name}}
       </span>
   {{/each}}

```

So, it would be easy to set the selected Colour within the component. However, I can’t find a way to add a class to the one selected span. I can’t use a computed property to do so, as I can not pass the currently evaluated instance within the each loop to that function. How would one solve something like this in Ember?

---

<div class="post-metadata">

**Author:** ![maxn](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@maxn](https://discuss.emberjs.com/u/maxn)\
**Post date:** [October 19, 2015, 6:57am UTC](https://discuss.emberjs.com/t/add-a-class-to-a-selected-element-within-a-component/8975/2 "2015-10-19T06:57:47Z")

</div>

Hi

I see two possible solutions here:

1. Copy your whole colours array in an computed property and track the selected state there. (Basically adding a is-selected field to each colour object.
2. Use a small if helper and check against the selected colour in an sub expression. [Ember Twiddle](http://ember-twiddle.com/c091b9d6aed5e0822746?numColumns=1)

Cheers

---

<div class="post-metadata">

**Author:** ![Hummingbird](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@Hummingbird](https://discuss.emberjs.com/u/Hummingbird)\
**Post date:** [October 19, 2015, 9:52am UTC](https://discuss.emberjs.com/t/add-a-class-to-a-selected-element-within-a-component/8975/3 "2015-10-19T09:52:23Z")

</div>

Thanks a lot. I didn’t want to add a selected property to the array as it always is kind of cumbersome to clean that up. However your second suggestion looks great to me.