How to dynamically call the parent methods from child component?

Question

Below is my code

parent component.ts

data  = [{
    "name":"This is my name",
    "editButton": {
                "name":"Edit",
                "click":"editMethod()",
            },
    "addButton": {
                    "Name":"Add",
                    "click":"addMethod()"
    }
}]

editMethod(rowVal){
    console.log("calling edit");
}


addMethod(rowVal){
    console.log("calling add");
}

parent.html

<button-app [childdata]="data" (opmethod)="iDotknowtoCallMethod()"></button-app>

childComponent.ts

@Input()
childdata;

@Output()
opmethod = new EventEmitter<string>();

child component.html

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.editButton" (click)="ech.editButton.click" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="ech.addButton.click">{{ech.addButton.name}}</button>
</div>

We can call the parent method using emit, that is not my question.

I am trying to call the parent method, which names are provided in the data object. But I am not having any Idea how to call this method.

@Justcode This is not a duplicate question. I am trying to call the dynamic parent methods. — mkHun, Dec 13 '18 at 07:21
your json must be data = [{ "name":"This is my name", "editButton": { "name":"Edit", "click":this.editMethod()}... }, That's, "click" is NOT a string is a function — Eliseo, Dec 13 '18 at 07:36
@Justcode Again, this is not duplicate question, I got the answer for my question. — mkHun, Dec 13 '18 at 09:16
@mkHun it says possible, and as far as I see your question seems to be duplicate. — Just code, Dec 13 '18 at 09:17
@mkHun: Then probably don't call the function in the object, just attach the reference: like: `click: this.editMethod` — Ashish Ranjan, Dec 13 '18 at 09:30
@xyz I am not calling the function. I am giving the reference only in the Object. — mkHun, Dec 13 '18 at 11:44

score 1 · Answer 1 · answered Dec 13 '18 at 07:14

1

You have to emit an Output event from child component to parent using

opmethod.emit('Your data')

child.html

<button *ngIf="ech.editButton" (click)="opmethod.emit('Your data')" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="opmethod.emit('Your data')">{{ech.addButton.name}}</button>

And in parent.html

<button-app [childdata]="data" (opmethod)="addMethod($event)"></button-app>

answered Dec 13 '18 at 07:14

Amit Chigadani

28,482
13
80
98

I know about the `emit`, but I am trying to call the `addMethod` and `editMethod` dynamically. – mkHun Dec 13 '18 at 07:19
I that case also you still have to emit an event with the `method` name in data. And then the handler in parent component should call that method. – Amit Chigadani Dec 13 '18 at 07:22
Yes correct but my doubt is how to set the handle name in the template dynamically as follow `(opmethod)="hereShouldBeDynamicMethodName($event)"` ? – mkHun Dec 13 '18 at 07:27
@mkHun: What decides the dynamic method name? – Ashish Ranjan Dec 13 '18 at 07:44
@xyz I got the answer for my question. – mkHun Dec 13 '18 at 09:15

score 0 · Answer 2 · answered Dec 13 '18 at 07:31

its not a good approach. change your data to this:

enum BottonTypes {
    edit,
    add
}
class BUttonClass {
    name: string;
    type: ButtonTypes
}
data: ButtonClass[]  = [{
        name:"This is my name",
        type: ButtonTypes.edit
    },
    {
       'name':"This is my name",
        type: ButtonTypes.save
    }
]

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.type === 0" (click)="buttonClicked(ech)" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.type === 1" (click)="buttonClicked(ech)">{{ech.addButton.name}}</button>
</div>

and in your ts:

opmethod = new EventEmitter<ButtonClass>();

buttonClicked(btn: ButtonClass)
{
    this.opmethod.emit(btn);
}

parent component html:

<button-app [childdata]="data" (opmethod)="iDotknowtoCallMethod($event)"></button-app>

parent component.ts:

iDotknowtoCallMethod(btn: ButtonCLass) {
    do what you want
}

hope this helps.

I got the answer for my question. – mkHun Dec 13 '18 at 09:15 — mkHun, Dec 13 '18 at 09:15

mkHun · Accepted Answer · 2018-12-13T09:19:11.460

As per @Eliseo comment, I got the answer for my question

parentcomponent.ts

data  = [{
    "name":"This is my name",
    "editButton": {
                "name":"Edit",
                "click":this.editMethod,
            },
    "addButton": {
                    "Name":"Add",
                    "click":this.addMethod
    }
}]

parentcomponent.html

<button-app [childdata]="data" (opmethod)="$event"></button-app>

childcomponent.html

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.editButton" (click)="opmethod.emit(ech.editButton.click(ech))" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="opmethod.emit(ech.addButton.click(ech))">{{ech.addButton.name}}</button>
</div>

I should emit the method in the child component. In the parent component I should declare only the $event it is calling the dynamic methods.

How to dynamically call the parent methods from child component?

3 Answers3