Passing dynamic functions from parent component to grandchild component Angular

Question

I am creating a common table component for my angular application so that the component takes input for rows, columns, along with some action button handler functions and render table.

The table will be something like this

I In this way, a single component can be used to render table for the whole application.

//parent-component.ts

parentFunction1(){
  //edit User
}
parentFunction2(){
  //delete User
}
parentFunction3(){
  //view user
}

I am passing data from the parent component as

//inside some-parent.component.html

<common-table
    [columns]="columnConfig"
    [dataSource]="rowConfig">
</common-table>

In my common-table.component.html , based on conditions I need to render different components as:

//inside common-table.component.html
<table-cell [row]="row" [column]="column"></table-cell>

from table-cell.component.html I need to call functions of parent-component.ts . For different components, my function name may vary, is there any way in angular so that if json

           [
              {
                name: 'Edit',
                type: 'button',
                outputHandler:parentFunction1
              },
              {
                name: 'Delete',
                type: 'button',
                outputHandler:parentFunction2
              },
              {
                name: 'View',
                type: 'button',
                outputHandler:parentFunction3
              }
            ]

like this can be passed from parent component and use the functions of the parent component from grandchild table-cell.component.html

I can use output and eventemitter, but as number of functions passed and name of functions may vary, so It cannot be hard corded. How to achieve this. Please help as I searched a lot but could not get the solution.

Answer 1

This is how your root component looks like.

export class AppComponent {
  title = "CodeSandbox";

  myConfig: ConfigModel[] = [
    {
      name: "Edit",
      type: "button",
      outputHandler: this.parentFunction1
    },
    {
      name: "Delete",
      type: "button",
      outputHandler: this.parentFunction2
    },
    {
      name: "View",
      type: "button",
      outputHandler: this.parentFunction3
    }
  ];

  parentFunction1() {
    console.log("parent func 1");
  }

  parentFunction2() {
    console.log("parent func 2");
  }

  parentFunction3() {
    console.log("parent func 3");
  }
}

As you are passing this configuration to your grand child component. you can invoke the function directly from your configuration object.

<div *ngFor="let item of config">
  <button (click)="action(item)">{{item.name}}</button>
</div>


export class ActionComponent {
  @Input() config: ConfigModel[];

  action(item: ConfigModel) {
    console.log(item);
    item.outputHandler();
  }
}

Working Demo