Dynamic Component Outputs

Question

I have 2 components in Angular, a parent and a child. I'd like the parent to be able to

1. pass an array of objects representing a clickable thing to the child
2. have the child component dynamically create the outputs based on the clickable thing array input
3. raise an event if any of the items in the input array was clicked.

Something that has the rough shape of this:

interface ClickableThing
{
  name:string;
  eventName:string
}

Example

//clickableThings definition
[{
  name:"delete";
  eventName:"deleteEvent"
},
{
  name:"save";
  eventName:"saveEvent"
}]

<child-component [clickableThings]="clickableThings" 
(deleteEvent)="handleDeleteEvent()" 
(saveEvent)="handleSaveEvent())">

The child component would have to dynamically create the outputs based on the input, clickableThings. Is something like this possible?

What I have tried

I have a much more basic approach here StackBlitz demo

Answer 1

Input and Output's are to be initialized during the component load, there are no dynamic inputs and outputs.

Because these need to be configured on the parent to even pass or receive the data into the child component.

Your current solution looks good, as is.