KeyUp Event in Angular.

In this blog, we are going to discuss the keyup event of Angular.

We will be explaining the keyup event and options that can be used with keyup in Angular2. There are various options that can be used with keyup events but first let me explain to you what is keyup.

keyup is an Angular event binding to respond to any DOM event. It is an asynchronous event that is triggered as the user is interacting with the text-based input controls.
When a user presses and releases a key, the keyup event occurs. For using in text-based input controls it is generally used to get values after every keystroke.

Basic Syntax of keyup

<input (keyup)="function(parameter)">

Angular provides a corresponding DOM event object in the $event variable which can also be used with keyup event to pass values or event.

For passing event syntax will be:

<input (keyup)="keyFunc($event)">

Using of keyup event:

Using keyup we can call a user-defined function that contains the logic to display the text.

create an input element that will take input.
In that input, the element calls the user-defined function on keyup event by passing $event.
Take that $event to the user-defined function in the TypeScript file take the value from the event variable by the event.target.value and add that to a local variable to see synchronous changes on keystroke.

So, thanks for following this blog, and if you need any help please leave your queries in the comment box we will be happy to help you.