What Typescript type is Angular2 event

Question

If I have the following button in an html file

<button (click)="doSomething('testing', $event)">Do something</button>

Also, in the corresponding component, I have this function

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

Is there a proper type that should be assigned to the $event input? The event parameter itself is an object, BUT if I assign it to a type object, I get an error

Property 'stopPropogation' does not exist on type object

So, what does Typescript consider the $event input?

Eric Martinez: Can you post your comment as an answer? That cleared up all of the flags I was getting, so I am taking it as correct. — Alex J
– Alex J, Commented Mar 13, 2016 at 15:39

Eric Martinez · Accepted Answer · 2016-03-13 15:59:21Z

105

As suggested by @AlexJ

The event you passed through $event is a DOM event, therefore you can use the EventName as the type.

In your case this event is a MouseEvent, and the docs says, quoting

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

In all those cases you'll get a MouseEvent.

Another example : if you have this code

<input type="text" (blur)="event($event)"

When the event triggers you'll get a FocusEvent.

So you can do it really simple, console log the event and you'll see a message similar to this one that'll we have the event name

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

You can always visit the docs for a list of existing Events.

Edit

You can also check for TypeScript dom.generated.d.ts with all the typings ported. In your case stopPropagation() is part of Event, extended by MouseEvent.

edited Mar 13, 2016 at 15:59

answered Mar 13, 2016 at 15:52

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

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

3 Comments

hlovdal Over a year ago

See this answer for a HTMLInputEvent type.

jfroy Over a year ago

It should be noted that if the event originates from an Angular component through an @Output, typically a component field of type EventEmitter<T>, then the type of the $event argument is T. See angular.io/api/core/EventEmitter.

Skystrider Over a year ago

eg. KeyboardEvent for events like (keydown) or (keypress)

CPHPython · Accepted Answer · 2023-08-24 14:30:01Z

Some commonly used events and their related names (MouseEvent, FocusEvent, TouchEvent, DragEvent, KeyboardEvent):

| MouseEvent | FocusEvent |  TouchEvent | DragEvent | KeyboardEvent |
|:----------:|:----------:|:-----------:|:---------:|:-------------:|
|    click   |    focus   |  touchstart |    drag   |    keypress   |
|   mouseup  |    blur    |  touchmove  |    drop   |     keyup     |
| mouseleave |   focusin  | touchcancel |  dragend  |    keydown    |
|  mouseover |  focusout  |   touchend  |  dragover |               |

The generic Event is associated to:

close
cancel
change
invalid
play
reset
scroll
scrollend
select
toggle
waiting

If you dig in Typescript's repository, dom.generated.d.ts provides a mapping of all global events handlers (credit goes to Eric's answer) in the GlobalEventHandlersEventMap interface:

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "cancel": Event;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "close": Event;
    "compositionend": CompositionEvent;
    "compositionstart": CompositionEvent;
    "compositionupdate": CompositionEvent;
    "contextmenu": MouseEvent;
    "copy": ClipboardEvent;
    "cuechange": Event;
    "cut": ClipboardEvent;
    "dblclick": MouseEvent;
    "drag": DragEvent;
    "dragend": DragEvent;
    "dragenter": DragEvent;
    "dragleave": DragEvent;
    "dragover": DragEvent;
    "dragstart": DragEvent;
    "drop": DragEvent;
    "durationchange": Event;
    "emptied": Event;
    "ended": Event;
    "error": ErrorEvent;
    "focus": FocusEvent;
    "focusin": FocusEvent;
    "focusout": FocusEvent;
    "formdata": FormDataEvent;
    "gotpointercapture": PointerEvent;
    "input": Event;
    "invalid": Event;
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;
    "loadeddata": Event;
    "loadedmetadata": Event;
    "loadstart": Event;
    "lostpointercapture": PointerEvent;
    "mousedown": MouseEvent;
    "mouseenter": MouseEvent;
    "mouseleave": MouseEvent;
    "mousemove": MouseEvent;
    "mouseout": MouseEvent;
    "mouseover": MouseEvent;
    "mouseup": MouseEvent;
    "paste": ClipboardEvent;
    "pause": Event;
    "play": Event;
    "playing": Event;
    "pointercancel": PointerEvent;
    "pointerdown": PointerEvent;
    "pointerenter": PointerEvent;
    "pointerleave": PointerEvent;
    "pointermove": PointerEvent;
    "pointerout": PointerEvent;
    "pointerover": PointerEvent;
    "pointerup": PointerEvent;
    "progress": ProgressEvent;
    "ratechange": Event;
    "reset": Event;
    "resize": UIEvent;
    "scroll": Event;
    "scrollend": Event;
    "securitypolicyviolation": SecurityPolicyViolationEvent;
    "seeked": Event;
    "seeking": Event;
    "select": Event;
    "selectionchange": Event;
    "selectstart": Event;
    "slotchange": Event;
    "stalled": Event;
    "submit": SubmitEvent;
    "suspend": Event;
    "timeupdate": Event;
    "toggle": Event;
    "touchcancel": TouchEvent;
    "touchend": TouchEvent;
    "touchmove": TouchEvent;
    "touchstart": TouchEvent;
    "transitioncancel": TransitionEvent;
    "transitionend": TransitionEvent;
    "transitionrun": TransitionEvent;
    "transitionstart": TransitionEvent;
    "volumechange": Event;
    "waiting": Event;
    "webkitanimationend": Event;
    "webkitanimationiteration": Event;
    "webkitanimationstart": Event;
    "webkittransitionend": Event;
    "wheel": WheelEvent;
}

Exactly the thing I wanted, in the format I wanted it 😋. Thank you CPHPython !
Glad it helped, thank you for updating the TS link, I also updated the list of handlers.
This should be the Golden Standard for formatting -- such an incredibly-well formatted and concise answer! ⭐

Pardeep Jain · Accepted Answer · 2016-03-13 06:39:06Z

3

According to official event is of type Object, also in my case when i typecaste event to the Object it does't throw any error, but after reading documentation of angular2 found event is of type EventEmitter so you can type caste your event into EventEmitter

see here is plunkr for the same http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

for more info refer here https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

answered Mar 13, 2016 at 6:39

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Comments

Adrian Marc · Accepted Answer · 2022-12-20 07:57:22Z

The previous answers excellently treated the original question and guided me in the right direction.

However, I stumbled upon this page while starting to learn Angular(and front-end) and not having a clear picture of how the mentioned types are documented and maintained. A short reference to additional context:

Both MouseEvent and Focus Event are part of Mozilla's Web API's specification - the de facto API used by most modern Web Browser for exposing functionality to the JavaScript runtime.

If you are used to a back-end environment like Java, the Web API specification can be viewed as a rough equivalent to the central documentation (Oracle's Java Doc in Java's case) maintained by the language provider plus some reference to third-party APIs.

Unlike Java/C# specifications where the main distributions are guaranteed to fully implement the specs, on the front-end, every browser provider has the liberty of choosing which parts are supported - while common events like click will most probably be supported by everything on the markets this is not a guarantee as you dive deeper into more advanced functionalities. However, the Web API's specification documentation does a great job of tracking the support of the major browser by all of its specified features, for example, here the Browser Compatibility of the MouseEvent can be consulted.

For an excelent introduction to the Web API's, please check the official presentation on Mozzila's Page

Collectives™ on Stack Overflow

What Typescript type is Angular2 event

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related