CODEWITHSUNDEEP
javascriptangulartypescriptcallbackangular-event-emitter
Mohammad Abbasi
Mohammad Abbasi

Reputation: 322

Angular EventEmitter with Callback

I want to make the custom button component in my angular application and i have a method to implement click, here is the code: 

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 problem is when user clicks the button the 'active' will be true and event will execute, but the 'active' will be false without waiting the event finish.I want the 'active' to false when the event is fully executed.

how can i fix this or how can i add Callback to the emit method?

Upvotes: 4

Views: 8382

Answers (2)

ilyas shabi
ilyas shabi

Reputation: 194

Since the Active is an Input why not change it's value from the parent component. I mean you can move this.active = false; from MyButtonComponent to your HostComponent inside the method that handle your Output

Upvotes: 0

Alex
Alex

Reputation: 1158

You can subscribe to EventEmitters:

this.btnClick.subscribe(() => this.active = false);

That would give you

export class MyButtonComponent implements OnInit {
  @Input() active: boolean = false;
  @Output() btnClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent) {
      this.active = true;
      this.btnClick.emit(event);
  }
  
  ngOnInit() {
    this.btnClick.subscribe(() => this.active = false);
  }
}

Upvotes: 1

Related Questions