Ember component event not tirggered

Question

I have a sidenav component with a toggle button to open or close it.

/templates/components/side-nav.hbs

<div class="sidebar">
  <span role="button" class="toggle-menu svg-icons" {{ action 'toggle' on='click' }}></span>
</div>

components/side-nav.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        toggle: function(){
            console.log('click');
        }
    }
});

/templates/application.hbs

<div class="wrapper">
    {{side-nav}}
    {{outlet}}
</div>

The event is not fired no matter what. I know this is basic stuff, but I've spent hours not being able to make it work.

Answer 1

You don't need to use on=click . Try just:

<span role="button" class="toggle-menu svg-icons" {{action 'toggle'}}></span>