Angular combine 2 output events to call 1 function

Question

I would like to know if it is possible in Angular 4 to have two ouput events calling 1 function?

e.g.

<input type="button" value="send" (click, keydown.enter)="doMagic()"/>

instead of doing

<input type="button" value="send" (click)="doMagic()" (keydown.enter)="doMagic()"/>

@HostListener is not an option.

Thanks for your help!

match · Accepted Answer · 2018-01-19 12:41:21Z

4

It doesn't seem so - at least not from this issue asking for it as a feature: https://github.com/angular/angular/issues/6675

answered Jan 19, 2018 at 12:41

match

11.2k3 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WorstCoderEver Over a year ago

Thank you for your answer! Very sad they dont want to implement this in near future. Would be essential for clean coding!

match Over a year ago

If you really need it there's this: medium.com/@TheLarkInn/… but it does mean implementing it yourself.

Michael Kang · Accepted Answer · 2018-01-19 12:56:57Z

2

Alternative solution - may be worth considering.

template:

<input #send type="button" value="send" />

component:

@ViewChild('send') sendElement: ElementRef;
sub: Subscription;
ngAfterViewInit() {
     this.sub = Observable.fromEvent('click', this.sendElement)
        .merge(Observable.fromEvent('keydown.enter', this.sendElement))
        .map(t=> this.doMagic()).subscribe();
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

doMagic() {
  ...
}

answered Jan 19, 2018 at 12:56

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

2 Comments

WorstCoderEver Over a year ago

thanks for your answer. it is a good alternative but unfortunately too much code :-(

Dale K Over a year ago

@dspies add your new code as a new answer rather than editing an existing answer.

Collectives™ on Stack Overflow

Angular combine 2 output events to call 1 function

e.g.

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

e.g.

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related