How to dynamically call the parent methods from child component? [duplicate]

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
– mkHun, Commented Dec 13, 2018 at 7: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
– Eliseo, Commented Dec 13, 2018 at 7:36
@Justcode Again, this is not duplicate question, I got the answer for my question. — mkHun
– mkHun, Commented Dec 13, 2018 at 9:16
@mkHun it says possible, and as far as I see your question seems to be duplicate. — Just code
– Just code, Commented Dec 13, 2018 at 9:17

Amit Chigadani · Accepted Answer · 2018-12-13 07:14:35Z

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, 2018 at 7:14

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

5 Comments

mkHun Over a year ago

I know about the emit, but I am trying to call the addMethod and editMethod dynamically.

Amit Chigadani Over a year ago

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.

mkHun Over a year ago

Yes correct but my doubt is how to set the handle name in the template dynamically as follow (opmethod)="hereShouldBeDynamicMethodName($event)" ?

Ashish Ranjan Over a year ago

@mkHun: What decides the dynamic method name?

mkHun Over a year ago

@xyz I got the answer for my question.

behruz · Accepted Answer · 2018-12-13 07:31:43Z

0

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.

answered Dec 13, 2018 at 7:31

behruz

5984 silver badges13 bronze badges

1 Comment

mkHun Over a year ago

I got the answer for my question.

mkHun · Accepted Answer · 2018-12-13 09:19:11Z

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.

Collectives™ on Stack Overflow

How to dynamically call the parent methods from child component? [duplicate]

3 Answers 3

5 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Linked

Related