# Right approach to trigger action on entire component template

**URL:** <https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953>\
**Category:** Design\
**Created:** [May 7, 2015, 5:04pm UTC](https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953 "2015-05-07T17:04:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tremendusapps](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tremendusapps/32/10372_2.png) [@tremendusapps](https://discuss.emberjs.com/u/tremendusapps)\
**Post date:** [May 7, 2015, 5:04pm UTC](https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953/1 "2015-05-07T17:04:35Z")

</div>

Is there a way to attach the `{{action}}` of a component to the entire component template? ie the wrapper element that ember will put the component into? I don’t see such a way in the docs.

Use case:

I’m using Semantic UI as a front end UI library in an ember app. I have a collection, which I have created as a component. Each item in the collection is a separate sub-component. But here is where I hit a problem.

To retain cascading styles, the entire component must be a direct descendent of the parent. ie: `.parent.collection > .child.item { .... }`

I realize I can set tagName and classNames to make it the child styled, but how can I also make the entire component clickable? I don’t want to I nest the {{action}} into a wrapper in the template because the extra level of nested element affects the styling due to the s structure above and I don’t wish to re-write the classes.

?

---

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [May 7, 2015, 5:45pm UTC](https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953/2 "2015-05-07T17:45:58Z")

</div>

```auto
{{my-component action='foo'}}

```

```auto
click() {
  this.sendAction();
}

```

---

<div class="post-metadata">

**Author:** ![tremendusapps](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tremendusapps/32/10372_2.png) [@tremendusapps](https://discuss.emberjs.com/u/tremendusapps)\
**Post date:** [May 8, 2015, 10:47pm UTC](https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953/3 "2015-05-08T22:47:39Z")

</div>

Thank you sir.

I’m not sure why I didn’t find this in the docs:

> **[Component - 4.6 - Ember API Documentation](https://api.emberjs.com/ember/release/classes/Component)**
>
> A component is a reusable UI element that consists of a .hbs template and an optional JavaScript class that defines its behavior. For example, someone might make a button in the template and handle the click behavior in the JavaScript file that...

Component doesn’t list this method, it extends View, which doesn’t list this method, which extends CoreView, which also doesn’t list this method … etc down the chain.

Do you happen to know if there are docs for this? - can all the actionable methods available to template be listed in the component as non-actionable (‘core’) methods?

---

<div class="post-metadata">

**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\
**Post date:** [May 9, 2015, 12:00pm UTC](https://discuss.emberjs.com/t/right-approach-to-trigger-action-on-entire-component-template/7953/4 "2015-05-09T12:00:22Z")

</div>

Found it: [Sending Actions from Components to Your Application - Components - Ember Guides](http://guides.emberjs.com/v1.11.0/components/sending-actions-from-components-to-your-application/#toc_sending-a-primary-action)