0

I have seen following 4 ways to use keyup event within HTML?

<input type="text" onkeyup="myFunction()">

<input #inputstring (keyup)="doSomething(inputstring.value)"/>

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

<input type="text" #formReplay (keyup)="0" />

I want to understand what is difference between the above three statements.

I have seen in angular a reference variable is created starting with #. I have seen bottom two approaches being used in angular.

<input #inputstring (keyup)="doSomething(inputstring.value)"/>

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

And, I have seen onkeyup used in plain javascript

I need some understanding on what are the various ways to use keyup in angular and in pure JS. Which one is a preferred way to use keyup?

meallhour
  • 13,921
  • 21
  • 60
  • 117
  • When you say "I have seen" - it will be much of a help if you can refer to the places you saw those usages. Besides the `onkeyup` all rest seems like some kind of a templating/front-end framework or something like that. – Dekel Apr 18 '20 at 23:50
  • I have updated my question – meallhour Apr 18 '20 at 23:57
  • So as I already mentioned in my comment - it looks like some front-end framework, which in your case is angular. This is how they handle onKeyUp events. If you use angular - use their way of doing things. – Dekel Apr 18 '20 at 23:59
  • can we use `onkeyup` in angular? also what are other ways to use `keyup` in other frameworks? – meallhour Apr 19 '20 at 00:01
  • there might be some magic things that angular is doing for you when you use "keyup" so if you will use "onkeyup" instead - those magic things will not happen. regarding other frameworks - there are tens of frameworks.. you don't really expect someone to go and check them for you, right? – Dekel Apr 19 '20 at 00:03
  • I recommend the reading of [Angular Template Syntax](https://angular.io/guide/template-syntax), notably the section about [event binding](https://angular.io/guide/template-syntax#event-binding-event). In short, one main difference is that, with `(keyup)="doSomething(...)"`, the event handler is a method of the component class, while with `onkeyup="myFunction()"`, the event handler is a function of the global scope. You should use event binding in Angular, as suggested by @Dekel. – ConnorsFan Apr 19 '20 at 02:14

0 Answers0