# Sending action to child component in a component block Ember 1.13

**URL:** <https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824>\
**Category:** Learning Team\
**Created:** [October 26, 2016, 3:36am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824 "2016-10-26T03:36:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fasih](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/fasih/32/12658_2.png) [@fasih](https://discuss.emberjs.com/u/fasih)\
**Post date:** [October 26, 2016, 3:36am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824/1 "2016-10-26T03:36:10Z")

</div>

On Ember 1.13, I’m converting Views into Components. I have a form component thats template looks like the following:

`InputFormComponent`:

```auto
<form {{action "submit" on="submit"}}>
    {{yield this}}
    <input type="submit">
</form>

```

I use it for edit and new components. They look like:

```auto
{{#input-form model=model as |f|}}
    {{post-edit model=model}}
{{/input-form}}

```

Now in my `PostEdit` component, I want to override the `submit` action, but that action is not propagating to the child component. It will always go to the submit action in the `InputFormComponent`.

Is there any way to somehow pass the event down via the template? The `InputFormComponent` is used in multiple places, but only in a few places do I have to override the `submit` action.

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [October 26, 2016, 4:07am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824/2 "2016-10-26T04:07:02Z")

</div>

This may be a bigger change. The problem is that the `{{input-form}}` component shouldn’t be handling the action without re-emitting it. When the component re-emits the action, it’ll get bubbled through the routes and get handled along the way. Your controller can choose to intercept the action and “override” the behavior.

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 26, 2016, 4:20am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824/3 "2016-10-26T04:20:24Z")

</div>

Take a look at:

> [@Creating/Using EmberJS component](http://discuss.emberjs.com/t/creating-using-emberjs-component/8816/11):
>
> So let me try to explain the deleteAction and the authors on the controller. We are in the middle of switching to routable components. Therefore we still need to pass data like authors from the route to a controller. You do this with setupController. The default for Ember is content. If you need more models like authors you can use Ember.RSVP.hash to get them and wait for all promises to resolve. See: Now we can move authors to the post controller. [https://github.com/broerse/ember-cli-blog/b…](https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/post.js)

---

<div class="post-metadata">

**Author:** ![fasih](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/fasih/32/12658_2.png) [@fasih](https://discuss.emberjs.com/u/fasih)\
**Post date:** [October 26, 2016, 4:34am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824/4 "2016-10-26T04:34:53Z")

</div>

So the problem here is that for some reason my controllers aren’t getting linked with components. I followed broerse’s advice from another question ( [Loading Components when routing Ember 1.13](http://discuss.emberjs.com/t/loading-components-when-routing-ember-1-13/11808) ) about using the view templates to call components which works really well. However, now any actions that a component’s layout uses don’t make it to the controller anyways. So I have to define actions within the component.

I guess I’ll have to dig around and maybe change the approach I have.

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 26, 2016, 11:10am UTC](https://discuss.emberjs.com/t/sending-action-to-child-component-in-a-component-block-ember-1-13/11824/5 "2016-10-26T11:10:27Z")

</div>

Yes you have to bubble yourself in components like this.

> <https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post.js>

Or switch to [closure-actions](http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_closure-actions)