Pass a function as a parameter to (click) event through Angular component

Question

I'm trying to create a component with a cancel and send buttons to avoid c&p on each form but I can't find a way to pass functions as a parameter to the component selector

HTML:

<btn-submit [cancelFunction]='test' [acceptFunction]='test'></btn-submit>

TS Parent:

test = () => console.log("this is a test");

TS Child:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'btn-submit',
  styleUrls: ['./btn.component.scss'],
  template: `
          <button class="btn" click="cancelFunction()">
              <fa name="times"></fa>
          </button>
          <button class="btn" click="acceptFunction()">
              <fa name="check"></fa>
          </button>
  `
})

export class BtnSubmitComponent {
  @Input() cancelFunction: any;
  @Input() acceptFunction: any;
}

You are using event binding when I think you need to be using property binding. If you want to pass the functions in to the nested child component, you need the Input decorator, but need to bind it using property binding. Also, I think you want to pass in the function, not execute the function, so you may need to take the () off. — DeborahK
– DeborahK, Commented Jul 26, 2018 at 19:47

SwissCodeMen · Accepted Answer · 2021-11-08 15:17:25Z

10

If you want to actually pass a function in from a parent component to a child component you can do it as shown in the code below.

But using the more common @Output and EventEmitter approach as shown in other answers may be a better option. The @Output technique does not let you pass in a function, but does allow your parent component to receive events from the child component that you can respond to by calling a function in the parent component.

Here is code that allows you to pass a function in from a parent component to a child component.

Parent component

test = () => console.log("this is a test");

Parent template

<pm-star [rating]='product.starRating'
    [testFunction]='test'
    (ratingClicked)='onRatingClicked($event)'>
</pm-star>

Notice the square brackets (property binding) and it does not call a function but rather binds to a property of the component containing the function.

Child component

  @Input() testFunction: any;

Child template

<div class="crop"
     [style.width.px]="starWidth"
     [title]="rating"
     (click)="testFunction()">

I have a stackblitz with a simple working example here: https://stackblitz.com/edit/angular-jwguwk?file=src%2Fapp%2Fapp.component.ts

edited Nov 8, 2021 at 15:17

SwissCodeMen

5,03310 gold badges31 silver badges39 bronze badges

answered Jul 26, 2018 at 20:06

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

prevox Over a year ago

Do you know why it doesn't work now? I've just edited the OP. Tried C&P the code from stackblitz and it works correctly but mine doesn't

DeborahK Over a year ago

These need to use event binding: (click)="cancelFunction()" You are missing the parenthesis in your code.

prevox Over a year ago

Thanks for the help, that was the main issue of my code since I did all the tests without binding click. I also tried with @user184994 example and it didn't work because of that

Ester Kaufman Over a year ago

Thanks! works perfectly, and exactly what I looked for.

James Poulose · Accepted Answer · 2018-11-17 03:00:15Z

You can use the @Output decorator in conjunction with EventEmitter class to achieve this

Child component (Typescript and markup)

        import { Component, Input } from '@angular/core';

        @Component({
          selector: 'btn-submit',
          styleUrls: ['./btn.component.scss'],
          template: `
                  <button class="btn" click="cancelFunction()">
                      <fa name="times"></fa>
                  </button>
                  <button class="btn" click="acceptFunction()">
                      <fa name="check"></fa>
                  </button>
          `
        })

        export class BtnSubmitComponent {
          @Output() clicked: EventEmitter<any> = new EventEmitter();
          cancelFunction(){
            this.clicked.emit("CANCELLED"); // Pass any payload as argument
          }
          acceptFunction{
            this.clicked.emit("ACCEPTED"); // Pass any payload as argument
          }
        }

Parent markup

<btn-submit (clicked)="onAddClicked($event)" [acceptFunction]='test'></btn-submit>

Parent Typescript function

onAddClicked(event: any){
console.log(event); // Your payload is in 'event'
}

user184994 · Accepted Answer · 2018-07-26 19:48:41Z

0

Change it from @Input to @Output

@Output() acceptFunction = new EventEmitter<any>();

Then, inside your component when you want to invoke it, do:

this.acceptFunction.emit();

The HTML can stay as is.

    <btn-submit (cancelFunction)="myCancelFunction()"
            (sendFunction)="mySendFunction()></btn-submit>

Each time you call .emit(), it will fire an event. The parent will hear this event, and call which function you've bound (e.g. mySendFunction)

answered Jul 26, 2018 at 19:48

user184994

18.3k2 gold badges51 silver badges54 bronze badges

2 Comments

prevox Over a year ago

What's the advantage of using Output in this case?

James Poulose Over a year ago

@prevox That's already explained in the answer by Deborah. Quoting here - "But using the more common @Output and EventEmitter approach as shown in other answers may be a better option. The @Output technique does not let you pass in a function, but does allow your parent component to receive events from the child component that you can respond to by calling a function in the parent component."

Collectives™ on Stack Overflow

Pass a function as a parameter to (click) event through Angular component

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related