How to add click event to `tagName` in ember component?

Question

I would like to add the click event to components tagname what is the correct way to do it?

here is my code : please see the comment for more details

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'li', //onclick how to call 'selectedCard'?
    firstBalanceType : '',
    firstBalanceAmount : '',
    lastBalanceType : '',
    lastBalanceAmount : '',
    actions : {
        selectCard : function(card) { //requrie to pass the card here
            //console.log('card selected' + card);
            this.sendAction('enableNext', card);
        }
    }
});

Thanks in advance

Answer 1

click is a valid event name that ember components listen for so

import Ember from 'ember';

export default Ember.Component.extend({
  click(event) {
    this.send('selectCard', this.get('card'));
  }
});

if you're looking for selectCard to be called on click of a certain element within your component's template file then you would have an action tied to it

<li {{action 'selectCard' card}}>{{card.name}}</li>

More information here: https://www.emberjs.com/api/ember/2.14/classes/Ember.Component/