How to pass a parent components function into a child and then call it from inside the child AngularJS

Question

Function on parent

markAchievement() {
    console.log("Achievement marked")
}

Binding on the parent's HTML

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

Child's bindings

export const markGoalButtonComponentDefinition = {
    bindings: {
        clickEvent: "&"
    },
    template: html
};

Child's html

<button ng-click="$ctrl.clickEvent()">
    <icon-add-goal></icon-add-goal>
</button>

Here is my current setup, want to be able to call the markAchievement function on the child's button and then I want the function to run which is from the parent.

Can anyone see what I'm doing wrong?

Answer 1

In the parents HTML, the casing was wrong.

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

Should have been

<mark-goal-button click-event="$ctrl.markAchievement()"></mark-goal-button>

When using bindings make sure to use snakecase in the HTML.