Angular12 - Passing function to the component and handling result

Question

I would like to create a common component for button which executes method, and then handles the result INSIDE child component. As I understand @Output is oneway binding, so I cannot process result of passed function, so I need to use @Input .

This is what I would like to achieve:

<my-button (action) = "exampleAction" [showConfirmation]="true">Reload</my-button>

But With @Input I need to pass functions to my component using .bind(this) and this is not elegant way. It looks like that:

<my-button (action) = "exampleAction.bind(this)" [showConfirmation]="true">Reload</my-button>

Is there any way (maybe using observables) to create simple, nice buton component which takes a method, block itself, processing method and handling it's result?

Best regards

Answer 1

you can combine output and input to get a two way binding. take a look to this stackblitz

<hello (action)="increment()" [resultAvailable]="resultAvailable"></hello>