Trigger keyup event in Angular 5 TypeScript

Question

We have triggered keypress/down/up events programmatically easily with JavaScript/jQuery.

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

But with Angular 5 and TypeScript, how can we do that?

//I am setting value programmatically -> working
document.getElementById('custom_Credit').setAttribute('value', coinsToBuy);    
//setting focus -> working
document.getElementById('custom_Credit').focus();
//but there are no way to generate or trigger keypress/up events.
document.getElementById('custom_Credit')..........;

It's not a good practice to directly access DOM using `Document` APIs. It's also not recommended to use jQuery for it. Angular has it's own way of doing this. Use the `(click)` event instead. Like this `
` — SiddAjmera, Oct 03 '18 at 12:03
@SiddAjmera As the input has an activity with the `KeyUp` event, so I wanted to trigger that. I know, that I can call `(click)` and call that function which is called by `KeyUp`. Please let me know if there is a way to call it. — Abdur Rahim, Oct 03 '18 at 12:09

Sarthak Aggarwal · Answer 1 · 2018-10-03T12:34:51.070

17

In your app.component.html file, define events on DOM elements

<input (keyup)="onKeyup($event)" (keydown)="onKeydown($event)" #userName></input>

In your app.component.ts file , get element ref and dispatch an event, also make event handlers for the same

export class AppComponent {
 @ViewChild('userName') userInput: ElementRef;
 constructor() {}


someFunction(){
  let event = new KeyboardEvent('keyup',{'bubbles':true});
  this.userInput.nativeElement.dispatchEvent(event);
}

 onKeyup(event){
   console.log(event)
 }

 onKeydown(event){
   console.log(event)
 }

}

edited Oct 03 '18 at 12:34

answered Oct 03 '18 at 12:07

Sarthak Aggarwal

2,284
1
8
12

That event is binded. But from another point I want to trigger the (keyup) event programmatically. – Abdur Rahim Oct 03 '18 at 12:10
KeyboardEvent constructor isn't support in IE – r0bb077 Mar 12 '19 at 00:30

score 2 · Answer 2 · answered Oct 03 '18 at 12:15

If you want to listen to an Angular event in HTML, you can do so like this:

<button (click)="eventHandler($event)">

Inside your component's TypeScript class, you have your method:

eventHandler(event){
  console.log(event);
}

That is the most common way.

You can also get an element reference in Angular. Start by adding the #value on the element:

<button #myButton>

The #MyButton syntax allows you to reference the child in code using the @ViewChild metadata:

@ViewChild('myButton')
myButton: ElementRef;

Then you should be able to call the methods on the native element:

myButton.nativeElement.keydown();
myButton.nativeElement.keypress();
myButton.nativeElement.keyup();
myButton.nativeElement.blur();

I haven't actually tested this, as it is rare in Angular to try to access the underlying DOM events as opposed to using Angular's encapsulation of them.

got `Uncaught TypeError: ...nativeElement.keyup is not a function` — Jeb50, Oct 04 '21 at 23:14
That syntax looks wrong; so maybe you need something like `keyup.addEventListener('keyup', handlerfunction);` — JeffryHouser, Oct 06 '21 at 00:18

score 2 · Answer 3 · answered Oct 03 '18 at 12:15

This has nothing to do with javascript vs typescript. Typescript is basically the same. The distinction is rather jQuery vs angular.

Mark your button with an id, so we can access it from the component.

<button #submitButton ...>

In your component you can use a ViewChild decorator to access this element.

export class FooComponent {
    @ViewChild('submitButton')
    submitButtonRef: ElementRef;

    emitClick() {
         // ...
    }
}

Then to trigger the click you can do following:

emitClick() {
    this.submitButtonRef.nativeElement.click();
}

Just make sure that you don't call emitClick to early. ViewRef is only available after the AfterViewInit angular lifecycle event if I'm not mistaken.

This should also work for focus. Other events might be a bit trickier, but you have the native dom element, so basically you just need to find out how to trigger the desired event on a native dom element without jquery. If you need that you could refer to this answer: trigger custom event without jQuery

Trigger keyup event in Angular 5 TypeScript

3 Answers3

Linked