Is there a way to execute passed function in angular in parent component?

Question

I made a shared table component that draws data according to the object passed using @Input() decorator. This is how my table looks like:

I tried to make whole table as abstract as possible, so every table in the project would be generated using only the passed parameters. This is the interface for menu items:

export interface IMenuItem {
  icon: IconProp,
  name: string,
  action: Function
}

I pass array of IMenuItems and each has its own function that has to be executed when clicked. Now, when I pass a function that uses variables, functions, etc. that are outside its body, I get an error. Welp, the function gets executed separately and not in parent component so obviously it won't work that way. There's an example, when user clicks edit(pencil) icon, modal window should appear, for which I use separate function called "initModal".

editAct(data: any) {
  console.log(data);

  this.initModal(AddActComponent, "edit act", (res: any) => {
    console.log(res);
  })
}

My only idea is to pass those external functions too and use them as arguments for main function which then utilizes them accordingly, but if that outside function uses other variables, functions, etc. that I'm stuck again. I'd like to find better solution. So, if you have some advices I'd appreciate your help. Thanks.

use a service and define all functions in it.

Mojtaba Nejad Poor Esmaeili
– Mojtaba Nejad Poor Esmaeili

2022-08-29 05:59:03 +00:00
Commented Aug 29, 2022 at 5:59 — Mojtaba Nejad Poor Esmaeili
– Mojtaba Nejad Poor Esmaeili, Commented Aug 29, 2022 at 5:59

DOZBORNE · Accepted Answer · 2022-08-29 05:31:18Z

1

You should be able to:

Define A function in your parent component:

myCallbackFunction = (args: any): void => {
  //callback code here
}

Then Pass it into child:

<app-child-component [callbackFunction]=”myCallbackFunction”></app-child-component>

Then, in you child component receive it like so

@Input() callbackFunction: (args: any) => void;

Lastly, call it like you would any other function:

this.callbackFunction(someArgs);

However, you could also emit an event using EventEmitter() each time the icon is clicked in the table with the data you wish to emit. You could catch that event on the parent component, then you could execute a function in the parent component any time an event is triggered.

E.g Child component event emitter

@Output() iconClicked: EventEmitter = new EventEmitter();

handleButtonClicked(event: any): void {
  this.iconClicked.emit(event);
}

Then in parent compoent

<app-child-component (iconClicked)="handleEventInParent"></app-child-component>

handleEventInParent(event: any): void {
 // do something here!
}

answered Aug 29, 2022 at 5:31

DOZBORNE

6206 silver badges13 bronze badges

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

1 Comment

Irakli Tulashvili Over a year ago

Thanks, I will stick to event emitter. instead of function, I pass function name and when I catch the emit in parent component I call functions like this: this[functionName]()

Collectives™ on Stack Overflow

Is there a way to execute passed function in angular in parent component?

1 Answer 1

Define A function in your parent component:

Then Pass it into child:

Then, in you child component receive it like so

Lastly, call it like you would any other function:

E.g Child component event emitter

Then in parent compoent

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Define A function in your parent component:

Then Pass it into child:

Then, in you child component receive it like so

Lastly, call it like you would any other function:

E.g Child component event emitter

Then in parent compoent

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related