Angular Custom FN in data definition

Issue

I can set a fn handler to my component in parent by emit event from output variable

parent.html

<myEl (onClick)="handleClick()" />

myElComponent.ts

  @Output() onClick: EventEmitter<string> = new EventEmitter();

  ...

  onClick() {
    this.onClick.emit();
  }

But I need set a FN in data definition

parent.html

<myEl [cols] ="cols" [rows]="rows" />

parent.ts

cols: codDef[]= [{
        dataKey: 'flag',
        dataKeyFn: handleFlagClick  //<<<<<<<<<<<
      }{
        dataKey: 'score',
        dataKeyFn: handleScoreClick  //<<<<<<<<<<<
      }]

rows = [{flag:1, score:10},{flag:2, score:9}....{flag:10, score:1}]

How I can get/set my handleCustonFn in child component to send a emiter?

I'm creating a component to show many panels and each panel can raise event a custom FN in parent depending on dataKeyFn set. The handleFn will be receive row (flag or score value depending witch panel was clicked) and col (definition of this row). Basicaly I need convert a string to Output variable value but for each value from my rows array

Solution

When defining the colDef you can add .bind(this) which will make the function you bind, execute with the scope where it was set ( here it will be the parent )

To Sum up, use bind to bind the parent scope to the function of colDef, now even if its executed in the child component, it can access the parent eventEmitter.

      cols: codDef[]= [{
        dataKey: 'flag',
        dataKeyFn: handleFlagClick.bind(this)  //<<<<<<<<<<<
      }{
        dataKey: 'score',
        dataKeyFn: handleScoreClick.bind(this)  //<<<<<<<<<<<
      }]

Answered By - Naren Murali