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

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()">

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?


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.

Leave a Reply

Your email address will not be published. Required fields are marked *