send component action to controller emberjs

Question

I'm trying to send an action within a component to a controller. I have a user.hbs that contains the component:

{{#liquid-if showQuickLaunch}}
    {{quick-launch}}
{{/liquid-if}}  
<div id="userAppWrapper">
    {{user-nav}}
</div>

Now the component that holds the action is the user-nav component which is right here:

<header class="user-main-nav">
    <nav class="user-nav">
        <ul class="list-user-nav">
            <li class="nav-brand">
                <p>Handmade Digital</p>
            </li>
        </ul>
        <ul class="list-right-user-nav right">
            <li>
                <p {{action 'showQuickLaunch'}}><i class="fa fa-plus"></i></p>
            </li>
            <li>
                <p>Rodzzlessa <i class="fa fa-angle-down"></i></p>
            </li>
        </ul>
    </nav>
</header>

as you can see it has the action showQuickLaunch now I want to send that action to the user controller because if you notice on user.hbs the first block is an if statement to show the quicklaunch or not. The property showQuickLaunch pertains to the user controller not the nav-component how can I send that action to the user controller ?

Answer 1

Inside user-nav component you need handle the action showQuickLaunch something like:

// user-nav.js
Ember.Component.extend({
   actions: {
     showQuickLaunch() {
       this.sendAction();
     }
   }
});

Official Doc explains pretty well and here I have published a dummy example.

Hope help you!