Run a function when data from child is received inside parent

Question

I have a child component and a parent component. The child component returns a _id value back to parent when one element inside it is clicked. I have received that _id inside html of the parent component. Now I have an array inside parent components ts file of parent and want to remove values from it base on the _id received from child component. I am getting the _id value inside html component of parent but unable to use it inside ts of parent

I tried to make a function and call it but it didn't work

score 0 · Answer 1 · answered Feb 06 '23 at 15:21

to trigger a function from the child to the parent :

in html parent :

<child (child_parameter)="method_in_parent_ts($event)") ></child>

in ts parent :

method_in_parent_ts(id: string){
//do something
}

in child ts:

@Output() child_parameter = new EventEmitter();

method_to_emit_id(your_id){
child_parameter.next(your_id)
}

Please put some code to see exctly how you implemented it because if we don't see, we can't help.

score 0 · Accepted Answer · answered Feb 06 '23 at 15:24

Providing some code would be helpful for answering your question, but I'll go off of what information you've given me.

I'm not aware how you're returning values from a control, but I assume its via Angular's events. In that case, you only need to bind to the child's event in the parent, and call a function from the parent control, that you've created:

<app-child (event-name)="myFunction($event)"></app-child>

myFunction(data: whatever-the-type-is) {
  // Code goes here...
}

I'd recommend that you read the following articles, so that you can get a better understanding of Angular's events and parent-child communication:

Run a function when data from child is received inside parent

2 Answers2