Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding multiple events to an element in angular 2

Here is my component's template

<input #emailId (focusout)="emailIdCheck(emailId.value)" #emailIDD (keydown.tab)="emailIdCheck(emailIDD.value)" type="text" placeholder="Your Email ID">

As you can see I have bound the focusout event as well as keydown.tab (tab keydown) event to a method in my component class.

But this looks ugly and does not scale well if I want to bind a number of events.

Is there a possibility to have something like the below?

<input #emailId (focusout|keydown.tab)="emailIdCheck(emailId.value)" type="text" placeholder="Your Email ID">

Disclaimer: I started practicing angular2 couple of weeks back and am still new

like image 740
Giridhar Karnik Avatar asked Dec 29 '16 08:12

Giridhar Karnik


People also ask

Can I use two events in Angular?

After realizing this, I wanted to see if you could arbitrarily bind to the same event several times. Turns out, you totally can. Run this demo in my JavaScript Demos project on GitHub. In Angular 1.

What does $event do in Angular?

The $event object often contains information the method needs, such as a user's name or an image URL. The target event determines the shape of the $event object. If the target event is a native DOM element event, then $event is a DOM event object, with properties such as target and target.

How do you create two-way data binding in Angular?

Adding two-way data bindinglink Angular's two-way binding syntax is a combination of square brackets and parentheses, [()] . The [()] syntax combines the brackets of property binding, [] , with the parentheses of event binding, () , as follows.

What type is $event Angular?

Angular includes $event that contains the information about an event. The type of $event depends on the target event, e.g., if the target event is a native DOM element event, then it is an object. A component should define the onShow(event) method where the type of the parameter can be KeyboardEvent, MouseEvent, etc.


1 Answers

https://github.com/angular/angular/issues/6675

Oct 3 2016

not planned in a near future

like image 197
Günter Zöchbauer Avatar answered Oct 01 '22 06:10

Günter Zöchbauer