How to use keyup event in angular / how to get typed values using keyup event in angular / how to get key type / keycode / value using keyup event in angular

The keyup event occurs when the user releases a key (on the keyboard).

(keyup) is an Angular event binding to respond to any DOM event. It is a synchronous 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.

[app.component.html]

<div class="content">   <p>Entered values : {{ this.values }}</p>   <p>KeyCode : {{ this.keycode }}</p>   <p>Key : {{ this.key }}</p>   <input id="textbox" #TB placeholder="Enter any key" (keyup)="onKey($event)" /> </div>

 

[app.component.ts]

export class AppComponent {   values = '';   keycode = '';   key = '';   onKey(event: any) {     this.values = event.target.value;     this.keycode = event.keyCode;     this.key = event.key;   } }

 

Sample : https://stackblitz.com/edit/angular-ivy-nyp6qa?file=src%2Fapp%2Fapp.component.ts

 

For more information : https://angular.io/guide/user-input#user-input