Dynamic Angular Output. Is this possible?

Question

First of all, excuse my Portuguese, I don’t write it well and I’m using a translator, but I can read it well enough.

I have several parent components and created a common child component for all of them that must adapt dynamically and automatically to each case, among them several buttons that will be generated with a forehead using the data sent by the parent (name, CSS class and Output name).

The question is: I can create Output in a dynamic way that points directly to the function of the corresponding parent?

A quick solution that occurs to me is to use only an output that sends a string or integrates always to the same function of the father and that this interprets it and the drift to the corresponding function with a switch but it seems to me a solution not very "elegant" and efficient.

For now I tried to do this in the child component, but the editor himself gives me a mistake:

componenteHijo.components.ts

@Input() misBotones: any[];
constructor() {
    this.misBotones.forEach(array => {
      @Output() array.nombreVariable: EventEmitter<number>;
    });
}

Of course I’m sending from the main component a matrix with all the necessary data:

componentePadre.components.html

<app-componente-hijo [misBotones]="botonesArray"></app-componente-hijo>

Answer 1

Finally, with the help of the "Stack Overflow en Español" (Stack Overflow en Spanish) I found the solution.

1- Dynamic output cannot be used for a simple reason: @Input and @Output annotations/decorations are used at build time, not run time.

They do not exist in Javascript and are used to add extra functionality at build time, so you cannot dynamically modify the code at runtime.

2- As an alternative to this, you can use eventHandler:

The parent component, within the data that prepares for the child component to display, can add a function to be executed in response to an event about that element to be created.

In the example, a data matrix is created that has objects with two properties: eventHandler and text.

The child component receives this matrix and creates a series of buttons and, in response to the click event, performs the function contained in the eventHandler.

Priest component

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  data = [
    {
      eventHandler: () => {
        alert("boton 1");
      },
      text: "boton 1"
    },
    {
      eventHandler: () => {
        alert("boton 2");
      },
      text: "boton 2"
    }
  ];
  
}

Hijo component

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div *ngFor="let d of data">
      <button (click)="d.eventHandler()">{{ d.text }}</button>
    </div>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() data: any[];
}

Link to the question in Spanish