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 <div (click)="eventHandler()"></div> — SiddAjmera
– SiddAjmera, Commented Oct 3, 2018 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
– Abdur Rahim, Commented Oct 3, 2018 at 12:09

Sarthak Aggarwal · Accepted Answer · 2018-10-03 12:34:51Z

18

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 3, 2018 at 12:34

answered Oct 3, 2018 at 12:07

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

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

2 Comments

Abdur Rahim Over a year ago

That event is binded. But from another point I want to trigger the (keyup) event programmatically.

r0bb077 Over a year ago

KeyboardEvent constructor isn't support in IE

JeffryHouser · Accepted Answer · 2018-10-03 12:15:26Z

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
That syntax looks wrong; so maybe you need something like keyup.addEventListener('keyup', handlerfunction);

tom van green · Accepted Answer · 2018-10-03 12:15:48Z

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

Collectives™ on Stack Overflow

Trigger keyup event in Angular 5 TypeScript

3 Answers 3

2 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Linked

Related