In order to create a custom button component for my angular application and implement a method for click functionality, I have the following code snippet:
export class MyButtonComponent {
@Input() active: boolean = false;
@Output() btnClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@HostListener('click', ['$event'])
public async onClick(event: MouseEvent) {
this.active = true;
await this.btnClick.emit(event);
this.active = false;
}
}
The issue I am facing is that when the user clicks the button, the 'active' status becomes true and the event is executed. However, the 'active' status turns false without waiting for the event to finish execution. I would like the 'active' status to be set to false only after the event has fully executed.
How can I address this issue or how can I incorporate a Callback function with the emit method?